<template>
  <div class="wrapper">
    <!-- 故障 -->
    <div class="basic-details" id="mould">
      <el-form label-width="120px">
        <el-row>
          <el-col :md="6" :sm="8" :xs="8">
            <el-form-item label="报修记录单号">
              <el-input
                v-model="searchForm.repairsCode"
                placeholder="请输入"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :md="6" :sm="8" :xs="8">
            <el-form-item label="来源编码">
              <el-input
                v-model="searchForm.sourceCode"
                placeholder="请输入"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :md="6" :sm="8" :xs="8">
            <el-form-item label="报修人">
              <el-input
                v-model="searchForm.repairsPerson"
                placeholder="请输入"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :md="12" :sm="16" :xs="16">
            <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']"
              >
              </el-date-picker> </el-form-item
          ></el-col>

          <el-col :md="6" :sm="8" :xs="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 :md="6" :sm="16" :xs="16" 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
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
      >
        <el-table-column
          width="80px"
          label="序号"
          type="index"
          :index="indexMethod"
        >
          <!-- <template slot-scope="{ $index }">
            {{ $tableIndex($index, page, size) }}
          </template> -->
        </el-table-column>
        <el-table-column prop="repairsCode" label="报修记录单号">
          <template slot-scope="scope">
            <div class="repairsCode" @click="jumpDetails(scope.row)">
              {{ scope.row.repairsCode }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="source.desc" label="来源" />
        <el-table-column prop="repairsPerson" label="报修类型">
          <template slot-scope="{ row }">
            {{ row.source.code == 3 ? '自动报修' : '手动报修' }}
          </template>
        </el-table-column>
        <el-table-column prop="sourceCode" label="来源编码" />

        <el-table-column prop="repairsPerson" label="报修人" />
        <el-table-column prop="createTime" label="报修时间" />
        <el-table-column prop="acceptTime" label="维修工单编号">
          <template slot-scope="scope">
            {{ setAcceptTime(scope.row.acceptTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="finishTime" label="验收人" /> -->
        <el-table-column prop="finishTime" label="验收时间" />
      </el-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 { getGzgetPage } from "@/api/ledgerAssets/equipment";
  // import DetailsDialog from "@/views/feature/maintenance/repair/RepairDetailsDialog.vue";
  export default {
    // mixins: [mixins],
    props: ['code'],
    // DetailsDialog
    components: { pagenation },
    data() {
      return {
        informationId: '',
        tableData: [],
        searchForm: {
          repairsCode: '',
          sourceCode: '',
          repairsPerson: '',
          source: '',
          date: ''
        },
        pages: {
          page: 1,
          size: 15
        },
        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,
          ...this.pages,
          ...this.searchForm
        };
        if (this.searchForm.date) {
          par.startTime = this.searchForm.date[0];
          par.endTime = this.searchForm.date[1];
        }

        getGzgetPage(par).then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
      },
      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>
