<template>
  <div>
    <seek-page :seekList="seekList" @search="search"></seek-page>
    <ele-pro-table
      ref="table"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :cache-key="cacheKeyUrl"
      autoAmendPage
      height="calc(86vh - 230px)"
    >
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="goToDetail(row)">
          详情
        </el-link>
      </template>

      <template v-slot:code="{ row }">
        <el-link type="primary" @click="goToDetail(row)">{{
          row.code
        }}</el-link>
      </template>
    </ele-pro-table>

    <detailsPop ref="detailsRef"> </detailsPop>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { batchRecordPage } from '@/api/workOrderList';
  import detailsPop from '@/views/produceOrder/components/details/index.vue';
  import { getById } from '@/api/produceOrder/index';
  import { getAllProduceTaskByUsing } from '@/api/InTheSystem/index';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { detailsPop },
    props: {
      tableQuery: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'code',
            label: '生产工单号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            slot: 'code'
          },
          {
            prop: 'taskName',
            label: '工序进度',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'startTime',
            label: '实际开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'planCompleteTime',
            label: '工单状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              switch (row.status) {
                case 4:
                  return '待生产';
                case 5:
                  return '生产中';
                case 6:
                  return '已完成';
                case 7:
                  return '已延期';
                case 8:
                  return '待下达';
                case 9:
                  return '暂停';
                case 10:
                  return '终止';

                default:
                  return '';
              }
            }
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            showOverflowTooltip: true,
            minWidth: 110,
            align: 'center',
            fixed: 'right'
          }
        ],
        cacheKeyUrl: 'mes-922194-work-order-table',
        orderStatus: [
          {
            value: 4,
            label: '待生产'
          },
          {
            value: 5,
            label: '生产中'
          },
          {
            value: 6,
            label: '已完成'
          },
          {
            value: 7,
            label: '已延期'
          },
          {
            value: 9,
            label: '暂停'
          },
          {
            value: 10,
            label: '终止'
          }
        ],
        taskList: []
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '工单编码：',
            value: 'workOrderCode',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '工序进度：',
            value: 'taskName',
            type: 'select',
            placeholder: '请选择',
            planList: this.taskList
          },
          {
            label: '工单状态：',
            value: 'statuses',
            type: 'select',
            multiple: true,
            placeholder: '请选择',
            planList: this.orderStatus
          },
          // {
          //   label: '创建时间开始',
          //   value: 'createTimeStart',
          //   type: 'date',
          //   dateType: 'date',
          //   placeholder: '请输入',
          //   width: '230',
          //   labelWidth: 110
          // },
          // {
          //   label: '创建时间结束',
          //   value: 'createTimeEnd',
          //   type: 'date',
          //   dateType: 'date',
          //   placeholder: '请输入',
          //   width: '230',
          //   labelWidth: 110
          // }
        ];
      }
    },
    created() {
      this.getproduceTask();
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where,
          ...this.tableQuery
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          ...this.tableQuery
        };
        return batchRecordPage(body);
      },
      search(where) {
        this.reload(where);
      },
      async goToDetail(row) {
        // 查询详情
        const data = await getById(row.id);
        this.$refs.detailsRef.open(data);
      },
      // 工序
      async getproduceTask() {
        // 查询详情
        const data = await getAllProduceTaskByUsing({
          size: 9999
        });
        this.taskList = data.map(item => ({
          value: item.produceTaskName,
          label: item.produceTaskName
        }))
        // -1 入库，-2完结
        this.taskList.push({
          value: '入库',
          label: '入库'
        },{
          value: '完结',
          label: '完结'
        })
        console.log('工序', this.taskList);
      }
    }
  };
</script>

<style></style>
