<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="80vw"
  >
    <div class="patrol">
      <div class="ele-body">
        <el-card shadow="never">
          <div class="switch">
            <div class="switch_left">
              <ul>
                <li
                  v-for="item in tabOptions"
                  :key="item.key"
                  :class="{ active: activeComp == item.key }"
                  @click="activeChange(item.key)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>
          <ele-pro-table
            ref="table"
            :columns="columns()"
            :datasource="datasource"
            :current.sync="current"
            highlight-current-row
            row-key="id"
          >
          </ele-pro-table>
        </el-card>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>

      <el-button type="primary" @click="add"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
<script>
import {
  getWorkOrderPage,
  getWordOrderDetail
} from '@/api/maintenance/patrol_maintenance';
import { getWorkOrderList } from '@/api/maintenance/repair';
export default {
  data() {
    return {
      visible: false,
      activeComp: '1',
      tabOptions: [
        { key: '1', name: '巡点检工单' },
        { key: '2', name: '保养工单' },
        { key: '3', name: '维修工单' }
      ],
      current: {},
      patrolColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          columnKey: 'code',
          slot: 'code',
          prop: 'code',
          label: '工单单号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'planCode',
          label: '计划单号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'planName',
          label: '巡点检名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'executeGroupName',
          label: '巡点检部门',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'executeUserName',
          label: '巡点检人员',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'ruleName',
          label: '规则名称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: '工单生成时间',
          align: 'center',
          // sortable: true,
          showOverflowTooltip: true,
          width: 170
        },
        {
          prop: 'acceptTime',
          label: '开工时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'finishTime',
          label: '报工时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          columnKey: 'orderHour',
          label: '实际工时(分钟)',
          align: 'center',
          resizable: false,
          showOverflowTooltip: true,
          minWidth: 120,
          formatter: (row) => {
            if (row.finishTime && row.acceptTime) {
              return parseInt(
                (new Date(row.finishTime).getTime() -
                  new Date(row.acceptTime).getTime()) /
                  60000
              );
            }
          }
        },
        {
          prop: 'orderStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            return {
              0: '待接收',
              1: '已接收',
              2: '执行中',
              3: '已完成'
            }[row.orderStatus];
          }
        },
        {
          prop: 'acceptanceStatus',
          label: '执行结果',
          align: 'center',
          showOverflowTooltip: true,
          formatter(row) {
            return { 0: '缺陷', 1: '正常' }[row.isAbnormal];
          }
        }
      ],
      equipmentColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          columnKey: 'code',
          slot: 'code',
          prop: 'code',
          label: '工单单号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },
        {
          prop: 'planCode',
          label: '计划单号',
          align: 'center',
          showOverflowTooltip: true,
          slot: 'planCode',
          minWidth: 140
        },
        {
          prop: 'planName',
          label: '保养名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'executeGroupName',
          label: '保养部门',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 120
        },
        {
          prop: 'executeUserName',
          label: '保养人员',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'ruleName',
          label: '规则名称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: '工单生成时间',
          // sortable: true,
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 170
        },
        {
          prop: 'acceptTime',
          label: '开工时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'finishTime',
          label: '报工时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          columnKey: 'orderHour',
          label: '实际工时(分钟)',
          align: 'center',
          resizable: false,
          showOverflowTooltip: true,
          minWidth: 120,
          formatter: (row) => {
            if (row.finishTime && row.acceptTime) {
              return parseInt(
                (new Date(row.finishTime).getTime() -
                  new Date(row.acceptTime).getTime()) /
                  60000
              );
            }
          }
        },
        {
          prop: 'orderStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            return {
              0: '待接收',
              1: '已接收',
              2: '执行中',
              3: '已完成'
            }[row.orderStatus];
          }
        },
        {
          prop: 'executeResult',
          label: '执行结果',
          align: 'center',
          showOverflowTooltip: true,
          formatter(row) {
            return { 0: '缺陷', 1: '正常' }[row.isAbnormal];
          }
        }
      ],
      repairColumns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          slot: 'code',
          label: '工单编号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 150
        },
        {
          prop: 'planCode',
          // label: '关联单号',
          label: '计划单号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'planName',
          label: '维修名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'substanceDetailVO.name',
          label: '设备名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'substanceDetailVO.fixCode',
          label: '固资编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'substanceDetailVO.codeNumber',
          label: '设备编号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'executeUserName',
          label: '执行人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'acceptTime',
          label: '开始时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'finishTime',
          label: '结束时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'planFinishTime',
          label: '计划完成时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          columnKey: 'orderHour',
          label: '实际工时(分钟)',
          align: 'center',
          resizable: false,
          showOverflowTooltip: true,
          minWidth: 120,
          formatter: (row) => {
            if (row.finishTime && row.acceptTime) {
              return parseInt(
                (new Date(row.finishTime).getTime() -
                  new Date(row.acceptTime).getTime()) /
                  60000
              );
            }
          }
        }
      ]
    };
  },
  methods: {
    async open() {
      this.visible = true;
    },
    /* 表格数据源 */
    datasource({ page, limit, where }) {
      where.type = this.activeComp;
      let api = this.activeComp == 3 ? getWorkOrderList : getWorkOrderPage;
      return api({
        pageNum: page,
        size: limit,
        ...where
      });
    },
    columns() {
      return this.activeComp == 1
        ? this.patrolColumns
        : this.activeComp == 2
        ? this.equipmentColumns
        : this.repairColumns;
    },
    activeChange(key) {
      this.activeComp = key;
      this.$refs.table.reload();
    },
    async add() {
      let data = null;
      let deviceList = [];
      if (!this.current.id) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      if (this.activeComp == 3) {
        data = this.current;
        deviceList[0] = data.substanceDetailVO;
      } else {
        data = await getWordOrderDetail(this.current.id);
        deviceList = data.deviceList.map((item) => {
          return item.substance;
        });
      }
      data['deviceList']=deviceList
      this.$emit('open', data);
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding-top: 0;
  padding-left: 0;
}
.main {
  padding-left: 17px;
  .plan {
    padding-top: 15px;
  }
}
</style>
