<style>
.busArrangement .availableCar li {
  display: inline-block;
  width: 90px;
  height: 30px;
  background-color: #e3e3e3;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}
.busArrangement .busArrangeList {
  width: 100%;
  height: 60px;
  font-size: 12px;
  border: 1px solid #dddddd;
  background-color: #fff;
  margin-top: 20px;
  min-width: 1120px;
}
.busArrangement .busArrangeList:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.busArrangement .avilaTitle {
  float: left;
  color: #333333;
  font-size: 14px;
  margin-right: 20px;
  line-height: 30px;
}
.busArrangement .arrange_title {
  float: left;
  width: 20%;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  line-height: 60px;
  cursor: pointer;
  text-decoration: underline;
  margin: 0 20px;
}
.busArrangement .arrange_Day {
  float: left;
  width: 12%;
  min-width: 150px;
  overflow: hidden;
  line-height: 60px;
}
.busArrangement .goType {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #7fd3ff;
  background-color: #4cc0fc;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  margin-right: 10px;
}
.busArrangement .arrange_Day:last-child {
  border-right: 1px dashed #d7d7d7;
}
.busArrangement .avilaJie {
  float: left;
  width: 6%;
  min-width: 65px;
  margin-left: 20px;
}
.busArrangement .avilaJie span {
  display: inline-block;
}
.busArrangement .avila {
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
}
.busArrangement .avilaJie:last-child {
  border-right: 1px dashed #d7d7d7;
}
.busArrangement .el-icon-circle-check {
  color: #4bca81;
}
.busArrangement .toProcess {
  float: left;
  min-width: 80px;
  text-align: center;
  line-height: 60px;
  width: 8%;
  height: 100%;
}
.busArrangement .busArrangeNum {
  float: left;
  height: 30px;
  min-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  background-color: #f9f9f9;
  border: 2px dashed #e3e3e3;
  margin-top: 15px;
  border-radius: 4px;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
}
.busArrangement .busBtnList {
  float: left;
  line-height: 60px;
  margin-left: 2%;
}
.busArrangement .topList {
  padding: 20px 0;
  border: 1px solid #ededed;
  font-size: 12px;
  width: 100%;
  background-color: #fff;
  min-width: 1120px;
  padding: 10px 0 20px 20px;
  overflow: auto;
}
.busArrangement .noWork {
  width: 100%;
  display: inline-block;
  border-bottom: 1px dashed #dcdfe6;
  padding-bottom: 10px;
  color: #47bf8c;
  margin-top: 5px;
}
.busArrangement .fmain {
  width: 80%;
  height: auto;
  margin: 25px 0 auto;
  float: left;
  min-width: 900px;
  overflow: hidden;
}
.busArrangement .leftArrow,
.busArrangement .rightArrow {
  float: left;
  width: 30px;
  height: 30px;
  margin: 25px 20px 0 0;
}
.busArrangement .rightArrow {
  float: left !important;
}
.busArrangement .leftArrow i,
.busArrangement .rightArrow i {
  cursor: pointer;
  font-size: 28px;
}
.busArrangement .uu li {
  display: inline-block;
  width: 90px;
  height: 30px;
  border-radius: 4px;
  margin-right: 10px;
  font-weight: bold;
  background-color: #e3e3e3;
  color: #333333;
  text-align: center;
  line-height: 30px;
}
.busArrangement .w150 .el-input {
  width: 150px !important;
}
._tripDetails {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
}
._tripDetails .popper__arrow::after {
  border-bottom-color: #ededed !important;
}
._tripDetails table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}
._tripDetails table th {
  background-color: #ededed;
  padding: 5px;
}
._tripDetails table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}
._tripDetails table ._color_666 {
  color: #666666;
}
._tripDetails table tr._color_666 th {
  padding: 9px 15px;
}
.busArrangement .disNone {
  color: #cccccc;
}
.busArrangement .mainPopDiv {
  overflow: auto;
  width: 450px;
  max-height: 200px;
}
.busArrangement .mainPopDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.busArrangement .mainPopDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.busArrangement .mainPopDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.busArrangement .query-box {
  border-bottom: none;
}
.busArrangement {
  overflow: auto;
}
.busArrangement::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.busArrangement::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.busArrangement::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.busArrangement .BusUsePlan:hover {
  color: #e95252;
}
.busArrangement .mouseOne:hover {
  border: 2px solid #e95252;
  color: #e95252;
}
.busCityName {
  display: inline-block;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busArrangement .ManyBusCount {
  border: 2px solid #e95252 !important;
  color: #e95252;
  font-weight: bold;
}
</style>
<template>
  <div class="flexOne busArrangement">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>发团日期</em>
            <el-date-picker class="w150" v-model="msg.QStartDate" type="date" :picker-options="pickerOptions1"
              value-format="yyyy-MM-dd" placeholder="">
            </el-date-picker>
            <el-date-picker class="w150" v-model="msg.QEndDate" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions2"
              placeholder="">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>团队编号</em>
            <el-input v-model="msg.TCNUM" maxlength="50" class="w150" @keyup.native.enter="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>团队状态</em>
            <el-select v-model="msg.TCState" filterable :placeholder="$t('system.table_country')" class="w150">
              <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
              <el-option v-for='item in TeamSaleStateList' :key="item.Id" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>是否派车</em>
            <el-select v-model="msg.IsPlan" filterable :placeholder="$t('pub.pleaseImport')" class="w150">
              <el-option label="全部" value='0'></el-option>
              <el-option v-for='item in IsPlanList' :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" @click="getList()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div v-loading="loading" class="commonContent">
      <div class="busArrangeList afterfix" v-for="item in dataList" :key="item.subCode" @drop="drop($event,item.TCID)"
        @dragover="allowDrop($event)">
        <el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start" popper-class="max-w250">
          <div class="arrange_title" @click="getJourney(item.TCID,item.Title)">
            {{item.Title}}
          </div>
        </el-tooltip>
        <div class="arrange_Day">
          <span class="goType">发</span>
          {{item.StartDate}}
        </div>
        <div class="arrange_Day">
          <span class="goType">返</span>
          {{item.EndDate}}
        </div>
        <div class="avilaJie">
          <el-popover popper-class="_tripDetails" width="400" trigger="hover">
            <div class="mainPopDiv">
              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
                <tr class="_color_666">
                  <th>行程日期</th>
                  <th>城市</th>
                  <th>用车情况</th>
                  <th>预计人数</th>
                </tr>
                <tr v-for="list in item.JourneyBusList" :key="list.subCode">
                  <td>{{list.JourneyDate}}</td>
                  <td>{{list.CityName}}</td>
                  <td>{{list.BusUsePlan}}</td>
                  <td>{{list.PeopleCount}}</td>
                </tr>
              </table>
            </div>
            <div slot="reference" class="avila BusUsePlan">{{item.BusPlan}}</div>
          </el-popover>
          <div v-if="item.BusPlan">预计</div>
        </div>
        <div class="avilaJie">
          <div class="avila">{{item.TotalNumber}}人</div>
          <div>计划人数</div>
        </div>
        <div class="avilaJie">
          <div class="avila">{{item.FinishedNumber}}人</div>
          <div>报名人数</div>
        </div>
        <div class="toProcess" v-if="item.TCState==0">

        </div>
        <div class="toProcess" v-if="item.TCState==1">
          <i class="el-icon-circle-check"></i>待完善
        </div>
        <div class="toProcess" v-if="item.TCState==2">
          <i class="el-icon-circle-check"></i>下架
        </div>
        <div class="toProcess" v-if="item.TCState==3">
          <i class="el-icon-circle-check"></i>上架
        </div>
        <div class="toProcess" v-if="item.TCState==4">
          <i class="el-icon-circle-check"></i>取消
        </div>
        <div class="busArrangeNum" v-if="item.ManyBusCount==0">

        </div>
        <el-popover popper-class="_tripDetails" width="400" trigger="hover">
          <div class="mainPopDiv">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
              <tr class="_color_666">
                <th>日期</th>
                <th>城市</th>
                <th>用车情况</th>
                <th>预计人数</th>
                <th>车配号</th>
              </tr>
              <tr v-for="list in item.JourneyBusList" :key="list.subCode">
                <td>{{list.JourneyDate}}</td>
                <el-tooltip class="item" effect="dark" :content="list.CityName" placement="top-start" popper-class="max-w250">
                  <td><span class="busCityName">{{list.CityName}}</span></td>
                </el-tooltip>
                <td>{{list.BusUsePlan}}</td>
                <td>{{list.PeopleCount}}</td>
                <td>{{list.BusCode}}</td>
              </tr>
            </table>
          </div>
          <div class="busArrangeNum ManyBusCount" slot="reference" v-if="item.ManyBusCount==1">
            {{item.JourneyBusList[0].BusCode}}
          </div>
        </el-popover>
        <el-popover popper-class="_tripDetails" width="400" trigger="hover">
          <div class="mainPopDiv">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
              <tr class="_color_666">
                <th>日期</th>
                <th>城市</th>
                <th>用车情况</th>
                <th>预计人数</th>
                <th>车配号</th>
              </tr>
              <tr v-for="list in item.JourneyBusList" :key="list.subCode">
                <td>{{list.JourneyDate}}</td>
                <el-tooltip class="item" effect="dark" :content="list.CityName" placement="top-start" popper-class="max-w250">
                  <td><span class="busCityName">{{list.CityName}}</span></td>
                </el-tooltip>
                <td>{{list.BusUsePlan}}</td>
                <td>{{list.PeopleCount}}</td>
                <td>{{list.BusCode}}</td>
              </tr>
            </table>
          </div>
          <div class="busArrangeNum ManyBusCount" slot="reference" v-if="item.ManyBusCount>1">
            多车配
          </div>
        </el-popover>
        <div class="busBtnList">
          <input type="button" v-if="item.ManyBusCount==0" class="normalBtn" @click="goUrl('BusInfo',item)" value="新增车配" />
        </div>
      </div>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
      :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog custom-class='ComTeamPlan_info_box' :title="tripTitle" :visible.sync="outerVisible" center>
      <commonTeamInfo ref="comTeam"></commonTeamInfo>
    </el-dialog>
  </div>
</template>
<script>
import commonTeamInfo from "../commonPage/commonTeamInfo.vue";
export default {
  data() {
    return {
      getBusArg: {
        pageIndex: 1,
        pageSize: 20,
        QStartDate: "",
        QEndDate: "",
        PageCount: 0
      },
      dragInfo: {
        BusId: "",
        TCID: ""
      },
      msg: {
        pageIndex: 1,
        pageSize: 8,
        QStartDate: "",
        QEndDate: "",
        TCNUM: "",
        TCState: "0",
        IsPlan: "0"
      },
      IsPlanList: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "2",
          label: "否"
        }
      ],
      noData: false,
      outerVisible: false,
      TeamSaleStateList: "",
      loading: false,
      total: 0,
      dataList: "",
      currentPage: 1,
      isShow: false,
      tripTitle: "",
      pickerOptions1: {
        disabledDate: time => {
          let endTime = new Date(this.msg.QStartDate);
          return endTime.getTime() < time.getTime();
        }
      },
      pickerOptions2: {
        disabledDate: time => {
          let startTime = new Date(this.msg.QEndDate);
          return startTime.getTime() >= time.getTime();
        }
      }
    };
  },
  components: {
    commonTeamInfo: commonTeamInfo
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "bus_GetBusPlanPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
            if (res.data.data.count > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
          } else {
            this.Warning(res.data.message);
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    //获取销售状态列表
    GetTeamSaleStateList() {
      this.apipost(
        "travel_get_GetTeamSaleStateList",
        {},
        res => {
          this.TeamSaleStateList = res.data.data;
        },
        err => {}
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.setLeaderNeed();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //根据ID 获取行程内容
    getJourney(id, title) {
      var that = this;
      this.tripTitle = title;
      this.$nextTick(() => {
        that.$refs.comTeam.GetTrip(0,id);
      });
      that.outerVisible = true;
    },
    goUrl(path, item) {
      this.$router.push({
        path: path,
        query: {
          TCID: item.TCID,
          StartDate: item.StartDateStr,
          DayNum: item.DayNum,
          TotalNumber: item.TotalNumber
        }
      });
    }
  },
  mounted() {
    this.GetTeamSaleStateList();
    this.getList();
  }
};
</script>