<style>
.leaderTaskBoard .query-box {
  border-bottom: none;
}
.leaderTaskBoard .leaderInfo {
  width: 100%;
  height: 70px;
  background-color: #fff;
  margin-top: 20px;
  line-height: 70px;
  font-size: 12px;
  border:1px solid #dddddd;
}
.leaderTaskBoard .leaderInfo:hover{
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.leaderTaskBoard .Lleader {
  min-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 20px;
  text-decoration: underline;
  cursor: pointer;
}
.leaderTaskBoard .expectDay,
.LtimeList {
  min-width: 120px;
}
.leaderTaskBoard .expectDay span {
  font-size: 18px;
  font-family: PingFangSC-Semibold, sans-serif;
}
.leaderTaskBoard .Y1List {
  color: #32cc8a;
  margin: 0 3px;
  display: inline-block;
  min-width: 20px;
}
.leaderTaskBoard .forSaling {
  text-align: center;
  border-right: 1px dashed #dcdfe6;
}
.leaderTaskBoard .notAssigned {
  width: 150px;
  text-align: center;
}
.leaderTaskBoard .litCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin: 15px 10px 0 0;
}
.leaderTaskBoard .litCircle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.leaderTaskBoard .Assied {
  width: 200px;
}
.leaderTaskBoard .Assied > div:first-child {
  margin-left: 40px;
}
.leaderTaskBoard .AssList {
  float: left;
  margin-right: 20px;
  height: 60px;
  line-height: 1;
  text-align: center;
}
.leaderTaskBoard .btmList {
  position: fixed;
  width: 100%;
  height: 150px;
  background-color: #fff;
  bottom: 0;
  display: none;
  padding: 20px;
  border-top: 1px solid #d2d2d2;
  font-size: 12px;
  color: #666;
}
.leaderTaskBoard .btList {
  margin: 20px 20px;
}
.leaderTaskBoard .isShow {
  display: block;
}
.leaderTaskBoard .goType {
  display: inline-block;
  background-color: #ff7862;
  color: #fff;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
}
.leaderTaskBoard .icon-img-rili {
  color: #cccccc;
  margin-right: 10px;
}
.leaderTaskBoard .setTitle {
  border-left: 3px solid #e95252;
  padding-left: 10px;
}
.leaderTaskBoard .LeDis {
  margin-left: 30px;
}
.leaderTaskBoard .w150 .el-input {
  width: 150px !important;
}
.leaderTaskBoard .createName {
  /* width: 5%; */
  text-align: center;
  color: #999999;
}
.leaderTaskBoard .inreception {
  color: #32cc8a;
}
.leaderTaskBoard .notStart {
  color: #e95252;
}
.leaderTaskBoard .worked {
  color: #cccccc;
}
.leaderTaskBoard .leaderList{min-width: 1300px;}
.leaderTaskBoard .cirList {
  float: left;
  position: relative;
  height: 50px;
  width: 60px;
  line-height: 2;
  margin: 8px 10px 0 20px;
}
.leaderTaskBoard .circleHeader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.leaderTaskBoard .circleHeader img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.leaderTaskBoard .leaderType {
  position: absolute;
  right: 0;
  top: -2px;
  padding: 0 5px;
  background-color: #32cc8a;
  color: #fff;
  border-radius: 7px;
  font-size: 10px;
  -webkit-transform: scale(0.8);
}
.leaderTaskBoard::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.leaderTaskBoard::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.leaderTaskBoard::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.leaderTaskBoard .btList .el-form-item {
  float: left;
  margin-right: 20px;
}
.leaderTaskBoard .btnList {
  position: absolute;
  right: 300px;
  top: 80px;
}
.leaderTaskBoard .topList {
  padding: 20px 0;
  border: 1px solid #ededed;
  font-size: 12px;
  width: 100%;
  background-color: #fff;
  /* min-width: 1400px; */
  padding: 10px 0 20px 20px;
  overflow: auto;
}
.leaderTaskBoard .topList::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.leaderTaskBoard .topList::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.leaderTaskBoard .noWork {
  width: 100%;
  display: inline-block;
  border-bottom: 1px dashed #dcdfe6;
  padding-bottom: 10px;
  color: #47bf8c;
  margin-top: 5px;
}
.leaderTaskBoard .fmain {
  width: 1200px;
  height: auto;
  margin: auto;
  float: left;
  min-width: 900px;
  overflow: hidden;
}
.leaderTaskBoard .Llist {
  float: left;
  margin: 20px 20px 0 0;
  text-align: center;
}

.leaderTaskBoard .leftArrow,
.rightArrow {
  float: left;
  width: 30px;
  height: 30px;
  margin: 30px 20px 0 0;
}
.rightArrow {
  float: left !important;
}
.leaderTaskBoard .leftArrow i,
.rightArrow i {
  cursor: pointer;
  font-size: 28px;
}
.disNone {
  color: #cccccc;
}
.leaderTaskBoard .headerImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
}
.leaderTaskBoard .headerImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>
<template>
  <div class="flexOne leaderTaskBoard">
       <div class="query-box">
                   <ul>
                        <li>
                            <span>
                                <em>{{$t("advmanager.v_country")}}</em>
                                <el-select v-model="msg.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('leader.leader_dateOfTour')}}</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('leader.leader_LeGuid')}}</em>
                                <el-select v-model="msg.LeaderId"  filterable :placeholder="$t('pub.pleaseSel')" class="w150">
                                    <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                                    <el-option v-for='item in guidAndLeader'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </span>
                        </li>
                        <li>
                            <span>
                                <em>{{$t('leader.leader_TaskState')}}</em>
                                <el-select v-model="msg.TCType"  filterable :placeholder="$t('system.table_country')" class="w150">
                                    <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                                    <el-option v-for='item in LeaderType'
                                        :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(),resetPageIndex()" />
                        </li>
                   </ul>
       </div>
       <div v-loading="loading" class="commonContent">
          <div class="topList clearfix" v-if="LeaderList.length>0" style="display:none;">
               <span>{{$t('leader.leader_noTask')}}</span>
               <span class="noWork">{{$t("ground.tuozhuaishezhi")}}</span>
               <div class="leaderList clearfix">
                   <div class="leftArrow">
                        <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">
                        <i class="iconfont icon-arrow-right" :class="{'disNone':this.noTaskLeaderMsg.pageIndex==this.noTaskLeaderMsg.PageCount}" @click="LeaderMove(1)"></i>
                    </div>
               </div>
           </div>
           <div class="leaderInfo clearfix" 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="3">
                  <div class="leadersList" style="min-width:230px;height:70px;">
                      <div v-if="item.LeaderType==1">
                          <div class="cirList" v-if="item.LeaderName!=''">
                              <div class="circleHeader">
                                  <img v-if="!item.LeaderPhoto" src="../../assets/img/default_head_img.jpg">
                                  <img v-else :src="imgBeforeFile+item.LeaderPhoto" :onerror='defaultImg'/>
                              </div>
                              <div class="leaderType">{{$t('leader.leader_Leader')}}</div>
                              <div>{{item.LeaderName}}</div>
                          </div>
                          <div class="cirList" v-if="item.GuideName!=''">
                              <div class="circleHeader">
                                  <img v-if="!item.GuidePhoto" src="../../assets/img/default_head_img.jpg">
                                  <img v-else :src="imgBeforeFile+item.GuidePhoto" :onerror='defaultImg'/>
                              </div>
                              <div class="leaderType">{{$t('leader.leader_Guide')}}</div>
                              <div>{{item.GuideName}}</div>
                          </div>
                      </div>
                      <div v-if="item.LeaderType==2">
                              <div class="cirList" v-if="item.LeaderName!=''">
                                  <div class="circleHeader">
                                      <img v-if="!item.LeaderPhoto" src="../../assets/img/default_head_img.jpg">
                                      <img v-else :src="imgBeforeFile+item.LeaderPhoto" :onerror='defaultImg'/>
                                  </div>
                                  <div class="leaderType">{{$t('leader.leader_leaderDi')}}</div>
                                  <div>{{item.LeaderName}}</div>
                              </div>
                      </div>
                  </div>
                </el-col>
                <el-col :span="3">
                  <el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start" popper-class="max-w250">
                      <div class="Lleader" @click="getJourney(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="Y1List">{{item.DayNum}}</span>{{$t('hotel.hotel_day')}}</div>
                </el-col>
                <el-col :span="4">
                  <div style="border:1px solied red">{{$t('ground.tuanrenshu')}}：<span class="Y1List">{{item.FinishedNumber}}</span> {{$t("ground.leijianpaics")}}：<span class="Y1List">{{item.LeaderCount}}</span></div>
                </el-col>
                <el-col :span="2">
                  <div class="forSaling inreception" v-if="item.TCType==1">{{$t('leader.leader_Inreception')}}</div>
                  <div class="forSaling notStart" v-if="item.TCType==2">{{$t('leader.leader_noStart')}}</div>
                  <div class="forSaling worked" v-if="item.TCType==3">{{$t('leader.leader_HasCompleted')}}</div>
                </el-col>
                <el-col :span="1">
                  <div class="createName">{{$t('hotel.table_operater')}}</div>
                </el-col>
                <el-col :span="3">
                <div>
                      <div class="litCircle">
                          <img v-if="!item.CreateUrl" src="../../assets/img/default_head_img.jpg" alt="">
                          <img v-else :src="item.CreateUrl" alt="">
                      </div>
                      <div class="creaPeople">{{item.CreateName}}</div>
                </div>
                </el-col>
                <el-col :span="2">
                  <div class="createDate">
                        <i class="iconfont icon-img-rili"></i>{{item.CreateDateStr}}
                  </div>
                </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: 5,
        QStartDateStr: new Date().Format("yyyy-MM-dd"),
        QEndDateStr: this.setEdate(),
        LeaderId: "0",
        TCType: "0",
        CountryIDStr: ""
      },
      noTaskLeaderMsg: {
        pageIndex: 1,
        pageSize: 20,
        CountryIDStr: "",
        QStartDateStr: "",
        QEndDateStr: "",
        PageCount: 0
      },
      addMsg: {
        Id: "0",
        LeaderType: "1",
        LeaderId: "",
        GuideId: "0",
        TCID: ""
      },
      LeaderType: [
        {
          value: "1",
          label: this.$t('leader.leader_Inreception')
        },
        {
          value: "2",
          label: this.$t('leader.leader_noStart')
        },
        {
          value: "3",
          label: this.$t('leader.leader_HasCompleted')
        }
      ],
      leaderAndGuid: "",
      defaultImg:
        'this.src="' + require("../../assets/img/default_head_img.jpg") + '"',
      imgBeforeFile: this.domainManager().ViittoFileUrl,
      loading: false,
      total: 0,
      dataList: "",
      guidAndLeader: "",
      currentPage: 1,
      tripTitle: "",
      outerVisible: false,
      countryList: "",
      LeaderList: "",
      pickerOptions1: {
        disabledDate: time => {
          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();
        }
      }
    };
  },
  components: {
    commonTeamInfo: commonTeamInfo
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "LeaderSchedule_get_GetLeaderTaskBoardPageList",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
          this.loading = false;
        },
        err => {}
      );
    },
    getNoTaskLeader() {
      this.noTaskLeaderMsg.CountryIDStr = this.CountryIDStr;
      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 => {}
      );
    },
    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();
        }
      }
    },
    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("-");
    },
    getAllList(Type) {
      let msg = {
        Type: Type
      };
      this.apipost(
        "leader_post_GetList",
        msg,
        res => {
          this.guidAndLeader = res.data.data;
        },
        err => {}
      );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getJourney(id, title) {
      //根据ID 获取行程内容
      var that = this;
      this.tripTitle = title;
      this.$nextTick(() => {
        that.$refs.comTeam.GetTrip(id);
      });
      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.LeaderId = this.dragId;
      this.addMsg.leaderType = this.leaderType;
      this.addMsg.TCID = TCID;
      this.addMsg.Id = Id;
      this.apipost(
        "LeaderSchedule_post_Modify",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.getNoTaskLeader();
            this.Success(this.$t("ground.shezhichenggong"));
            this.isShow = false;
          } else {
            this.$confirm(this.$t('ground.sheizhichongtu'), "提示", {
              confirmButtonText: this.$t("pub.sureBtn"),
              cancelButtonText: this.$t("pub.cancelBtn"),
              type: "warning"
            });
          }
        },
        err => {}
      );
    }
  },
   
  mounted() {
    this.getCountryList();
    this.getNoTaskLeader();
    this.getAllList(0);
    this.getList();
  }
};
</script>