{{ src/App.vue }}
<template>
  <div class="container" style="height:650px;">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getHjlist">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="委托单位">
                <a-select
                v-model="tasks.queryParamNo.weituoClient"
                placeholder="请选择委托单位"
                show-search
                allowClear
                :options="weituoClientOptions"
                @change="getWeituoClientOptions">
                </a-select>
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="委托编号">
              <!-- <a-input placeholder="请输入委托编号" v-model="tasks.queryParam.weituoNo"></a-input> -->
                <a-select
                v-model="tasks.queryParam.weituoNo"
                placeholder="请选择委托编号"
                show-search
                allowClear
                :options="weituoNoOptions">
                </a-select>
              </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="getHjlist" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">提交</a-button>
              <a-button type="primary" @click="showCalendar" icon="reload" style="margin-left: 8px">测试</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <gantt ref="gantt" class="left-container" :tasks="tasks" style="height:600px;"></gantt>
    <!-- 日历弹窗 -->
    <el-dialog title="设备日历" :visible.sync="showCalendarDialog" width="60%">
      <el-calendar>
        <template slot="dateCell" slot-scope="{date, data}">
          <!-- <div> -->
            <!-- 如果是当前选择月 -->
            <template v-if="data.type === 'current-month'">
              <!-- 这里加了周六周天的判断 -->
              <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.substring(8,10)}}</div>
              <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
              <!-- 方法二：在方法中判断设置返回 -->
              <template v-if="dealMyDate(data.day)">
                <template v-for="(item, index) in dealMyDate(data.day)">
                  <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
                    {{ item.deviceName }}
                  </el-tag>
                </template>
              </template>
              <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
                {{ dealMyDate(data.day)[0].deviceName }}
              </el-tag> -->
            </template>
            <!-- 不是 -->
            <template v-else>
              <div style="text-align: right;">{{ data.day.split('-').slice(1).join('-') }}</div>
            </template>
          <!-- </div> -->
        </template>
      </el-calendar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCalendarDialog = false">取 消</el-button>
        <el-button type="primary" @click="showCalendarDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Gantt from '../../../components/Gantt.vue';
import {getWeituoClientList, getWeituoInfoListByClient, getDeviceCalendar } from '@/api/api'
import { getAction } from '@api/manage'
import { gantt } from 'dhtmlx-gantt'

export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        // data: [
        // ],
        // collections: {
        //   staff:[],
        //   manager:[],
        //   chuanganqi:[],
        // },
        queryParam:{
          weituoNo: undefined
        },
        queryParamNo:{
          weituoClient: undefined
        },
      },
      // 委托单位列表
      weituoClientOptions : [],
      // 委托编号列表
      weituoNoOptions:[],
      // 日历弹窗
      showCalendarDialog: false,
      scheduleData: [],
    }
  },
  created() {
    this.getClientList();
    // this.getHjlist();
    this.$nextTick(() => { this.getHjlist() })
    this.getDeviceCalendar()
  },

  methods: {
    // 获取委托单位下拉列表
    getClientList(){
      getWeituoClientList().then((res) =>{
        console.log(res)
        this.weituoClientOptions = res.result.map( res => {
          return{
            value: res,
            label: res
          }
        })
      })
    },
    // 监听委托单位获取
    getWeituoClientOptions(value){
      console.log(value);
      console.log(this.tasks.queryParamNo)
      this.weituoNoOptions = []
      this.tasks.queryParam.weituoNo = undefined
      getWeituoInfoListByClient(this.tasks.queryParamNo).then((res) =>{
        this.weituoNoOptions = res.result.map( res => {
          return{
            value: res.weituoNo,  //传的值
            label: res.weituoNo,  //展示
          }
        })
      })
    },
    getHjlist(){
      console.log(1111)
      let that = this
      var queryParam = that.tasks.queryParam
      queryParam.weituoClient = that.tasks.queryParamNo.weituoClient
      this.$refs.gantt.getinit( queryParam )

    },
    searchReset(){
      this.$refs.gantt.searchReset()
    },
    // 获取设备日历
    getDeviceCalendar(){
      getDeviceCalendar().then((res) =>{
        this.scheduleData = res
      })
    },
    showCalendar(){
      this.showCalendarDialog = true
    },
    dealMyDate(v) {
      let res = ''
      for (let index = 0; index < this.scheduleData.length; index++) {
        const element = this.scheduleData[index];
        if(element.workDate === v){
          res = this.scheduleData[index].deviceList
          break
        }
      }
      console.log(res)
      return res
    },
    chooseDevice(item){
      console.log(item)
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow:hidden; */
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>