<template>
  <div class="scheduline">
    <div class="head-title">
      <span @click="CommonJump('ServiceMannage')" style="color:rgb(64, 158, 255);cursor:pointer;">服务人员管理</span><span
        style="margin:0 9px;color:#C0C4CC">/</span><span>服务人员排班情况</span>
    </div>
    <div class="content">
      <el-form label-width="100px" style="padding:0 20px;">
        <el-form-item label="预订日期" class="is-required">
          <el-select class="w120" style="margin-right: 10px;" v-model="dateMsg.DayType" size="small" placeholder="请选择">
            <el-option v-for="item in reserveList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <template v-if="dateMsg.DayType==1">
            <div style="margin-left:30px;display:inline-block;">
              日期：
              <el-date-picker class="w130" size="small" v-model="dateMsg.StartDate" type="date"
                value-format="yyyy-MM-dd" :picker-options="pickerBeginDateBefore" placeholder="选择日期">
              </el-date-picker>
              -
              <el-date-picker class="w130" size="small" v-model="dateMsg.EndDate" value-format="yyyy-MM-dd" type="date"
                :picker-options="pickerBeginDateAfter" placeholder="选择日期"></el-date-picker>
            </div>
          </template>
          <template v-if="dateMsg.DayType==2">
            <div style="margin-left:20px;display:inline-block;">
              月：
              <el-date-picker v-model="dateMsg.Month" size="small" value-format="yyyy-MM" type="month"
                placeholder="选择月">
              </el-date-picker>
            </div>
          </template>
          <template v-if="dateMsg.DayType==3">
            <div style="display:inline-block;">
              年：
              <el-date-picker class="w90" size="small" v-model="dateMsg.Year" value-format="yyyy" type="year"
                placeholder="选择年">
              </el-date-picker>
              月：
              <el-select size="small" class="w90" v-model="dateMsg.Month">
                <el-option label="一月" value="01"></el-option>
                <el-option label="二月" value="02"></el-option>
                <el-option label="三月" value="03"></el-option>
                <el-option label="四月" value="04"></el-option>
                <el-option label="五月" value="05"></el-option>
                <el-option label="六月" value="06"></el-option>
                <el-option label="七月" value="07"></el-option>
                <el-option label="八月" value="08"></el-option>
                <el-option label="九月" value="09"></el-option>
                <el-option label="十月" value="10"></el-option>
                <el-option label="十一月" value="11"></el-option>
                <el-option label="十二月" value="12"></el-option>
              </el-select>
              周：
              <el-select size="small" class="w100" v-model="dateMsg.Week">
                <el-option label="星期天" value="0"></el-option>
                <el-option label="星期一" value="1"></el-option>
                <el-option label="星期二" value="2"></el-option>
                <el-option label="星期三" value="3"></el-option>
                <el-option label="星期四" value="4"></el-option>
                <el-option label="星期五" value="5"></el-option>
                <el-option label="星期六" value="6"></el-option>
              </el-select>
            </div>
          </template>
          <el-button size="small" type="primary" @click="SaveDate()">添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-tag type="info" style="margin-right:20px;" closable @close="handleClose(index)"
            v-for="(SubItem,index) in subDateList" :key="index" size="small">{{SubItem}}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="saveData">保存
    </el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          ServiceId: 0
        },
        addMsg: {
          Id: 0,
          TargetDateStrList: []
        },
        DayType:1, //类型
        dateMsg: {
          DayType: 1, //类型
          StartDate: '', //开始时间
          EndDate: '', //结束时间
          Year: '', //年
          Month: '', //月
          Week: '' //周
        },
        subDateList:[],
        reserveList: [{
            'ID': 1,
            'Name': '指定区间'
          },
          {
            'ID': 2,
            'Name': '按每月'
          },
          {
            'ID': 3,
            'Name': '按每周'
          },
        ],
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.dateMsg.EndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.dateMsg.EndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.dateMsg.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        },


      };
    },
    created() {

    },
    methods: {
      schedList() {
        this.apipost("/api/Reserve/GetServiceTargetDateList", this.msg, res => {
          if (res.data.resultCode == 1) {
            var data = res.data.data;
            if(data.length>0){
                this.subDateList= data;
            }
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //追加日期
      SaveDate() {
        if(this.dateMsg.DayType==1){
            if(this.dateMsg.StartDate==''){
                this.Error('请选择开始日期');
                return
            }
            if(this.dateMsg.EndDate==''){
                this.Error('请选择结束日期');
                return
            }
        }
        if(this.dateMsg.DayType==2){
            if(this.dateMsg.Month==''){
                this.Error('请选择开始月份');
                return
            }
        }
        if(this.dateMsg.DayType==3){
            if(this.dateMsg.Year==''){
                this.Error('请选择年');
                return
            }
            if(this.dateMsg.Month==''){
                this.Error('请选择结月');
                return
            }
            if(this.dateMsg.Week==''){
                this.Error('请选择结周');
                return
            }
        }
        this.apipost("/api/GuideCar/GetGoodsTargetDateList", this.dateMsg, res => {
          if (res.data.resultCode == 1) {
            var myArr = res.data.data;
            this.subDateList = [];
            //遍历当前数组
            for (var i = 0; i < myArr.length; i++) {
              //如果当前数组的第i已经保存进了临时数组，那么跳过，
              //否则把当前项push到临时数组里面
              if (this.subDateList.indexOf(myArr[i]) == -1) {
                this.subDateList.push(myArr[i]);
              }
            }
            //日期升序排列
            this.subDateList.sort(function (a, b) {
              return Date.parse(a) - Date.parse(b);
            });
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //删除标签
      handleClose(index) {
        this.subDateList.splice(index, 1);
      },
      //保存数据
      saveData(){
        this.addMsg.TargetDateStrList = this.subDateList;
        this.apipost("/api/Reserve/AddOrUpdateServiceTargetDate", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.schedList();
          } else {
            this.Error(res.data.message);
          }
        })
      }
    },
    mounted() {
      if (this.$route.query.ID) {
        this.msg.ServiceId = this.$route.query.ID;
        this.addMsg.Id = this.$route.query.ID;
        this.schedList();
      }
    }
  };

</script>
<style>
  .scheduline .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    min-height: 500px;
  }

</style>
