<template>
  <div>
    <task-statistics ref="statistics"></task-statistics>
    <div class="hanson-bar">
      <el-cascader v-model="taskTypes" :options="taskTypeList" filterable @change="handleChangeTask"
                   style="width:240px;"></el-cascader>
      <el-divider direction="vertical"></el-divider>
      <div class="condition-list">
        <floor-cascader v-show="taskType == 'device' || taskType == 'assets'" :isWidth="false"
                        @change="changeFloor"></floor-cascader>
        <task-state v-show="taskType == 'model' || taskType == 'device' || taskType == 'assets'" ref="taskState"
                    @change="changeState"></task-state>
        <model-file v-show="taskType == 'model'" ref="modelFile" @change="handleChangeModel"></model-file>
        <model-cascader v-show="taskType == 'model'" :isWidth="false" ref="modelCascader"
                        @change="changeModelCascader"></model-cascader>
        <device-cascader v-show="taskType == 'device'" :isWidth="false" ref="deviceCascader"
                         @change="changeDeviceCascader"></device-cascader>
        <assets-cascader v-show="taskType == 'assets'" :isWidth="false" ref="assets"
                         @change="changeAssetsCascader"></assets-cascader>
      </div>
      <el-button class="add-task" @click="handleAddTaskDialog">添加验证任务</el-button>
    </div>
    <div class="tabel-box">
      <model-table :paramsData="{taskState, modelFile, modelCategory}" v-if="taskType == 'model'"></model-table>
      <device-table :paramsData="{buildfloor, taskState, deviceCategory}" v-else-if="taskType == 'device'"
                    @upData="upData"></device-table>
      <assets-table :paramsData="{buildfloor, taskState, family}" v-else-if="taskType == 'assets'"></assets-table>
      <tear-table v-else-if="taskType == 'tear'"></tear-table>
      <replace-table v-else-if="taskType == 'replace'"></replace-table>
    </div>
    <add-task :addTaskDialog.sync="addTaskDialog" :newTaskTypes="newTaskTypes"></add-task>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import taskStatistics from '@/components/data_admin/buildTask/taskStatistics'
import floorCascader from "@/components/ledger/lib/floorCascader"

import taskState from "@/components/data_admin/buildTask/lib/taskState"
import modelFile from "@/components/data_admin/buildTask/lib/modelFile"
import modelCascader from "@/components/data_admin/buildTask/lib/modelCascader"
import deviceCascader from "@/components/data_admin/buildTask/lib/deviceCascader"
import assetsCascader from "@/components/data_admin/buildTask/lib/assetsCascader"

import modelTable from "@/components/data_admin/buildTask/table/modelTable"
import deviceTable from "@/components/data_admin/buildTask/table/deviceTable"
import assetsTable from "@/components/data_admin/buildTask/table/assetsTable"
import tearTable from "@/components/data_admin/buildTask/table/tearTable"
import replaceTable from "@/components/data_admin/buildTask/table/replaceTable"
import addTask from "@/components/data_admin/buildTask/dialog/addTaskDialog"

export default {
  components: {
    taskState,
    modelCascader,
    taskStatistics,
    floorCascader,
    modelFile,
    deviceCascader,
    assetsCascader,
    modelTable,
    deviceTable,
    assetsTable,
    tearTable,
    replaceTable,
    addTask
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"]),
    taskType() {
      return this.taskTypes.slice(-1)[0]
    }
  },
  data() {
    return {
      taskTypeList: [
        {
          value: "verification", label: '现场验证任务', children: [
            {value: "model", label: '现场验证模型'},
            {value: "device", label: '现场验证设备台账'},
            {value: "assets", label: '现场验证资产台账'}
          ]
        },
        {value: "tear", label: '现场撕码任务'},
        {value: "replace", label: '现场换码任务'}
      ],
      taskStateList: [{
        value: '',
        label: '全部'
      }, {
        value: 1,
        label: '待验证'
      }, {
        value: 0,
        label: '已完成'
      }, {
        value: -1,
        label: '未找到'
      }],
      taskState: '',//任务执行情况
      modelFile: '',//模型文件
      modelCategory: '',//模型-设备类型
      deviceCategory: '',//设备-设备类型
      family: '',//设备族
      buildfloor: ['all'],//建筑楼层
      taskTypes: [],
      addTaskDialog: false, //是否显示添加任务弹窗
      newTaskTypes: ''
    }
  },
  created() {
    this.$route.query.newTaskTypes ? this.newTaskTypes = this.$route.query.newTaskTypes : this.newTaskTypes = ['verification', 'model']
    this.taskTypes = this.newTaskTypes
  },
  methods: {
    upData() {
      this.$refs.statistics.upDataList()
    },
    handleChangeTask(val) {//切换任务类型
      this.newTaskTypes = val
    },
    handleChangeModel(val) {//修改模型文件
      if (val[1]) {
        this.modelFile = val[1]
      } else {
        this.modelFile = ''
      }
    },
    changeState(val) {//修改任务执行情况
      this.taskState = val
    },
    changeFloor(val) {//修改建筑楼层
      this.buildfloor = val
    },
    changeModelCascader(val) {//修改模型-设备类型
      this.modelCategory = val.Code
    },
    changeDeviceCascader(val) {//修改设备-设备类型
      this.deviceCategory = val.Code
    },
    changeAssetsCascader(val) {//修改设备族
      this.family = val.Code
    },
    handleAddTaskDialog() {
      if (this.taskTypes[0] == 'tear' || this.taskTypes[0] == 'replace') {
        this.$message.info('产品设计中。。。')
      } else {
        this.addTaskDialog = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hanson-bar {
  height: 40px;
  padding: 5px 0;
  font-size: 14px;
  overflow: hidden;
  margin-top: 0;
  line-height: 40px;
  position: relative;

  .condition-list {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }

  .add-task {
    position: absolute;
    right: 0;
    top: 9px;
  }
}

.tabel-box {
  height: calc(100% - 170px);
}
</style>
