<template>
  <div>
    <el-dialog
      title="查看"
      :visible.sync="lookDialogVisible"
      width="80%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div style="max-height: 70vh; overflow: auto">
        <el-table border :data="lookTable" v-loading="loading">
          <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
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="问题级别"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="问题属性"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="职责类别"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="问题类别"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="问题原因"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="整改责任人"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="整改期限"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="整改完成时间"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <span>{{ row.factoryName ? row.factoryName : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="120"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleLook(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="getList"
        />
      </div>
    </el-dialog>

    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="1100px"
      :close-on-click-modal="false"
    >
      <div style="max-height: 75vh; overflow: auto;padding: 5px;">
        <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.rectificationResponsibleUserName
          }}</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">暂无图片</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">整改完成时间</el-col>
          <el-col :span="18">{{ lookData.rectificationCompletionTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24"> <b>审核意见</b> </el-col>
        </el-row>
        <el-row>
          <el-col :span="6"> <b>审核人</b></el-col>
          <el-col :span="18"><b>审核意见</b></el-col>
        </el-row>
        <el-row v-for="(item, index) in reviewOption" :key="index">
          <el-col :span="6">{{ item.name }}</el-col>
          <el-col :span="18">{{ item.result }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listPost} from '@/api/system/post'
import { getBase64 } from '@/api/postInspectionPlanning/projectManagement.js'

export default {
  name: 'PostCheckWebLookDialog',
  props: {
    lookDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      queryParams: {
        postName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      lookTable: [
        {
          factoryName: '东区',
          departmentName: '运行六部',
          postName: '润滑油加氢内操',
          headName: '张三',
          integrityIssuesTotal: '1/1',
          effectivenessIssuesTotal: '0/0',
          suitabilityIssuesTotal: '3/1',
          peerEvaluationScore: '30',
          departmentScore: '90'
        }
      ],
      form: {},
      labelStyle: {
        width: '150px',
        'font-weight': 600,
        color: '#000'
      },
      dialogVisible: false,
      lookData: {},
      reviewOption: [
        {
          name: '张三',
          result: '行,通过'
        }
      ],
      // 岗位表格数据
      levelData: {
        1: '一般',
        2: '重要'
      },
      dutyData: {
        1: '业务职责',
        2: '党建及党风廉政建设职责',
        3: '安全环保职责',
        4: '合规与保密职责',
        5: '任职资格与能力素质要求'
      },
      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.getList()
  },

  methods: {
    getList() {
      this.loading = true
      listPost(this.queryParams).then((response) => {
        this.lookTable = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    handleLook(row) {
      console.log(row)
      this.dialogVisible = true
    },
    handleClose() {
      this.$emit('changeLookDialogVisible', !this.lookDialogVisible)
    }
  }
}
</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>