<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <order-search @search="reload"> </order-search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemAppointTable"
        @select-all="onSelectAll"
        @selection-change="selectItem"
        highlight-current-row
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-upload2" size="small" @click="handlExport"
            >导出</el-button
          >
          <el-button icon="el-icon-printer" size="small" @click="openAppoint"
            >打印委外单</el-button
          >
        </template>
        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="goDetail(row)">
            {{ row.code }}
          </el-link>
        </template>
        <!-- 操作列 -->
        <!-- <template v-slot:action="{ row }">
	       <el-link
	         type="primary"
	         :underline="false"
	         icon="el-icon-edit"
	         @click="openCheck(row)"
			 v-if="row.status==0"
	       >
	         验收
	       </el-link>
	     </template> -->
      </ele-pro-table>
    </el-card>
    <!-- 验收 -->
    <AppointDetailsDialog ref="detailsDialogRef" @refesh="reload" />
    <!-- 委派单模板 -->
    <AppointDialog ref="appointDialogRef" />
  </div>
</template>

<script>
  import OrderSearch from './components/order-search.vue';
  import AppointDialog from './components/appointDialog.vue';
  import AppointDetailsDialog from './components/AppointDetailsDialog.vue';
  import { outsourceList } from '@/api/maintenance/repair_report';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    components: {
      OrderSearch,
      AppointDialog,
      AppointDetailsDialog
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '工单编号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'code'
          },
          {
            prop: 'repairRequestCode',
            label: '报修单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'equiName',
            label: '设备名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'equiCode',
            label: '设备编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'outsourcUnit',
            label: '委外单位',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'planCompletionTime',
            label: '计划完成时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'checkTime',
            label: '实际完成时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('委外单状态', _row.status);
            }
          },
          {
            prop: 'createBy',
            label: '发布人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '发布时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 加载状态
        loading: false,
        infoData: {},
        repairInfoLogs: [],
        addDialogTitle: '新增报修记录',
        detailsDialogTitle: '报修记录详情',
        deviceInfo: {}, //设备信息
        multipleSelection: []
      };
    },
    computed: {},
    created() {
      this.requestDict('委外单状态');
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return outsourceList({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      openCheck(row) {
        row.isshow = true;
        row.title = '工单详情';
        this.$refs.detailsDialogRef.init(row);
      },

      goDetail(row) {
        row.isshow = false;
        row.title = '工单详情';
        this.$refs.detailsDialogRef.init(row);
      },

      onSelectAll() {
        this.$refs.table.clearSelection();
      },
      selectItem(rows) {
        if (rows.length > 1) {
          const newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.table.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.table.toggleRowSelection(it, false);
              return false;
            }
          });
          this.multipleSelection = newRows;
        } else {
          this.multipleSelection = rows;
        }
      },

      handlExport() {},

      openAppoint() {
        if (this.multipleSelection.length == 0) {
          return this.$message.warning('请选择一条委外单');
        }
        this.$refs.appointDialogRef.init(this.multipleSelection[0]);
      }
    }
  };
</script>

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