<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-input v-model="unitName" clearable></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="来源">
          <el-select
            placeholder="请选择"
            v-model="sourceId"
            width="100px"
          >
            <el-option
               v-for="item in sourcelist"
                :key="item.id"
                :label="item.source_name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <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="占用事件">
          <el-select v-model="event" width="100px" clearable>
            <el-option v-for="item in eventList" :key="item.id" :label="item.eventName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="timeRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
          </div>
        </el-form-item>
        <el-button icon="el-icon-search" type="primary" plan @click="listQuery">查询</el-button>
      </el-form>

      <!-- 表单 -->
      <el-table :data="sourceUnitData" border class="table">
        <!-- <el-table-column type="index" width="55" label="序号"></el-table-column> -->
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="workerId" label="服务者id"></el-table-column>
        <el-table-column prop="workerName" label="服务者姓名"></el-table-column>
        <el-table-column prop="stationName" label="服务站"></el-table-column>
        <el-table-column label="占用事件">
          <template slot-scope="scope">
            {{ eventMap[scope.row.event] }}
          </template>
        </el-table-column>
        <el-table-column prop="dateDay" label="服务日期" :formatter="dateFormat"></el-table-column>
        <!-- <el-table-column prop="stationName" label="包含服务站"></el-table-column> -->
        <el-table-column label="服务开始结束时间">
          <template slot-scope="scope">
            <span>{{scope.row.startTime+'-'+scope.row.endTime}}</span>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <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 {
  getUserAuthData,
  selectOccupyByQuery

} from "@/api/order";
const eventMap = {
  1: '服务工单',
  2: '特派工单',
  3: '休息日',
  4: '请假',
  5: '订单预占',
  6: '培训',
  7: '跟单',
  8: '活动',
};
export default {
  components: { Pagination },
  data() {
    return {
      // sourceId: this.$route.query.sourceId,
      // sourceName: this.$route.query.sourceName,
      eventMap: eventMap,
      sourceId: '',
      sourcelist: [],
      servieceStation: '',
      workerName: '',
      event: '',
      eventList: [
        { id: 1, eventName: '服务工单' },
        { id: 2, eventName: '特派工单' },
        { id: 3, eventName: '休息日' },
        { id: 4, eventName: '请假' },
        { id: 5, eventName: '订单预占' },
        { id: 6, eventName: '培训' },
        { id: 7, eventName: '跟单' },
        { id: 8, eventName: '活动' }],
      timeRange: "",
      chargeList: [],
      unitName: "",
      addVisible: false,
      stopVisible: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      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: [],
      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() {

    this.listQuery();
    this.getCityListData();
    //  this.getsourceDate();
  },
  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);
        });
    },
    //查询
    listQuery() {
      let timeRange = this.timeRange;
      let startDate = "";
      let endDate = "";
      if (timeRange != "" && timeRange != null) {
        startDate = timeRange[0];
        endDate = timeRange[1];
      }
      selectOccupyByQuery({
          // sourceId: this.sourceId,
          cityId: this.sourceCity==0?'':this.sourceCity,
          stationId: this.servieceStation,
          workerName: this.workerName,
          event: this.event,
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          startDate: startDate,
          endDate: endDate
        })
        .then(res => {
          console.log(res);
          this.sourceUnitData = res.data.data.dataList;
          this.total = res.data.data.total;
        })
        .catch(err => {
          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");
    },

 


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

