<template>
  <ele-modal
    title="报工记录"
    :maxable="true"
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailsVisible"
    :close-on-click-modal="false"
    width="35%"
    append-to-body
    @close="handleClose"
  >
    <ele-pro-table
      style="min-height: 400px"
      ref="fileTable"
      :columns="columns"
      :datasource="datasource"
    >
    </ele-pro-table>
  </ele-modal>
</template>
<script>
  import { listStepWorkTimeRecord } from '@/api/produce/workOrder';

  export default {
    props: {
      produceStepWorkTimeId: {
        type: String,
        default: () => []
      },
      detailsVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      list: {
        hanlder(newVal) {
          this.list = newVal;
        }
      },
      produceStepWorkTimeId(newVal) {
        this.produceStepWorkTimeId = newVal;
        this.$refs.fileTable.reload();
      }
    },
    data() {
      return {
        // 物品列表
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '开始时间',
            prop: 'startTime',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '结束时间',
            prop: 'endTime',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '工时',
            prop: 'totalTimeStr',
            minWidth: 200,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '保存时间',
            prop: 'createTime',
            minWidth: 120,
            align: 'center',
            showOverflowTooltip: true
          }
        ],
      };
    },
    methods: {
      handleClose() {
        this.$emit('close');
      },
      datasource({ page, where }) {
        if (!this.produceStepWorkTimeId) {
          return null;
        }
        return listStepWorkTimeRecord(this.produceStepWorkTimeId);
      }
    }
  };
</script>
