<template>
  <el-dialog
    title="首件两检报工"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <div>
      <!-- <el-button type="primary" plain round @click="openMaintenancePlan">
        设备保养计划
      </el-button> -->
      <div v-if="loading" class="step-list" v-loading="loading">
        <ele-pro-table
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="list"
          cache-key="mes-ruleRecordsList-2511172018"
          autoAmendPage
          :need-page="false"
          @refresh="getData"
        >
          <template v-slot:action="{ row }">
            <el-button
              :type="row.executeStatus == 0 ? 'primary' : 'default'"
              class="status-btn"
              @click="openMaintenancePlan(row)"
            >
              {{ executeStatusTest(row.executeStatus) }}
            </el-button>
          </template>
        </ele-pro-table>
      </div>
      <el-empty v-else></el-empty>
    </div>
    <template #footer>
      <el-button @click="handleUpdate" type="primary" :loading="butLoad"
        >更新</el-button
      >

      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import {
    getLastRuleRecords,
    getProduceTaskInstanceId
  } from '@/api/producetaskrulerecord/index.js';
  import { pageFirstArticleDualInspectionRecord } from '@/api/firstarticledualinspectionrecord/index.js';

  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {},
    data() {
      return {
        dialogVisible: false,
        loading: true,
        produceTaskInfo: null,
        workOrder: null,
        butLoad: false,
        list: []
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            label: '序号',
            align: 'center'
          },
          {
            prop: 'produceTaskName',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return row.ruleName || row.itemTaskName || row.planConfigName;
            }
          },
          {
            prop: 'executeMethod',
            label: '执行方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return this.getDictValue('记录规则执行方式', row.executeMethod);
            }
          },
          {
            prop: 'reportUserName',
            label: '报工人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'finishTime',
            label: '报工时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'duration',
            label: '工时',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              // 毫秒转小时
              return row.duration
                ? (row.duration / 1000 / 60 / 60).toFixed(2) + ' 时'
                : '';
            }
          },
          // 操作
          {
            label: '操作',
            align: 'center',
            width: 130,
            fixed: 'right',
            slot: 'action'
          }
        ];
      }
    },
    methods: {
      open(workOrder, produceTaskInfo) {
        this.workOrder = workOrder;
        this.produceTaskInfo = produceTaskInfo;
        console.log('this.workOrder', this.workOrder);
        console.log('this.produceTaskInfo', this.produceTaskInfo);
        this.dialogVisible = true;
      },
      executeStatusTest(status) {
        switch (status) {
          case 0:
            return '未报工';
          case 1:
            return '执行中';
          default:
            return '已报工';
        }
      },
      // 获取数据
      async getData() {
        const data = await pageFirstArticleDualInspectionRecord({});
        this.list = data.list || [];
      },
      handleClose() {
        this.dialogVisible = false;
        this.$emit('close');
      },
      async handleUpdate() {
        try {
          this.butLoad = true;
          await this.getData();
          // 更新逻辑
          this.$message.success('已更新');
          this.butLoad = false;
        } catch (error) {
          this.butLoad = false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped></style>
