<style>
  .guidScheduleMg .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }

  .guidScheduleMg .query-box ul .el-input {
    width: 150px;
  }

  .guidScheduleMg .guidScheduleMg_list {
    padding: 20px 0;
  }

  .guidScheduleMg .guidScheduleMg_list>li {
    float: left;
    height: 180px;
    width: 300px;
    margin: 0 15px;
    margin-bottom: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  }

  .guidScheduleMg .guidScheduleMg_list>li>div {
    height: 180px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .guidScheduleMg .guidScheduleMg_list>li .hl_img {
    width: 100%;
    height: 100%;
    filter: blur(10px);
    position: absolute;
  }

  .guidScheduleMg .hl_top {
    color: #ffffff;
  }

  .guidScheduleMg .hl_tit {
    width: 230px;
    font-size: 14px;
    position: absolute;
    left: 10px;
    top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
  }

  .guidScheduleMg .hl_radius {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border: solid 4px rgba(193, 193, 193, 0.46);
    line-height: 75px;
    font-size: 16px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #e95252;
    text-align: center;
    font-size: 16px;
  }

  .guidScheduleMg .hl_row {
    width: 80%;
    height: 30px;
    background: rgba(23, 21, 26, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
  }

  .guidScheduleMg .hl_row>li {
    list-style: disc;
  }

  .guidScheduleMg .guidScheduleMg_info {
    padding: 0 65px;
  }

  .guidScheduleMg .guidScheduleMg_info .hl_info {
    color: #333333;
  }

  .guidScheduleMg .guidScheduleMg_info .hl_info span {
    color: #666666;
  }

  .guidScheduleMg .hl_flight {
    padding-top: 20px;
  }

  .guidScheduleMg .hl_flight li {
    display: flex;
    align-items: center;
  }

  .guidScheduleMg ._go {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: #ff7862;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
    margin-right: 10px;
  }

  .guidScheduleMg ._textB14 {
    color: #333333;
    font-size: 14px;
  }

  .guidScheduleMg ._timeCity {
    margin: 15px 49px;
  }

  .guidScheduleMg ._time {
    color: #666666;
    font-size: 18px;
    font-weight: 700;
  }

  .guidScheduleMg ._city {
    color: #ff7862;
    font-size: 14px;
    text-align: center;
  }

  .guidScheduleMg ._line {
    display: flex;
    align-items: center;
  }

  .guidScheduleMg ._line span {
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #ff7862;
  }

  .guidScheduleMg ._line span._lr {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: solid 2px #ff7862;
    background-color: white;
  }

  .guidScheduleMg ._flight_num,
  ._flight_name {
    color: #999999;
    font-size: 14px;
    font-weight: 700;
    margin-left: 15px;
  }

  .guidScheduleMg ._flight_name {
    font-weight: lighter;
  }

  .guidScheduleMg ._margintop30 {
    margin-top: 30px;
  }

  .guidScheduleMg ._details {
    margin-left: 20px;
    padding-top: 20px;
  }

  .guidScheduleMg ._details>li {
    border-left: 1px solid #e9e9e9;
    position: relative;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-top: 15px;
  }

  .guidScheduleMg ._d_radius {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: 0px;
    background-color: #e95252;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: white;
    font-weight: 700;
  }

  .guidScheduleMg ._Itinerary {
    color: #333333;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .guidScheduleMg ._Itinerary .iconfont {
    color: #666666;
  }

  .guidScheduleMg ._d_city,
  ._d_time {
    display: inline-block;
    padding: 0 20px;
  }

  .guidScheduleMg ._d_time {
    padding: 0 10px 0 0;
  }

  .guidScheduleMg ._d_info {
    color: #666666;
    font-size: 14px;
    line-height: 22px;
    padding-top: 16px;
  }

  .guidScheduleMg ._food_hotel {
    padding-top: 25px;
  }

  .guidScheduleMg ._food_hotel ._food,
  ._hotel {
    float: left;
    width: 50%;
  }

  .guidScheduleMg ._food_hotel .iconfont::before {
    font-size: 18px;
    color: #07a767;
  }

  .guidScheduleMg ._food_hotel ._hotel .iconfont::before {
    color: #2595ee;
  }

  .guidScheduleMg ._fh_tit {
    font-size: 16px;
  }

  .guidScheduleMg ._fist {
    padding-bottom: 10px;
  }

  .guidScheduleMg ._meidonfxi {
    text-align: center;
    padding: 25px 0;
  }

  .guidScheduleMg ._meidonfxi .iconfont {
    display: block;
    font-size: 50px;
    color: #d6d6d6;
  }

  .guidScheduleMg ._meidonfxi p {
    color: #999999;
    font-size: 14px;
  }

  .guidScheduleMg .el-dialog__header .el-dialog__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    margin: 0 auto;
  }

  .guidScheduleMg .TypeOne {
    color: #47bf8c;
  }

  .guidScheduleMg .TypeTwo {
    color: #e95252;
  }

  .guidScheduleMg .typeThree {
    color: #666666;
  }

  .guidScheduleMg .leaderName {
    position: relative;
    top: -10px;
    left: 5px;
  }

  .guidScheduleMg .headerImg {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
  }

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

  .guidScheduleMg .grayLi img {
    -webkit-filter: grayscale(1) blur(10px) !important;
  }

  .guidScheduleMg ._vMG_edit {
    display: none;
    position: absolute;
    bottom: 0;
    font-family: 'PingFangSc-Fine';
    left: 0;
    border-top: 3px solid #38425d;
    background-color: #fff;
    padding: 10px;
    width: 100%;
  }

  .guidScheduleMg ._vMG_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #E95252;
    font-size: 16px;
    color: #000000
  }

  .guidScheduleMg ._vMG_edit ._tit span {
    color: #666666;
    font-size: 14px
  }

  .guidScheduleMg ._edHeight {
    height: 400px;
  }

  .guidScheduleMg .edHeight {
    display: block !important;
    height: 170px;
  }

  .guidScheduleMg .edHeight form {
    padding-top: 20px;
  }

  .guidScheduleMg ._vMG_edit .el-date-editor.el-input,
  .guidScheduleMg ._vMG_edit .el-date-editor.el-input__inner {
    width: 100% !important;
  }

</style>
<template>
  <div class="flexOne guidScheduleMg">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('leader.leader_leaderGuid')}}</em>
            <el-select v-model="msg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
              <el-option :label="$t('pub.unlimitedSel')" :value="-1"> </el-option>
              <el-option v-for='item in leaderList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('leader.leader_ScheduleType')}}</em>
            <el-select v-model="msg.ScheduleType" filterable :placeholder="$t('admin.admin_phBirthPlace')" class="w210">
              <el-option :label="$t('system.ph_buxian')" :value='0'></el-option>
              <el-option :label="$t('leader.leader_Vacation')" value='1'></el-option>
              <el-option :label="$t('leader.leader_Leader')" value='2'></el-option>
              <el-option :label="$t('leader.leader_LandG')" value='3'></el-option>
              <el-option :label="$t('leader.leader_Guide')" value='4'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('adm.adm_time')}}</em>
            <el-date-picker v-model="msg.YearMonth" value-format="yyyy-MM" type="month" :placeholder="$t('op.ChoiceMonth')">
            </el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('op.Addschedule')"
            @click="addMsg.LeaderId = msg.LeaderId, addShow = true,text='新增',resetForm('addMsg')" />
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
        </li>
      </ul>
    </div>
    <div :class="addShow==true?'_edHeight':''">
      <table border="0" cellspacing="1" cellpadding="0" class="singeRowTable"  v-loading="loading"
        style="border: 1px solid rgb(230, 230, 230);background: #ccc;width: 100%">
        <tr>
          <th>{{$t('op.LeaderGuildName')}}</th>
          <th>{{$t('hotel.hotel_StartDate')}}</th>
          <th>{{$t('hotel.hotel_EndDate')}}</th>
          <th>{{$t('leader.leader_ScheduleType')}}</th>
          <th>{{$t('scen.sc_temID')}}</th>
          <th>{{$t('pub.pubRemark')}}</th>
          <th>{{$t('admin.admin_czPerson')}}</th>
          <th>{{$t('admin.admin_operate')}}</th>
        </tr>
        <tr v-for="(item, index) in dataList">
          <td>{{item.LeaderName}}/{{item.GuideName}} </td>
          <td>{{item.StartDate}}</td>
          <td>{{item.EndDate}}</td>
          <td>
            <span v-if="item.TypeId===0">{{$t('op.SysCantuan')}}</span>
            <span v-if="item.TypeId===1">{{$t('leader.leader_Vacation')}}</span>
          </td>
          <td><span style="text-decoration: underline;cursor: pointer;color: #3980C8;"
              @click="goUrl('productQuery',item.TCID)">{{item.TCID}}</span></td>
          <td>{{item.Remarks}}</td>
          <td>{{item.OperationName}}</td>
          <td>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editLeader(item)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" class="iconfont icon-img_delete_small" circle @click="removeLeader(item)">
              </el-button>
            </el-tooltip>
          </td>
        </tr>
      </table>
    </div>
    <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
      <el-row>
        <el-col :span="20">
          <p class="_tit">{{text}}{{$t('op.DQZL')}}</p>
        </el-col>
        <el-col :span="4" class="_add_saveBtn">
          <button type="button" class="normalBtn"
            @click="loading ? '' : submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
          <button class="hollowFixedBtn" type="button"
            @click="resetForm('addMsg'),addShow=false">{{$t('pub.cancelBtn')}}</button>
        </el-col>
      </el-row>
      <el-form class=" clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="$t('system.query_airName')" prop="LeaderId">
              <el-select v-model="addMsg.LeaderId" filterable :placeholder="$t('admin.admin_phBirthPlace')">
                <el-option :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
                <el-option v-for='item in leaderList' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('system.table_begTime')" prop="sDate">
              <el-date-picker v-model="addMsg.StartDate" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('salesModule.EndTime')" prop="eDate">
              <el-date-picker v-model="addMsg.EndDate" type="date" :placeholder="$t('pub.pleaseSel')" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pub.pubRemark')" prop="eDate">
              <el-input type="textarea" v-model="addMsg.Remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="noData" v-show="noData">
      {{$t('system.content_noData')}}
    </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: 10,
          LeaderId: -1,
          ScheduleType: 0,
          YearMonth: "",
          TCID: 0,
        },
        addMsg: {
          LeaderId: 0,
          StartDate: '',
          EndDate: '',
          Remarks: '',
        },
        LeaderName: "",
        EmPhoto: "",
        TripList: "",
        dataList: "",
        total: 0,
        currentPage: 1,
        loading: false,
        noData: false,
        outerVisible: false,
        addShow: false,
        tripTitle: "",
        leaderList: [],
        text: '',
        rules: { //表单必填验证
          LeaderId: [{
            required: true,
            message: '请填写领队名称',
            trigger: 'blur'
          }],
          StartDate: [{
            type: 'date',
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }],
          EndDate: [{
            type: 'date',
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }],
        },
      };
    },
    created() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;
      this.msg.YearMonth = year + '-' + month;
    },
    components: {
      commonTeamInfo: commonTeamInfo
    },
    methods: {
      goUrl: function (path, id) { // 页面跳转
        this.$router.push({
          path: path,
          query: {
            TCIDList: id,
            blank: 'y',
            isShow: false
          }
        })
      },
      removeLeader: function (obj) { // 删除安排
        if (obj.ScheduleType === 1) {
          this.$confirm('是否删除“' + obj.LeaderName + '”的休假安排？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.apipost('LeaderSchedule_post_RemoveHoliday', {
              Id: obj.Id
            }, res => {
              if (res.data.resultCode === 1) {
                this.$message.success(res.data.message);
                this.getList();
              } else {
                this.$message.error(res.data.message);
              }
            }, null)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        } else {
          this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
        }
      },
      editLeader: function (obj) { //  修改
        if (obj.ScheduleType === 1) {
          this.text = '修改';
          this.addMsg = JSON.parse(JSON.stringify(obj));
          this.addShow = true;
        } else {
          this.$message.error('系统参团安排，请联系合作专线人员，凭团号，在报名清单处协助处理！')
        }
      },
      submitForm: function (addMsg) { //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate((valid) => {
          if (valid) {
            that.addDC()
          } else {
            return false;
          }
        });
      },
      resetForm: function (formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.addMsg = {
          LeaderId: 0,
          StartDate: '',
          EndDate: '',
          Remarks: '',
        }
      },
      addDC: function () { // 保存数据
        this.loading = true;
        this.apipost('LeaderSchedule_post_SetHolidaySchedule', this.addMsg, res => {
          if (res.data.resultCode === 1) {
            this.$message.success(res.data.message);
            this.getList();
            this.addShow = false;
          } else {
            this.$message.error(res.data.message);
          }
          this.loading = false;
        }, null)
      },
      getLeaderList: function () { // 获取领队下拉列表
        this.apipost('leader_post_GetList', {
          Type: 0
        }, res => {
          if (res.data.resultCode === 1) {
            this.leaderList = res.data.data;
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        }, null)
      },
      getList: function () { // 获取数据列表
        this.loading = true;
        //获取列表数据
        this.apipost(
          "LeaderSchedule_post_GetLeaderGuideSchedulePageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.LeaderName = res.data.data.pageData.LeaderName;
              this.EmPhoto = res.data.data.pageData.EmPhoto;
              this.total = res.data.data.count;
              this.dataList = res.data.data.pageData;
              this.noData = !this.total > 0;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      resetPageIndex: function () {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      handleCurrentChange: function (val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      }
    },
    mounted() {
      if (this.$route.query.TCID) {
        this.msg.TCID = this.$route.query.TCID;
      }
      this.getLeaderList();
    }
  };

</script>