<style>
  .leaderArrangement .query-box {
    border-bottom: none;
  }

  .leaderArrangement .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;
  }

  .leaderArrangement .topList::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .leaderArrangement .topList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .leaderArrangement .topList::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .leaderArrangement .topList span {
    display: inline-block;
  }

  .leaderArrangement .Llist {
    float: left;
    margin: 20px 20px 0 0;
    text-align: center;
  }

  .leaderArrangement .leaderList {
    min-width: 1300px;
  }

  .leaderArrangement .headerImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
  }

  .leaderArrangement .headerImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .leaderArrangement .leaderInfo {
    width: 100%;
    height: 100px;
    background-color: #fff;
    margin-top: 20px;
    line-height: 100px;
    border: 1px solid #dddddd;
    font-size: 12px;
  }

  .leaderArrangement .leaderInfo:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .leaderArrangement .Lleader {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 30px 0 20px;
    text-decoration: underline;
    cursor: pointer;
  }

  .leaderArrangement .expectDay,
  .LtimeList {
    min-width: 120px;
  }

  .leaderArrangement .sxDay {
    min-width: 82px;
  }

  .leaderArrangement .expectDay span {
    font-size: 18px;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .leaderArrangement .Arrange_Y1 {
    color: #32cc8a;
    margin: 0 3px;
  }

  .leaderArrangement .Arrange_Y2 {
    color: #2aaef2;
    margin: 0 3px;
  }

  .leaderArrangement .forSaling {
    color: #32cc8a;
    text-align: center;
    border-right: 1px dashed #dcdfe6;
  }

  .leaderArrangement .notAssigned {
    width: 130px;
    text-align: center;
    margin-left: 10px;
  }

  .leaderArrangement .litCircle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px auto;
  }

  .leaderArrangement .litCircle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .leaderArrangement .Assied>div:first-child {
    margin-left: 20px;
    text-align: center;
  }

  .leaderArrangement .AssList {
    float: left;
    margin: 5px 10px 0 0;
    height: 80px;
    line-height: 1;
    text-align: center;
  }

  .leaderArrangement .btmList {
    position: fixed;
    width: 100%;
    min-width: 1120px;
    height: 160px;
    background-color: #fff;
    bottom: 0;
    display: none;
    padding: 20px;
    border-top: 1px solid #d2d2d2;
    font-size: 12px;
    color: #666;
  }

  .leaderArrangement .btList {
    margin: 20px 20px;
  }

  .leaderArrangement .isShow {
    display: block;
  }

  .leaderArrangement .noWork {
    width: 100%;
    display: inline-block;
    border-bottom: 1px dashed #dcdfe6;
    padding-bottom: 10px;
    color: #47bf8c;
    margin-top: 5px;
  }

  .leaderArrangement ._ol_color {
    font-size: 12px;
    width: 100%;
    margin: 20px 0;
  }

  .leaderArrangement ._ol_color li {
    float: left;
    padding: 0 15px;
    display: flex;
    align-items: center;
  }

  .leaderArrangement ._ol_color li:first-child {
    color: #e95252;
  }

  .leaderArrangement ._ol_color li:nth-child(2) {
    color: #47bf8c;
  }

  .leaderArrangement ._ol_color li ._cl {
    border-radius: 3px;
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
  }

  .leaderArrangement ._ol_color li ._c2 {
    border-radius: 3px;
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
  }

  .leaderArrangement ._red {
    background-color: #e95252;
  }

  .leaderArrangement ._green {
    background-color: #47bf8c;
  }

  .leaderArrangement ._oll_line {
    float: left;
    width: 5px;
    height: 100px;
    background-color: #e95252;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .leaderArrangement ._o_green {
    background-color: #47bf8c;
  }

  .leaderArrangement .goType {
    display: inline-block;
    background-color: #ff7862;
    color: #fff;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
  }

  .leaderArrangement .icon-img-rili {
    color: #cccccc;
    margin-right: 10px;
  }

  .leaderArrangement .setTitle {
    border-left: 3px solid #e95252;
    padding-left: 10px;
  }

  .leaderArrangement .LeDis {
    margin-left: 30px;
  }

  .leaderArrangement .btnList {
    position: absolute;
    right: 300px;
    top: 80px;
  }

  .leaderArrangement .w150 .el-input {
    width: 150px !important;
  }

  .leaderArrangement::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .leaderArrangement::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .leaderArrangement::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .leaderArrangement .btList .el-form-item {
    float: left;
    margin-right: 20px;
  }

  .leaderArrangement .leaderInfo .hollowFixedBtn {
    width: 80px;
  }

  .leaderArrangement .fmain {
    height: auto;
    margin: auto;
    float: left;
    min-width: 900px;
    overflow: hidden;
  }

  .leaderArrangement .leftArrow,
  .rightArrow {
    float: left;
    width: 30px;
    height: 30px;
    margin: 30px 20px 0 0;
  }

  .rightArrow {
    float: left !important;
  }

  .leaderArrangement .leftArrow i,
  .rightArrow i {
    cursor: pointer;
    font-size: 28px;
  }

  .disNone {
    color: #cccccc;
  }

</style>
<template>
  <div class="flexOne leaderArrangement">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('hotel.hotel_country')}}</em>
            <el-select v-model="CountryIDStr" clearable class="w150" filterable
              :placeholder="$t('hotel.hotel_country')">
              <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
              <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('scen.sc_ftTime')}}</em>
            <el-date-picker class="w150" v-model="msg.QStartDateStr" type="date" :picker-options="pickerOptions1"
              value-format="yyyy-MM-dd" placeholder="">
            </el-date-picker>
            <el-date-picker class="w150" v-model="msg.QEndDateStr" type="date" value-format="yyyy-MM-dd"
              :picker-options="pickerOptions2" placeholder="">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('scen.sc_temID')}}</em>
            <el-input v-model="msg.QTCID" maxlength="50" @keyup.native.enter="getList" class="w150"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('scen.sc_temStatu')}}</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>{{$t('leader.leader_assigned')}}</em>
            <el-select v-model="msg.QIsAssign" filterable :placeholder="$t('pub.pleaseImport')" class="w150">
              <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
              <el-option v-for='item in QIsAssignList' :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
        </li>
      </ul>
    </div>
    <div v-loading="loading" class="commonContent">
      <div class="topList clearfix">
        <span>{{$t('leader.leader_noTask')}}</span>
        <span class="noWork">{{$t('ground.tuozhuaishezhi')}}<el-input :placeholder="$t('rule.qsrname')" v-model="noTaskLeaderMsg.LeaderName"
            maxlength="50" @keyup.native.enter="noTaskLeaderMsg.pageIndex=1,getNoTaskLeader()" class="w150"> </el-input>
          <input type='button' :value='$t("pub.searchBtn")' class="hollowFixedBtn"
            @click="noTaskLeaderMsg.pageIndex=1,getNoTaskLeader()" /> </span>
        <div class="leaderList clearfix">
          <div class="leftArrow" v-if="this.noTaskLeaderMsg.PageCount>2">
            <i class="iconfont icon-previewleft" :class="{'disNone':this.noTaskLeaderMsg.pageIndex==1}"
              @click="LeaderMove(-1)"></i>
          </div>
          <div class="fmain">
            <ul class="uu clearfix">
              <li class="Llist" v-for="leader in LeaderList" draggable="true"
                @dragstart="drag($event,leader.LeaderId,leader.Type)" :key="leader.subCode">
                <div class="headerImg">
                  <img v-if="!leader.EmPhoto" src="../../assets/img/default_head_img.jpg">
                  <img v-else :src="imgBeforeFile+leader.EmPhoto" :onerror='defaultImg' />
                </div>
                <span>{{leader.LeaderName}}</span>
              </li>
            </ul>
          </div>
          <div class="rightArrow" v-if="this.noTaskLeaderMsg.PageCount>2">
            <i class="iconfont icon-arrow-right"
              :class="{'disNone':this.noTaskLeaderMsg.pageIndex==this.noTaskLeaderMsg.PageCount}"
              @click="LeaderMove(1)"></i>
          </div>
        </div>
      </div>
      <ul class="_ol_color clearfix">
        <li><span class="_red _c2"></span><span
            class="_red_text">{{$t('Airticket.Air_redType')}}：</span>{{$t('leader.leader_noAssigned')}}
        </li>
        <li><span class="_green  _cl"></span><span
            class="_green_text">{{$t('Airticket.Air_greenType')}}：</span>{{$t('leader.leader_hasAssigned')}}
        </li>
      </ul>
      <div class="leaderInfo afterfix" v-for="item in dataList" :key="item.subCode"
        @drop="drop($event,item.TCID,item.Id)" @dragover="allowDrop($event)">
        <el-row :gutter="10">
          <el-col :span="4">
            <div class="_oll_line" v-if="item.LeaderType==0"></div>
            <div class="_oll_line _o_green" v-if="item.LeaderType>0"></div>
            <el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start" popper-class="max-w250">
              <div class="Lleader" @click="getJourney(0,item.TCID,item.Title)">{{item.Title}}</div>
            </el-tooltip>
          </el-col>
          <el-col :span="2">
            <div class="LtimeList"><span class="goType">{{$t('leader.leader_start')}}</span>{{item.StartDate}}</div>
          </el-col>
          <el-col :span="2">
            <div class="LtimeList"><span class="goType">{{$t('leader.leader_back')}}</span>{{item.EndDate}}</div>
          </el-col>
          <el-col :span="2">
            <div class="expectDay"><i class="iconfont icon-img-rili"></i>{{$t("visa.v_xcdays")}}<span
                class="Arrange_Y1">{{item.DayNum}}</span>{{$t('hotel.hotel_day')}}
            </div>
          </el-col>
          <el-col :span="3">
            <div class="expectDay">{{$t('leader.leader_planNum')}}<span
                class="Arrange_Y2">{{item.TotalNumber}}</span>{{$t('hotel.hotel_people')}}
            </div>
          </el-col>
          <el-col :span="2">
            <div class="sxDay">{{$t('leader.leader_registraNum')}}<span
                class="Arrange_Y1">{{item.FinishedNumber}}</span>{{$t('hotel.hotel_people')}}
            </div>
          </el-col>
          <el-col :span="2">
            <div class="forSaling">{{item.TCStateStr}}{{$t('hotel.hotel_Inthe')}}</div>
          </el-col>
          <el-col :span="5">
            <div class="notAssigned" v-if="item.LeaderId===0&&item.GuideId===0">
              {{$t('leader.leader_notAssigned')}}
            </div>
            <div class="Assied clearfix" v-if="item.LeaderId!=0||item.GuideId!=0">
              <div class="AssList clearfix" v-if="item.LeaderId>0">
                <div class="litCircle">
                  <img v-if="!item.LeaderPhoto" src="../../assets/img/default_head_img.jpg">
                  <img v-else :src="imgBeforeFile+item.LeaderPhoto" :onerror='defaultImg' />
                </div>
                <div>{{item.LeaderName}}/{{$t('leader.leader_Leader')}}</div>
              </div>
              <div class="AssList clearfix" v-if="item.GuideId>0">
                <div class="litCircle">
                  <img v-if="!item.GuidePhoto" src="../../assets/img/default_head_img.jpg">
                  <img v-else :src="imgBeforeFile+item.GuidePhoto" :onerror='defaultImg' />
                </div>
                <div style="white-space:nowrap;">{{item.GuideName}}/{{$t('leader.leader_Guide')}}</div>
                <div style="white-space:nowrap;margin:5px 0;">{{$t('system.table_phone')}}：{{item.GuideMobilePhone}}</div>
                <div style="white-space:nowrap;" v-if="item.SpareTel!=null&&item.SpareTel!=''">{{$t('ground.jingwaihao')}}：{{item.SpareTel}}
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <input type="button" class="hollowFixedBtn" v-if='item.Id>0&&item.GuideId>0' @click="cancelLeader(item.Id)"
              :value="$t('ground.quxiaodaoyou')">
          </el-col>
        </el-row>
      </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 {
        msg: {
          pageIndex: 1,
          pageSize: 4,
          QStartDateStr: new Date().Format("yyyy-MM-dd"),
          QEndDateStr: this.setEdate(),
          TCState: "0",
          QIsAssign: "0",
          QTCID: ""
        },
        noTaskLeaderMsg: {
          pageIndex: 1,
          pageSize: 20,
          LeaderName: "",
          PageCount: 0,
          QStartDateStr: "",
          QEndDateStr: "",
        },
        addMsg: {
          Id: "0",
          LeaderType: "1",
          LeaderId: "0",
          GuideId: "0",
          TCID: "",
          IsSure: 0,
        },
        QIsAssignList: [{
            value: "1",
            label: this.$t('leader.leader_noAssigned')
          },
          {
            value: "2",
            label: this.$t('leader.leader_hasAssigned')
          }
        ],
        CountryIDStr: "",
        defaultImg: 'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
        imgBeforeFile: this.domainManager().ViittoFileUrl,
        outerVisible: false,
        TeamSaleStateList: "",
        loading: false,
        total: 0,
        dataList: "",
        LeaderList: "",
        guidArr: "",
        LeaderArr: "",
        guidAndLeader: "",
        currentPage: 1,
        isShow: false,
        tripTitle: "",
        countryList: "",
        pickerOptions1: {
          disabledDate: time => {
            if (this.msg.QEndDateStr == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.QEndDateStr)
              return endTime.getTime() < time.getTime()
            }
          }
        },
        pickerOptions2: {
          disabledDate: time => {
            let startTime = new Date(this.msg.QStartDateStr);
            return startTime.getTime() >= time.getTime();
          }
        },
        dragId: "",
        leaderType: "",
        rules: {
          //表单必填验证
          LeaderId: [{
            required: true,
            message: this.$t("ground.qingxuanzetuandui")
          }]
        }
      };
    },
    components: {
      commonTeamInfo: commonTeamInfo
    },
    methods: {
      getList() {
        this.loading = true;
        this.apipost(
          "LeaderSchedule_get_GetLeaderSchedulePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              this.dataList = res.data.data.pageData;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      LeaderMove(num) {
        if (num < 0) {
          if (this.noTaskLeaderMsg.pageIndex != 1) {
            this.noTaskLeaderMsg.pageIndex = this.noTaskLeaderMsg.pageIndex - 1;
            this.getNoTaskLeader();
          }
        } else {
          if (
            Number(this.noTaskLeaderMsg.pageIndex) <
            Number(this.noTaskLeaderMsg.PageCount)
          ) {
            this.noTaskLeaderMsg.pageIndex = this.noTaskLeaderMsg.pageIndex + 1;
            this.getNoTaskLeader();
          }
        }
      },
      getNoTaskLeader() {
        this.noTaskLeaderMsg.QStartDateStr = this.msg.QStartDateStr;
        this.noTaskLeaderMsg.QEndDateStr = this.msg.QEndDateStr;
        this.apipost(
          "LeaderSchedule_get_GetNoTaskLeaderList",
          this.noTaskLeaderMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.LeaderList = res.data.data.pageData;
              this.noTaskLeaderMsg.PageCount = res.data.data.pageCount;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      setEdate() {
        //默认查询三个月时间
        return this.addMoth(new Date().Format("yyyy-MM-dd"), 1);
      },
      addMoth(d, m) {
        let ds = d.split("-"),
          _d = ds[2] - 0;
        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
        let max = nextM.getDate();
        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
        return d
          .toLocaleDateString()
          .match(/\d+/g)
          .join("-");
      },
      GetTeamSaleStateList() {
        //获取销售状态列表
        this.apipost(
          "travel_get_GetTeamSaleStateList", {},
          res => {
            this.TeamSaleStateList = res.data.data;
          },
          err => {}
        );
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getJourney(id,TCID, title) {
        //根据ID 获取行程内容
        var that = this;
        this.tripTitle = title;
        this.$nextTick(() => {
          that.$refs.comTeam.GetTrip(id,TCID);
        });
        that.outerVisible = true;
      },
      //获取国家
      getCountryList() {
        let msg = {};
        this.apipost(
          "dict_post_Destination_GetCountry",
          msg,
          res => {
            this.countryList = res.data.data;
          },
          err => {}
        );
      },
      allowDrop(e) {
        e.preventDefault();
      },
      drag(e, leaderId, leaderType) {
        this.dragId = leaderId;
        this.leaderType = leaderType;
      },
      drop(e, TCID, Id) {
        this.addMsg.GuideId = this.dragId;
        this.addMsg.LeaderType = this.leaderType;
        if (this.addMsg.LeaderType === 2) {
          this.addMsg.LeaderId = this.dragId;
        }
        if (this.addMsg.GuideId == "") {
          this.addMsg.GuideId = "0";
        }
        this.addMsg.TCID = TCID;
        this.addMsg.Id = Id;
        var that = this;
        this.apipost(
          "LeaderSchedule_post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getList();
              this.getNoTaskLeader();
              this.Success(this.$t("ground.shezhichenggong"));
              this.isShow = false;
            } else {
              that.Confirm(that.$t('ground.sheizhichongtu'), function () {
                that.addMsg.IsSure = 1;
                that.apipost(
                  "LeaderSchedule_post_Set",
                  that.addMsg,
                  res => {
                    if (res.data.resultCode == 1) {
                      that.getList();
                      that.getNoTaskLeader();
                      that.Success(that.$t("ground.shezhichenggong"));
                      that.isShow = false;
                    }
                  },
                  err => {}
                );
              });
            }
          },
          err => {}
        );
      },
      //取消领队安排
      cancelLeader(ID) {
        var that = this;
        this.Confirm(this.$t('ground.querenquxiao'), function () {
          let msg = {
            ID: ID
          };
          that.apipost("LeaderSchedule_Post_Remove", msg, res => {
            if (res.data.resultCode == 1) {
              that.Success(that.$t('ground.quxiaochenggong'));
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          });
        });
      }
    },
    mounted() {
      this.msg.QTCID = this.$route.query.id;
      if (this.msg.QTCID != undefined) {
        this.msg.QStartDateStr = '';
        this.msg.QEndDateStr = '';
      }
      this.getCountryList();
      this.GetTeamSaleStateList();
      this.getList();
    }
  };
</script>