<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.code"
                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.planCode"
                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.planName"
                placeholder="请输入"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :md="6" :sm="8" :xs="8">
            <el-form-item label="执行人:">
              <personSelect v-model="searchForm.executeUserId" /> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :md="6" :sm="8" :xs="8">
            <el-form-item label="执行结果">
              <el-select
                filterable
                clearable
                v-model="searchForm.executeStatus"
                class="w100"
                size="small"
              >
                <el-option value="0" label="待检"></el-option>
                <el-option value="1" label="已检"></el-option>
                <el-option value="2" label="缺陷"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- <el-col :md="12" :sm="16" :xs="16">
            <el-form-item>
              <el-col :span="8">
                <el-select
                  filterable
                  v-model="searchForm.startTimeType"
                  class="w100"
                  size="small"
                >
                  <el-option
                    v-for="(item, index) in option.startTimeType"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="16">
                <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-col> </el-form-item
          ></el-col> -->
          <el-col :md="18" :sm="8" :xs="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
        :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="workCode" label="工单编号"> </el-table-column>
        <el-table-column prop="planCode" width="180" label="计划单号" />
        <el-table-column prop="planName" label="保养名称" />
        <el-table-column prop="executeUserName" label="执行人" />
        <el-table-column prop="createTime" label="工单生成时间" />
        <el-table-column prop="acceptTime" label="开工时间" />
        <el-table-column prop="finishTime" label="报工时间" />
        <el-table-column prop="practicalTime" label="实际工时">
          <template slot-scope="{ row }">
            {{ time_interval(row.acceptTime, row.finishTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="executeStatus" label="执行结果">
          <template slot-scope="{ row }">
            <span
              :class="{
                'danger-text': row.executeStatus === 3
              }"
              >{{ ['待检', '已检', '缺陷'][row.executeStatus] }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagenation
        :page.sync="page"
        :size.sync="size"
        :total="total"
        @pagination="pageChange"
      /> -->
      <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="searchForm.size"
          :current-page.sync="searchForm.pageNum"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  // import mixins from '../mixins/index'
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import pagenation from '@/components/Pagination';
  import { deviceWorkList } from '@/api/equipment/work.js';
  export default {
    // mixins: [mixins],
    props: ['code'],
    components: { pagenation, personSelect },
    data() {
      return {
        informationId: '',
        tableData: [],
        searchForm: {
          code: '',
          deviceId: '',
          planCode: '',
          planName: '',
          executeStatus: '',
          executeUserId: '',
          pageNum: 1,
          size: 15,
          type: '2'
        },
        // page: 1,
        // size: 15,
        // total: 0,
        pages: {
          page: 1,
          size: 15
        },
        total: 0,
        option: {
          startTimeType: [
            {
              value: '1',
              label: '工单生成时间'
            },
            {
              value: '2',
              label: '开工时间'
            },
            {
              value: '3',
              label: '完工时间'
            }
          ]
        }
      };
    },
    created() {
      this.searchForm.deviceId = this.$route.query.id;
      this.getdata();
    },
    methods: {
      // 实现分页序号连贯
      indexMethod(index) {
        index = index + 1 + (this.pages.page - 1) * this.pages.size;
        return index;
      },
      getdata() {
        deviceWorkList(this.searchForm).then((res) => {
          this.tableData = res.list;
          this.total = res.count;
        });
      },
      search() {
        this.pages.page = 1;
        this.getdata();
      },
      rest() {
        this.searchForm = {
          code: '',
          deviceId: '',
          planCode: '',
          planName: '',
          executeStatus: '',
          executeUserId: '',
          pageNum: 1,
          size: 15,
          type: '2'
        };
        this.pages.page = 1;
        this.getdata();
      },
      //跳转详情
      jumpDetails(data) {
        const { href } = this.$router.resolve({
          name: `MaintenanceWorkDetails`,
          query: {
            code: data.code
          }
        });
        window.open(href, '_self');
      },

      handleCurrentChange() {
        this.getdata();
      },
      handleSizeChange() {
        this.pages.page = 1;
        this.getdata();
      },
      // 计算实际工时
      time_interval(dt1, dt2) {
        if (!dt1 || !dt2) {
          return '';
        }
        if (typeof dt1 == 'string') {
          dt1 = new Date(dt1.replace(/-/, '/'));
          dt2 = new Date(dt2.replace(/-/, '/'));
        }
        var res = dt2 - dt1;
        if (isNaN(res)) throw Error('invalid dates arguments');
        let re = res / (1000 * 60 * 60);

        var h = parseInt(re);
        var m = parseInt((re - h) * 60);
        let result = '';
        if (h) {
          result += `${h} 小时`;
        }
        if (m) {
          result += `${m} 分钟`;
        }
        return result;
      }
    }
  };
</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>
