<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          订单中心
          <span class="titleColor"></span> - 档期日历
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!-- 检索 -->
      <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="城市">
          <el-select placeholder="请选择" @change="selectStationByCity" v-model="sourceCity" width="100px">

            <el-option v-for="item in citylist" :key="item.id" :label="item.cityName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="servieceStation" placeholder="请选择" width="100px" clearable>
            <!-- <el-option value label="请选择"></el-option> -->
            <el-option v-for="item in stationlist" :key="item.id" :label="item.stationName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务者姓名">
          <el-input v-model="workerName" clearable></el-input>
        </el-form-item>
        <el-form-item label="服务技能" prop="serviceSkill" >
          <el-select v-model="skillId"   placeholder="服务技能" clearable>
            <el-option v-for="item in skills" :key="item.id" :label="item.itemName" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="时段">
          <el-select v-model="timeSelect" width="100px" clearable placeholder="请选择服务时间段" multiple>
            <el-option v-for="item in timeList" :key="item.id" :label="item.startTime+'-'+item.endTime+'（时长:'+item.duration
+'小时）'" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
                <el-form-item label="月份">
                   <el-date-picker v-model="month" type="month"  placeholder="选择日期"  value-format="yyyy-MM" />
                </el-form-item>
        <el-button icon="el-icon-search" type="primary" plan @click="listQuery">查询</el-button>
        <el-button icon="el-icon-search" type="primary" plan @click="showDraw">工单分配全职异常自查</el-button>
      </el-form>

      <!-- 表单 -->
       <el-table :data="dataList" border v-loading="listLoading" :header-cell-style="{ 'text-align': 'center' }" ref="table">
      <el-table-column property="workerId" label="服务者id" width="80" fixed :key="Math.random()"></el-table-column>
      <el-table-column property="workerName" label="服务者姓名" width="100" fixed :key="Math.random()"></el-table-column>
      <el-table-column  v-for="(item,index) in dayList" :property="item" :label="item" width="210"  :key="index+Math.random()">
            <template slot-scope="scope">
              <div v-if="scope.row.daySchedule[item]=='未排班'" style="color:red;margin-top: -5px">{{ scope.row.daySchedule[item]}}</div>
              <div v-else style="color:green;margin-top: -5px;font-size:14px;">{{ scope.row.daySchedule[item]}}</div>
              <div v-for="(item2,index2) in scope.row.dayStock[item]" :key="index2">
                <!-- @click="checkChange(item,item2,scope.$index,index2,scope.row.workerId)" -->
                <div  >

                   <!-- <el-checkbox v-model="item2.isChecked" :disabled="item2.isOccupy!=0" @change="checkChange(item,item2,scope.$index,index2)">
                    </el-checkbox>  -->
                    <!-- <i class="el-icon-circle-check" v-if="item2.isOccupy==1"></i> -->
                      {{item2.startTime}}-{{item2.endTime}}
                    <!-- <i class="el-icon-success" v-if="item2.isChecked&&item2.isOccupy==0" style="color:#09afff;font-size:22px;"></i> -->
                    <!-- <i class="el-icon-success" v-if="!item2.isChecked&&item2.isOccupy==0" style="color:#ccc;font-size:22px;"></i> -->
                     <span v-if="item2.isOccupy==1" style="font-size:12px;color:#aaa">{{item2.cooupyEvent}}</span>

               </div>
              </div>
            </template>
      </el-table-column>
      <!-- <el-table-column property="date" label="3月1日" width="150">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.date" :key="index">
                {{item.time}}
              </div>
            </template>
      </el-table-column>

        <el-table-column property="date" label="3月3日" width="150">
                   <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.date" :key="index">
               <el-checkbox v-model="item.checked">{{item.time}}</el-checkbox>
              </div>
            </template>
        </el-table-column> -->

    </el-table>

      <el-drawer title="检测服务者是否接单（若检测结果异常，需解决异常后，再次检测）" :visible.sync="drawerShow" direction="rtl" size="70%">
        <el-form :inline="true" class="demo-form-inline" >
          <el-form-item label="工单编号">
            <el-input  v-model="queryWorkerFail.detailId" clearable></el-input>
          </el-form-item>
          <el-form-item label="服务者电话" >
            <el-input  v-model="queryWorkerFail.workerTel" clearable></el-input>
          </el-form-item>
          <el-button icon="el-icon-search" type="primary" plan @click="queryWorkerFailInfo">查询</el-button>
        </el-form>
        <el-card>
          <el-row>
            <el-col :span="24">
              <el-form label-width="80px">
                <el-form-item label="异常原因">
                  <el-input v-model="queryWorkerFail.reason" readonly></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </el-drawer>

      <!-- 分页 -->
      <pagination :total="total" :page.sync="currentPage" :limit.sync="pageSize" @pagination="listQuery" />


    </div>
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "@/components/Pagination";
import { 
  getSkills 
} from "@/api/goods";
import {
  getUserAuthData,
  selectOccupyByQuery,
  getTimeRange,
  getScheduleCalendarStock, queryWorkerAssignFail

} from "@/api/order";
const eventMap = {
  1: '服务工单',
  2: '特派工单',
  3: '休息日',
  4: '请假',
  5: '订单预占',
  6: '培训',
  7: '跟单',
  8: '活动',
};
export default {
  components: { Pagination },
  data() {
    return {
      skillId:'',
      skills:[],
      // sourceId: this.$route.query.sourceId,
      // sourceName: this.$route.query.sourceName,
      drawerShow: false,
      eventMap: eventMap,
      sourceId: '',
      sourcelist: [],
      servieceStation: '',
      workerName: '',
      month:moment(new Date()).format("YYYY-MM"),
      timeList:[],
      timeSelect:[],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      listLoading: true,
       dataList:[

        ],
        dayList:[

        ],
      sourceCity: "",
      // citylist: globalData.getuserCity(), //城市
      citylist: [], //城市
      // stationlist: globalData.getuserStation(), //驿站
      stationlist:[], //服务站
      wholeStationList:[],
      sourceUnitData: [],
      addSourceUnitForm: {
        // source_id: this.$route.query.sourceId,
        source_id: '',
        unit_name: "",
        city_id: "",
        address: "",
        remark: "",
        chargeId: ''
        // intentionStageId: []
      },
      editSourceUnitForm: {
        id: "",
        source_id: "",
        unit_name: "",
        city_id: "",
        address: "",
        remark: "",
        chargeId: ''
      },
      editintentionStageId: [],
      sourceUnitlist: [],
      queryWorkerFail:{
        detailId : null,
        workerTel:'',
        reason:'' 
      },
      rules: {
        source_id: [
          { required: true, message: "请选择来源", trigger: "change" }
        ],
        unit_name: [
          { required: true, message: "请选择单位名称", trigger: "change" }
        ],
        city_id: [
          { required: true, message: "请选择所属城市", trigger: "change" }
        ],
        intentionStageId: [
          { required: true, message: "请选择服务站", trigger: "change" }
        ],
        address: [{ required: true, message: "请填写地址", trigger: "blur" }],
        chargeId: [{ required: true, message: "请选择门店负责人", trigger: "blur" }],

      }
    };
  },
  created() {
    getSkills().then(res => { 
        this.skills = res.data.data;
      });

    this.getTimeList();
    this.getCityListData();
    this.listQuery();
    //  this.getsourceDate();
  },
    beforeUpdate(){
    this.$nextTick(()=>{
      this.$refs.table.doLayout();
    });
  },
  methods: {
    //获取城市下拉数据
    getCityListData() {
      getUserAuthData()
        .then(res => {
          console.log(res);
          this.citylist = res.data.data.city;
          this.wholeStationList=res.data.data.station;
          this.stationlist = res.data.data.station;
        })
        .catch(err => {
          console.log(err);
        });
    },
      //获取时间下拉数据
    getTimeList() {
      getTimeRange()
        .then(res => {
          console.log(res);
         this.timeList=res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查询
    listQuery() {

      if(this.month==null||this.month==''){
        this.$message.warning("请选择月份");
        return;
      }

      let list=[];
      this.timeSelect.forEach(item=>{
        let result=this.timeList.filter(item2=>{
          return item==item2.id;
        });
        let obj={
          startTime:result[0].startTime,
          endTime:result[0].endTime,
        }
        list.push(obj);
      });
      this.listLoading = true;
      getScheduleCalendarStock({
          // sourceId: this.sourceId,
          cityId: this.sourceCity==0?0:this.sourceCity,
          stationId: this.servieceStation,
          workerName: this.workerName,
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          month:this.month,
          skillId:this.skillId,
          timesList:list
        })
        .then(res => {
          console.log(res);
           this.total = res.data.data.total;
          this.dataList=res.data.data.dataList;
          this.dayList=res.data.data.dayList;

          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
          console.log(err);
        });
    },



    //查询驿站
    selectStationByCity(vId) {
      console.log(vId);
      this.servieceStation = '';
      if (vId == 0) {
        this.stationlist =this.wholeStationList;
      } else {
        this.stationlist = this.wholeStationList.filter(item=>{return item.cityId==vId});
        console.log(this.stationlist);
      }
    },

    //时间格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      // return moment(date).format("YYYY-MM-DD HH:mm");
      return moment(date).format("YYYY-MM-DD");
    },

    showDraw(){
      this.drawerShow=true;
    },
    queryWorkerFailInfo() {
      if(this.queryWorkerFail.detailId==null||this.queryWorkerFail.detailId==''){
        this.$message.warning("请输入工单编号");
        return;
      }
      if(this.queryWorkerFail.workerTel==null||this.queryWorkerFail.workerTel==''){
        this.$message.warning("请输入服务者电话");
        return;
      }
      queryWorkerAssignFail({
          detailId: this.queryWorkerFail.detailId,
          workerTel: this.queryWorkerFail.workerTel
        })
        .then(res => {
          console.log(res);
          this.queryWorkerFail.reason=res.data.errmsg;
          console.log("111"+this.queryWorkerFail.reason);
        })
        .catch(err => {
          this.queryWorkerFail.reason=err.data.errmsg;
          console.log("222"+this.queryWorkerFail.reason);
        });

    },




  }
};
</script>
<style scoped>
  .content{
    padding:10px;
  }
  .crumbs{
    margin:10px 0;
  }
</style>

