<template>
  <div class="">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="巡线员" prop="inspector">
        <el-input
          v-model="queryParams.inspector"
          placeholder="请输入巡线人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="inspectorStatisticsList">
      <el-table-column label="巡线员" align="center" prop="inspector" />
      <el-table-column label="开始时间" align="center" prop="workBeginTime" />
      <el-table-column label="结束时间" align="center" prop="workEndTime" />
      <el-table-column
        label="管线设置打卡点数"
        align="center"
        prop="totalPointNum"
      >
      </el-table-column>
      <el-table-column
        label="巡检打卡点数"
        align="center"
        prop="finishPointNum"
      />
      <el-table-column label="巡检打卡率" align="center">
        <template slot-scope="scope">
          <span
            >{{
              (
                (scope.row.finishPointNum / scope.row.totalPointNum) *
                100
              ).toFixed()
            }}%</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleDetail(scope.row)"
            >查看巡检进度</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getUserInspectStatistics"
    />

    <!-- 详情 -->
    <DetailInfo
      title="巡检员打卡记录"
      class="border-bottom-none"
      ref="detailInfo"
    />
  </div>
</template>

<script>
import {
  selectTaskInspectStatisticsByUser,
} from "@/api/pipetask/task";

import DetailInfo from "./DetailInfo";
export default {
  name: "inspector-statistics",
  props: {
    taskId: {
      type: Number,
    },
    pushTime: {
      type: String,
    },
  },
  components: {
    DetailInfo,
  },
  data() {
    return {
      loading: false,
      total: 0,
      inspectorStatisticsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        inspector: null,
      },
    };
  },
  created() {
    this.queryParams.taskId = this.taskId;
    this.getUserInspectStatistics();

  },
  methods: {
    //列表查询
    getUserInspectStatistics() {
      this.loading = true;
      selectTaskInspectStatisticsByUser(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.total = res.total;
          this.inspectorStatisticsList = res.rows;
        }
      });
    },
    //详情
    handleDetail(row) {
      this.$refs.detailInfo.queryParams.taskId = row.taskId;
      this.$refs.detailInfo.queryParams.userId = row.userId;
      this.$refs.detailInfo.taskInfo = {
        inspector: row.inspector,
        pushTime: this.pushTime,
        finishPointNum: row.finishPointNum,
        totalPointNum: row.totalPointNum,
        type: "inspector",
      };
      this.$refs.detailInfo.initInfo();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getUserInspectStatistics();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style scoped></style>
