<template>
  <div class="wrapper">
    <!-- 故障 -->
    <div class="basic-details" id="mould">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="报修记录单号">
              <el-input v-model="searchForm.repairsCode" placeholder="请输入" size="small"></el-input>
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="来源编码">
              <el-input v-model="searchForm.sourceCode" placeholder="请输入" size="small"></el-input>
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="报修人">
              <el-input v-model="searchForm.repairsPerson" placeholder="请输入" size="small"></el-input>
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="报修时间">
              <el-date-picker class="form-input" size="small" v-model="searchForm.date" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']" style="width: 100%">
              </el-date-picker> </el-form-item></el-col>

          <el-col :span="8">
            <el-form-item label="来源">
              <el-select filterable v-model="searchForm.source" class="w100" size="small">
                <el-option :value="item.value" :label="item.label" v-for="item in option.source"
                  :key="item.value"></el-option>
              </el-select> </el-form-item></el-col>

          <el-col :span="8" style="text-align: right">
            <el-button icon="el-icon-refresh-left" size="small" @click="rest">重置</el-button>
            <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button></el-col>
        </el-row>
      </el-form>
      <!-- <el-table
        :columns="columns"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
      >
      </el-table> -->
      <ele-pro-table ref="table" :columns="columns" :datasource="tableData" cache-key="systemRoleTable">
      </ele-pro-table>
      <div class="zw-table-footer" style="display: flex; justify-content: flex-end">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :page-sizes="[15, 30, 50, 100, 500]" :page-size.sync="pages.size" :current-page.sync="pages.page"
          @current-change="handleCurrentChange" @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <!-- <DetailsDialog ref="detailsDialogRef" /> -->
  </div>
</template>

<script>
// import mixins from '../mixins/index'
import pagenation from '@/components/Pagination';
import { getWorkOrderList } from '@/api/maintenance/repair';
import { workorderStatus, resultStatus } from '@/utils/dict/operationManage';
// import DetailsDialog from "@/views/feature/maintenance/repair/RepairDetailsDialog.vue";
export default {
  // mixins: [mixins],
  props: {
    id: {
      typeof: String,
      default: ''
    }
  },
  // DetailsDialog
  components: { pagenation },
  data() {
    return {
      informationId: '',
      tableData: [],
      columns: [
        {
          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: 'assistsName',
          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
              );
            }
          }
        },
        {
          prop: 'orderStatus',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            return workorderStatus.filter(
              (item) => item.value == row.orderStatus
            )[0].label;
          }
        },
        {
          prop: 'acceptanceStatus',
          label: '执行结果',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            return row.acceptanceStatus
              ? resultStatus.filter(
                (item) => item.code == row.acceptanceStatus
              )[0].label
              : '';
          }
        }
      ],
      searchForm: {
        repairsCode: '',
        sourceCode: '',
        repairsPerson: '',
        source: '',
        date: ''
      },
      pages: {
        page: 1,
        size: 10
      },
      total: 0,
      option: {
        startTimeType: [
          {
            value: '1',
            label: '工单生成时间'
          },
          {
            value: '2',
            label: '开工时间'
          },
          {
            value: '3',
            label: '完工时间'
          }
        ],
        source: [
          {
            value: '1',
            label: '手动创建'
          },
          {
            value: '3',
            label: '告警通知'
          },
          {
            value: '4',
            label: '保养工单'
          },
          {
            value: '5',
            label: '巡点检工单'
          }
        ]
      }
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // 实现分页序号连贯
    indexMethod(index) {
      index = index + 1 + (this.pages.page - 1) * this.pages.size;
      return index;
    },
    getdata() {
      let par = {
        // equiCode: this.code,
        deviceId: this.id,
        type: 3,
        ...this.pages,
        ...this.searchForm
      };
      if (this.searchForm.date) {
        par.startTime = this.searchForm.date[0];
        par.endTime = this.searchForm.date[1];
      }
      delete par.date;
      console.log(par, 'param');
      getWorkOrderList(par).then((res) => {
        this.tableData = res.list;
        this.total = res.size;
      });
    },
    search() {
      this.pages.page = 1;
      this.getdata();
    },
    rest() {
      this.searchForm = {
        workOrderCode: '',
        planCode: '',
        planName: '',
        repairsCode: '',
        executeUserName: '',
        startTimeType: '1',
        date: ''
      };
      this.pages.page = 1;
      this.getdata();
    },
    setAcceptTime(val) {
      if (val) {
        return JSON.parse(val).join('/');
      } else {
        return '';
      }
    },
    jumpDetails(row) {
      row.tabLabel = '维修信息';
      row.title = '报修记录详情';
      row.workOrderCode = row.id;
      this.$refs.detailsDialogRef.init(row);
      // this.$refs.detailsDialogRef.equipmentdialog = true
      // const res = await repair.getInfo(row.id)
      // this.infoData = res.data
      // this.repairInfoLogs = res.data.repairInfoLogs
    },
    handleCurrentChange() {
      this.getdata();
    },
    handleSizeChange() {
      this.pages.page = 1;
      this.getdata();
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  background: #fff;
  padding: 20px;
}

.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.repairsCode {
  cursor: pointer;

  &:hover {
    color: #157a2c;
  }
}
</style>
