<template>
  <div class="app-container">
    <el-form size="small" :inline="true" ref="queryParamsRef">
      <el-form-item label="年度：">
        <el-date-picker
          v-model="valueYear"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="职责类别：">
        <el-select v-model="queryParams.dutyType">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in dutyDataList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题属性：">
        <el-select v-model="queryParams.problemAttribute">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in problematicDataList"
            :key="index"
          ></el-option>
        </el-select>
      </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" height="calc(100% - 100px)">
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="问题编号"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.problemNo ? scope.row.problemNo : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="岗检工作组"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.checkWorkgroupName ? scope.row.checkWorkgroupName : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="检查小组"
        align="center"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.checkGroupName ? scope.row.checkGroupName : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检查人员" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.checkUserName ? scope.row.checkUserName : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="检查时间"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.checkTime ? scope.row.checkTime : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="受检部门"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.checkedDeptName ? scope.row.checkedDeptName : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="受检岗位"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.checkedPostName ? scope.row.checkedPostName : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="问题级别" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.problemLevel === 1 ? '一般' : '重要' }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="职责类别"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.dutyType ? initType(scope.row.dutyType) : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="问题属性" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.problemAttribute
              ? problematicData[scope.row.problemAttribute]
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="问题类别"
        align="center"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.problemCategory
              ? questionData[scope.row.problemCategory]
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="问题描述"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.description ? scope.row.description : '--'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="整改责任人"
        align="center"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope">
          <span>{{
              scope.row.rectificationResponsibleName
                ? scope.row.rectificationResponsibleName
                : '--'
            }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="问题原因"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.problemCause ? scope.row.problemCause : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否立行立改问题"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isImmediatelyCorrected == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="整改措施/建议"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.rectificationMeasure
              ? scope.row.rectificationMeasure
              : '--'
          }}</span>
        </template>
      </el-table-column>



      <el-table-column
        label="整改期限"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.rectificationPeriod ? scope.row.rectificationPeriod : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改情况" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.isRectificationCompleted == 1 ? '是' : '否'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="整改完成时间"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.rectificationCompletionTime
              ? scope.row.rectificationCompletionTime
              : '--'
          }}</span>
        </template>
      </el-table-column>


      <el-table-column label="部门审核人" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.deptApproveUserName
              ? scope.row.deptApproveUserName
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门审核时间" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.deptApproveTime
              ? scope.row.deptApproveTime
              : '--'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="专业部门审核人" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.specialityDepartmentReviewerName
              ? scope.row.specialityDepartmentReviewerName
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业部门审核时间" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.specialityDepartmentReviewTime
              ? scope.row.specialityDepartmentReviewTime
              : '--'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="复查人" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.reviewDepartmentReviewerName
              ? scope.row.reviewDepartmentReviewerName
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="复查时间"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.reviewDepartmentReviewerTime
              ? scope.row.reviewDepartmentReviewerTime
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="复查结论"
        align="center"
        show-overflow-tooltip
        width="200"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.reviewConclusion ? scope.row.reviewConclusion : '--'
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="整改记录" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
              scope.row.postCheckedProblemRecord
                ? scope.row.postCheckedProblemRecord
                : '--'
            }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="lookDetail(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

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

    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="1100px"
      :close-on-click-modal="false"
    >
      <div style="max-height: 75vh; overflow: auto">
        <el-row>
          <el-col :span="6"> <b> 岗检编号</b> </el-col>
          <el-col :span="6" style="height: 100%">{{
            lookData.problemNo
          }}</el-col>
          <el-col :span="6"><b> 岗检工作组</b></el-col>
          <el-col :span="6">{{ lookData.checkWorkgroupName }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6">岗检小组 </el-col>
          <el-col :span="6">{{ lookData.checkGroupId }}</el-col>
          <el-col :span="6"><b> 检查人员</b></el-col>
          <el-col :span="6">{{ lookData.checkUserName }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6">问题级别 </el-col>
          <el-col :span="6">{{
            levelData[lookData.problemLevel] || '--'
          }}</el-col>
          <el-col :span="6"><b> 问题属性</b></el-col>
          <el-col :span="6">{{
            questionData[lookData.problemCategory]
          }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6"><b>问题类别</b> </el-col>
          <el-col :span="6">{{
            questionData[lookData.problemCategory] || '--'
          }}</el-col>
          <el-col :span="6"><b> 检查时间 </b></el-col>
          <el-col :span="6">{{ lookData.checkTime }}</el-col>
        </el-row>

        <el-row>
          <el-col>&emsp;</el-col>
        </el-row>

        <el-row>
          <el-col :span="6"><b>问题原因</b> </el-col>
          <el-col :span="18">{{ lookData.problemCause }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">是否立行立改问题</el-col>
          <el-col :span="18">{{
            lookData.isImmediatelyCorrected === 1 ? '是' : '否'
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><b>整改措施/建议</b></el-col>
          <el-col :span="18">{{ lookData.rectificationMeasure }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><b>整改负责人</b></el-col>
          <el-col :span="18">{{
            lookData.rectificationResponsibleName
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><b>整改期限</b></el-col>
          <el-col :span="18">{{ lookData.rectificationPeriod }}</el-col>
        </el-row>
        <el-row>
          <el-col>&emsp;</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">整改情况</el-col>
          <el-col :span="18">{{
            lookData.isRectificationCompleted === 1 ? '是' : '否'
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div style="height: 103.5px; display: flex; align-items: center">
              整改完成证明
            </div>
          </el-col>
          <el-col :span="18" style="min-height: 135px">
            <el-image
              v-if="lookData.rectificationCompletionImg"
              style="width: 150px; height: 100px"
              :src="lookData.rectificationCompletionImg"
              :preview-src-list="[lookData.rectificationCompletionImg]"
            ></el-image>
            <div class="img_box_div" v-else>暂无图片</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">整改完成时间</el-col>
          <el-col :span="18">{{ lookData.rectificationCompletionTime }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  postCheckedProblemList,
  postCheckedProblemDetail
} from '@/api/allApi/index.js'
import { getBase64 } from '@/api/postInspectionPlanning/projectManagement.js'
export default {
  name: 'PostResponsibilityMeun',

  data() {
    return {
      valueYear: '',
      queryParams: {
        dutyType: '',
        problemAttribute: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      lookData: {},
      levelData: {
        1: '一般',
        2: '重要'
      },
      dutyData: {
        1: '业务职责',
        2: '党建及党风廉政建设职责',
        3: '安全环保职责',
        4: '合规与保密职责',
        5: '任职资格与能力素质要求'
      },
      dutyDataList: [
        {
          label: '业务职责',
          value: 1
        },
        {
          label: '党建及党风廉政建设职责',
          value: 2
        },
        {
          label: '安全环保职责',
          value: 3
        },
        {
          label: '合规与保密职责',
          value: 4
        }
      ],
      dutyDataList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '业务职责',
          value: 1
        },
        {
          label: '党建及党风廉政建设职责',
          value: 2
        },
        {
          label: '安全环保职责',
          value: 3
        },
        {
          label: '合规与保密职责',
          value: 4
        }
      ],
      problematicDataList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '完整性',
          value: 1
        },
        {
          label: '适宜性',
          value: 2
        },
        {
          label: '有效性',
          value: 3
        }
      ],
      problematicData: {
        1: '完整性',
        2: '适宜性',
        3: '有效性'
      },
      questionData: {
        1: '职责权限问题',
        2: '工作内容问题',
        3: '工作标准问题',
        4: '考核奖励问题',
        5: '任职资格问题',
        6: '其他'
      },
      postList: [],
      status: {
        1: '待指定整改人',
        2: '待填写方案',
        3: '方案填写完成',
        10: '部门审核通过',
        11: '门审核驳回',
        20: '专业部门人审核通过',
        21: '专业部门人审核驳回',
        30: '整改人待上传实施图片',
        31: '上传实施图片完成',
        40: '复查部门人审核通过',
        41: '复查部门人审核驳回'
      }
    }
  },

  mounted() {
    this.initYear()
    this.getList()
  },

  methods: {
    initYear() {
      let _now = new Date()
      let currentYear = _now.getFullYear()
      this.valueYear = `${currentYear}`
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      const dateRange = [`${this.valueYear}-01-01`, `${this.valueYear}-12-31`]
      postCheckedProblemList(
        this.addDateRange(this.queryParams, dateRange)
      ).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        dutyType: '',
        problemAttribute: '',
        pageNum: 1,
        pageSize: 10
      }
      this.initYear()
      this.handleQuery()
    },
    initType(val) {
      switch (val) {
        case 1:
          return '业务职责'
        case 2:
          return '党建及党风廉政'
        case 3:
          return '安全环保职责'
        case 4:
          return '合规与保密职责'
      }
    },
    async lookDetail(id) {
      const res = await postCheckedProblemDetail(id)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.dialogVisible = true
      this.lookData = res.data
      if (res.data.rectificationCompletionImg) {
        getBase64({ path: res.data.rectificationCompletionImg }).then(
          (req) => {
            this.lookData.rectificationCompletionImg = req.msg
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin: 0 !important;
  padding: 0 !important;

  .el-col {
    border: 1px solid #e8e8e8;
    padding: 15px 5px;
    min-height: 52px;
  }
  .img_box_div {
    width: 150px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #979191;
    background-color: #f5f7fa;
  }
}
</style>
