<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="任务日期">
        <el-date-picker
          v-model="value1"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item
        label="任务编号"
        prop="taskCode"
      >
        <el-input
          v-model="queryParams.taskCode"
          placeholder="请输入任务编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label="台车编号"
        prop="punchNo"
      >
        <el-input
          v-model="queryParams.containerCode"
          placeholder="请输入台车编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label="任务类型"
        label-width="80px"
        prop="devType"
      >
        <el-select
          v-model="queryParams.taskType"
          placeholder="请选择设备类型"
          clearable
        >
          <el-option
            v-for="item in dict.type.task_type"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="任务状态"
        label-width="80px"
        prop="taskStatus"
      >
        <el-select
          v-model="queryParams.taskStatus"
          placeholder="请选择任务状态"
          clearable
        >
          <el-option
            v-for="item in dict.type.task_status"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        label="作业方式"
        label-width="80px"
        prop="taskStatus"
      >
        <el-select
          v-model="queryParams.workStyle"
          placeholder="请选择设备类型"
          clearable
        >
          <el-option
            v-for="item in [{workStyle:'PDA作业'},{workStyle:'CTU作业'},{workStyle:'AGU作业'}] "
            :key="item.workStyle"
            :label="item.workStyle"
            :value="item.workStyle"
          >
          </el-option>
        </el-select>

      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <div class="opt-box">
      <div class="opt-box-right">
        <el-button
          type="primary"
          @click="handleAdd"
        >新增</el-button>
      </div>
    </div>
    <div class="layout-full">
      <heavy-table
        class="heavy-table tablem"
        highlight-current-row
        :data="cheshiList"
        :loading="loading"
        :paging="paging"
        :config="tableConfig"
        :tableProps="tableProps"
        @current-change="handleCurrentChange"
        @handleUpdate="handleUpdate"
        @handleDelete="handleDelete"
      >
        <!-- <template v-slot:switchChange="scope">
          <el-switch
            @change="switchChange(scope.row)"
            v-model="scope.row.isActive"
            active-value="1"
            inactive-value="0"
            handleAdd
          >
          </el-switch>
        </template> -->
      </heavy-table>
    </div>

    <!-- 添加或修改区域对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        style="width: 380px;"
        label-width="95px"
      >
        <el-form-item
          label="点位编码"
          prop="pointNo"
        >
          <el-input
            v-model="form.pointNo"
            placeholder="请输入点位编码"
          />
        </el-form-item>
        <el-form-item
          label="点位名称"
          prop="pointName"
        >
          <el-input
            v-model="form.pointName"
            placeholder="请输入点位名称"
          />
        </el-form-item>
        <el-form-item
          label="所属分组"
          prop="pointGroup"
        >
          <el-select
            v-model="form.pointGroup"
            style="width: 100%;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in pointGroupNameList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            />

            <!-- <el-option v-model="form.pointName">
            </el-option> -->
          </el-select>
        </el-form-item>

        <el-form-item
          label="是否可用"
          prop="isActive"
        >
          <el-select
            v-model="form.isActive"
            placeholder="请选择"
            style="width: 100%;"
            clearable
          >
            <el-option
              v-for="item in dict.type.is_use"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />

          </el-select>
        </el-form-item>

        <el-form-item
          label="选择设备"
          prop="devName"
        >
          <el-select
            v-model="form.devCode"
            placeholder="请选择"
            style="width: 100%;"
            :value="form.devName"
            clearable
          >
            <el-option
              v-for="item in devNameArr"
              :label="item.devName"
              :value="item.devCode"
              :key="item.devCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="交互点位"
          prop="handshakePoint"
        >
          <el-input
            v-model="form.handshakePoint"
            placeholder="请输入点位编码"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryPointList, getBasePointGroup, queryPointId, getWcsDeviceInfo, updatePoint, addPoint, delPoint } from '@/api/wcs/base/agvPoint.js'
import { queryWcsDeviceList, getWcsDeviceList } from '@/api/wcs/base/wcsDevice.js'
import { queryTaskManagement, cancelTask, instantlyTask } from '@/api/wcs/busFunctions/taskManagement.js'
import moment from 'moment'
import { getTableHeader } from '@/api/wms/tableHeader/table'
export default {
  name: 'Configuration',

  dicts: ['is_use', 'task_type', 'task_status'],

  data() {
    const _that = this
    return {
      paging: {
        page: 1, // 当前页
        size: 50, // 页面大小
        total: 0
      },
      value1: [moment().locale('zh-cn').format('yyyy-MM-DD'), moment().locale('zh-cn').format('yyyy-MM-DD')],
      //存放设备数组
      devNameArr: [],

      tableConfig: [
        {
          label: '序号',
          prop: 'index',
          type: 'index',
          istrue: true,
          isActive: ''
        },

        // {
        //   label: '开关',
        //   prop: 'isActivity',
        //   type: 'slot',
        //   istrue: true,
        //   name: 'switchChange'
        // },
        {
          label: '任务单号',
          prop: 'taskCode',
          istrue: true
        },
        {
          label: '任务状态',
          prop: 'taskStatus',
          istrue: true,
          filter(row) {
            // console.log(row, value)
            // console.log(row)
            if (row.taskStatus == '0') {
              return '未下发'
            } else if (row.taskStatus == '1') {
              return '执行中'
            } else if (row.taskStatus == '2') {
              return '已完成'
            } else if (row.taskStatus == '3') {
              return '已取消'
            } else if (row.taskStatus == '-1') {
              return '异常'
            } else if (row.taskStatus == '4') {
              return 'a到b任务完成'
            } else {
              console.log(row.taskStatus)
              return row.taskStatus
            }
          }
        },
        {
          label: '任务类型',
          prop: 'taskType',
          istrue: true,
          filter(row) {
            // console.log(row, value)
            // console.log(row)
            if (row.taskType == '1') {
              return '注塑缴库'
            } else if (row.taskType == '2') {
              return '人工缴库'
            } else if (row.taskType == '3') {
              return '领料出库'
            } else if (row.taskType == '4') {
              return '人工叫料'
            } else if (row.taskType == '5') {
              return '空台车入库'
            } else if (row.taskType == '6') {
              return '台车出库'
            } else if (row.taskType == '7') {
              return '四向车换层'
            } else if (row.taskType == '8') {
              return '锁定库存出库'
            } else {
              return '--'
            }
          }
        },
        {
          label: '台车编号',
          prop: 'containerCode',
          istrue: true
        },
        {
          label: '货位编号',
          prop: 'locationCode',
          istrue: true
        },
        {
          label: 'AGV目标码头',
          prop: 'agvNo',
          istrue: true
        },
        {
          label: '任务创建时间',
          prop: 'createTime',
          istrue: true,
          width: '180px'
        },
        {
          label: '操作',
          prop: 'operating',
          istrue: true,
          type: 'button',
          width: 180,
          fixed: 'right',
          buttons: [
            {
              name: '重新下发',
              event: 'handleUpdate'
            },
            {
              name: '取消任务',
              event: 'handleDelete'
            }
          ]
        }
      ],
      tableProps: {
        'max-height': 700
      },

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 区域表格数据
      pointList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      pointGroupNameList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        groupName: null
      },
      cheshiList: [
        {
          taskCode: 'RW9209320',
          creatTime: '2023-02-26 12:05:23',
          businessCode: 'CK00000001',
          taskType: '0',
          abnormalStatus: 0,
          abnormalText: '',
          taskRoute: 'AGV-01 >> 整件Z101',
          taskStatus: '0',
          taskStyle: '2'
        },
        {
          taskCode: 'RW9209320',
          creatTime: '2023-02-26 12:05:23',
          businessCode: 'BY00000001',
          taskType: '1',
          abnormalStatus: 0,
          abnormalText: '',
          taskRoute: 'HR-01-01-01 >> U型拣选',
          taskStatus: '2',
          taskStyle: '1'
        },
        {
          taskCode: 'RW9209320',
          creatTime: '2023-02-26 12:05:23',
          businessCode: 'CK00000001',
          taskType: '2',
          abnormalStatus: 0,
          taskRoute: 'AGV-03 >> 线边01',
          taskStatus: '1',
          taskStyle: '0'
        }
      ],
      // 表单参数
      form: {},
      //所属devCode分组文字版
      groupWord: {},
      // 表单校验
      rules: {
        pointNo: [{ required: true, trigger: 'blur', message: '请输入点位编码' }],
        pointName: [{ required: true, trigger: 'blur', message: '请输入点位名称' }],
        pointGroup: [{ required: true, trigger: 'change', message: '冲空区' }],
        isActive: [{ required: true, trigger: 'change', message: '启用' }],
        devCode: [{ required: true, trigger: 'change', message: '请选择设备' }]
      }
    }
  },
  created() {
    this.getList()
    getBasePointGroup().then((res) => {
      this.pointGroupNameList = res.data
    })

    // getTableHeader('task_management').then((res) => {
    //   res.data.forEach((item) => {
    //     item.minWidth = 140
    //   })

    //   res.data[4].filter = function (row) {
    //     if (row.taskType == '0') {
    //       return '入库任务'
    //     } else if (row.taskType == '1') {
    //       return '出库任务'
    //     } else if (row.taskType == '2') {
    //       return '搬运任务'
    //     } else {
    //       return '--'
    //     }
    //   }
    //   res.data[5].filter = function (row) {
    //     if (row.abnormalStatus == '0') {
    //       return '正常'
    //     } else if (row.abnormalStatus == '1') {
    //       return '异常'
    //     } else {
    //       return '--'
    //     }
    //   }
    //   res.data[8].filter = function (row) {
    //     if (row.taskStatus == '0') {
    //       return '未下发'
    //     } else if (row.taskStatus == '1') {
    //       return '执行中'
    //     } else if (row.taskStatus == '2') {
    //       return '已完成'
    //     } else if (row.taskStatus == '3') {
    //       return '下发失败'
    //     } else {
    //       return '--'
    //     }
    //   }

    //   res.data[9].filter = function (row) {
    //     if (row.taskStyle == '0') {
    //       return 'PDA作业'
    //     } else if (row.taskStyle == '1') {
    //       return 'CTU作业'
    //     } else if (row.taskStyle == '2') {
    //       return 'AGV作业'
    //     } else {
    //       return '--'
    //     }
    //   }

    //   this.tableConfig = [
    //     ...res.data,
    //     {
    //       label: '操作',
    //       prop: 'operating',
    //       istrue: true,
    //       type: 'button',
    //       width: 180,
    //       fixed: 'right',
    //       buttons: [
    //         {
    //           name: '重新下发',
    //           event: 'handleUpdate'
    //         },
    //         {
    //           name: '取消任务',
    //           event: 'handleDelete'
    //         }
    //       ]
    //     }
    //   ]
    // })
  },
  // },
  computed: {
    // numCn() {
    //   const obj = {}
    //   this.devNameArr.forEach((item, index) => {
    //     obj[item.devName] = item.devCode
    //   })
    //   console.log(obj)
    //   return obj[this.form.devCode]
    // }
  },

  methods: {
    // 分页
    handleCurrentChange(val) {
      if (Object.prototype.toString.call(val) === '[object Object]') {
        this.queryParams.pageSize = val.size
        this.paging.size = val.size
        this.getList()
      } else {
        this.paging.page = val
        // console.log(val)
        this.queryParams.pageNum = val
        this.getList()
      }
    },
    /** 查询区域列表 */
    getList() {
      this.loading = true
      // if (this.value1 !== null && this.value1 !== 'null' && this.value1 !== undefined) {
      //   this.queryParams.createTimeS = this.value1[0]
      //   this.queryParams.createTimeE = this.value1[1]
      // } else {
      //   this.queryParams.createTimeS = null
      //   this.queryParams.createTimeE = null
      // }
      queryTaskManagement(this.queryParams).then((res) => {
        this.cheshiList = res.rows
        this.paging.total = res.total
        this.loading = false
      })
      getWcsDeviceList().then((res) => {
        this.devNameArr = []
        res.data.forEach((item, index) => {
          this.devNameArr.push({ devName: item.devName, devCode: item.id })
        })
        // console.log(this.devNameArr)
      })
      // queryPointList(this.queryParams).then((response) => {
      //   console.log(response)
      //   this.pointList = response.rows
      //   // this.paging.total = response.total
      //   // this.paging.total = this.cheshiList.length
      //   // this.loading = false
      // })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        groupName: null,
        equipmentStatus: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //删除
    handleDelete(row) {
      this.$confirm('确定要取消任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$modal.msgSuccess('取消成功')
      })
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      // let tempRow = JSON.parse(JSON.stringify(row))
      this.reset()
      this.$confirm('确定要重新下发当前任务吗？任务下发后即可进入作业序列', '下发确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        instantlyTask(row.taskId).then((res) => {
          // console.log(res)
          if (res.code === 200) {
            this.$message.success('立即下发成功')
            console.log(res)
            this.reset()
          }
        })
      })
      // let data = {
      //   id: tempRow.id,
      //   pointName: tempRow.pointName,
      //   pointNo: tempRow.pointNo,
      //   pointGroup: tempRow.groupName,
      //   // groupName: tempRow.groupName,
      //   handshakePoint: tempRow.handshakePoint,
      //   pointGroupNameList: this.pointGroupNameList,
      //   isActive: tempRow.isActive,
      //   getDevice: this.pointList.getDevice,
      //   // devName: tempRow.devName,
      //   devCode: tempRow.devName
      //   // devCode: tempRow.getDevice.id
      // }
      // this.form = data

      // this.open = true
      // this.title = '编辑'
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.form.getDevice = this.pointList.getDevice
      this.open = true

      this.title = '新增'
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        this.devNameArr.forEach((item, index) => {
          if (item.devName == this.form.devCode) {
            this.form.devCode = item.devCode
          }
        })
        // console.log(this.form)
        if (valid) {
          this.pointGroupNameList.forEach((item, index) => {
            if (item.groupName == this.form.pointGroup) {
              this.form.pointGroup = item.id
            }
          })
          if (this.title === '编辑') {
            // console.log(this.form)
            updatePoint(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              console.log(this.form)
              this.getList()
            })
          } else {
            addPoint(this.form).then((response) => {
              this.$modal.msgSuccess('添加成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    }
  }
}
</script>

