<template>
  <div>
    <el-form size="small" :inline="true">
      <el-form-item label="部门：">
        <el-input
          v-model="queryForm.deptName"
          placeholder="请输入部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="评分时间：">
        <el-date-picker
          v-model="ratingTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table border v-loading="loading" :data="tableData">
      <el-table-column
        label="序号"
        align="center"
        width="80"
        type="index"
      ></el-table-column>
      <el-table-column label="部门" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.deptName ? scope.row.deptName : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类别" align="center" width="200">
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ initType(item.dutyType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="完整性问题" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ item.problemComplete }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="有效性问题" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ item.problemEffective }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="适宜性问题" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.children"
            :key="index"
            class="border_box"
          >
            {{ item.problemSuitable }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="整改率" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.rate ? formatNumber(scope.row.rate) * 100 + '%' : '0%'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="统计时间" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.statisticsTime ? formatTime(scope.row.statisticsTime) : '--' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              $router.push(
                `/checkStatistics/PostCheckWebLookDialogPage?checkedDeptId=${scope.row.deptId}&checkTime=${scope.row.statisticsTime}&name=${scope.row.deptName}`
              )
            "
            >查看</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { deptDetaailView1, deptDetaailView2 } from '@/api/allApi/index.js'
import moment from 'moment'
export default {
  name: 'PostCheckWebAtopForm',
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: false,
      queryForm: {
        deptName: ''
      },
      tableData: [],
      ratingTime: []
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      if (this.type == 1) {
        deptDetaailView1(
          this.addDateRange(this.queryForm, this.ratingTime)
        ).then((res) => {
          this.tableData = res.data
          this.loading = false
        })
      } else if (this.type == 2) {
        deptDetaailView2(
          this.addDateRange(this.queryForm, this.ratingTime)
        ).then((res) => {
          this.tableData = res.data
          this.loading = false
        })
      }
    },
    formatNumber(num) {
      if(!num && num !=0) return ""
      if (Number.isInteger(num)) {
        return num
      } else {
        return num.toFixed(2)
      }
    },
    handleQuery() {
      this.getList()
    },
    initType(val) {
      switch (val) {
        case 1:
          return '业务职责'
        case 2:
          return '党建及党风廉政'
        case 3:
          return '安全环保职责'
        case 4:
          return '合规保密职'
        case 5:
          return '任职资格与能力素质要求'
      }
    },
    formatTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
    resetQuery() {
      this.queryForm = {
        deptName: ''
      }
      this.ratingTime = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table--medium .el-table__cell {
  padding: 0;
}
::v-deep .el-table .cell.el-tooltip {
  padding: 0;
}
::v-deep .el-table .cell {
  padding: 0;
}
.border_box {
  padding: 5px 0;
  margin: 0;
  min-height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid #dfe6ec;
}
</style>