<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" :style="{ padding: '20px' }">
    <el-tab-pane label="监理单位信息" name="first">
      <bns-supervisor-info-tabs :items="supervisoryUnitInformationItems"></bns-supervisor-info-tabs>
    </el-tab-pane>
    <el-tab-pane label="监理人员基本信息" name="second">
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="监理姓名" prop="supervisorName">
            <el-input
              v-model="queryParams.supervisorName"
              maxlength="20"
              show-word-limit
              v-no-whitespace
              placeholder="请输入监理姓名"
              clearable
              @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-button type="primary" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="supervisorList">
          <el-table-column
            type="index"
            width="55"
            label="序号"
            align="center"
            :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
          />
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="岗位" align="center" prop="postName" />
          <el-table-column label="体检文件" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleShow(scope.row, 1)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="保险文件" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleShow(scope.row, 2)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="其他文件" width="100" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleShow(scope.row, 4)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center" prop="age" />
          <el-table-column label="联系方式" width="120" align="center">
            <template slot-scope="scope">
              <!-- 检查是否存在身份证号 -->
              <span v-if="scope.row.phone">{{ hideSensitiveInfo(scope.row.phone) }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="人脸照片" align="center" prop="faceUrl">
            <template slot-scope="scope">
              <el-popover placement="right" title="" trigger="hover">
                <img :src="`${lookFaceFile + scope.row.faceUrl}`" :min-width="300" :height="300" alt="照片" />
                <img
                  slot="reference"
                  :src="`${lookFaceFile + scope.row.faceUrl}`"
                  style="max-height: 50px; max-width: 50px"
                  :alt="`${lookFaceFile + scope.row.faceUrl}`"
                />
              </el-popover>
            </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" @click="handleView(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="getSupervisorPersonList"
        />
        <el-dialog title="文件查看" :visible.sync="document" width="80%" top="5vh" append-to-body>
          <div style="width: 100%; height: 720px">
            <bns-file-list-tabs :items="fileList" />
          </div>
        </el-dialog>
        <el-dialog title="文件查看" :visible.sync="documentPreview" width="80%" top="5vh" append-to-body>
          <div style="width: 100%; height: 720px">
            <bns-kkFile-preview :items="kkFilePreview"></bns-kkFile-preview>
          </div>
        </el-dialog>
        <!--监理人员基本信息查看-->
        <el-dialog :title="'查看详情'" :visible.sync="supervisorOpen" width="60%">
          <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="11">
                <el-form-item label-width="120px" label="姓名" prop="name">
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入姓名"
                    :disabled="true"
                    clearable
                    v-no-whitespace
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="120px" label="性别" prop="sex">
                  <el-input
                    v-model="formData.sex"
                    placeholder="请输入性别"
                    :disabled="true"
                    clearable
                    v-no-whitespace
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="11">
                <el-form-item label-width="120px" label="年龄" prop="age">
                  <el-input
                    v-model="formData.age"
                    placeholder="请输入年龄"
                    :disabled="true"
                    clearable
                    v-no-whitespace
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="120px" label="身份证号码" prop="idCard">
                  <el-input
                    v-model="formData.idCard"
                    placeholder="请输入身份证号码"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                    v-no-whitespace
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="11">
                <el-form-item label-width="120px" label="联系方式" prop="phone">
                  <el-input
                    v-model="formData.phone"
                    placeholder="请输入联系方式"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                    v-no-whitespace
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label-width="120px" label="岗位" prop="postName">
                  <el-select
                    v-model="formData.postName"
                    placeholder="请选择岗位"
                    :style="{ width: '100%' }"
                    clearable
                    :disabled="true"
                  >
                    <el-option
                      v-for="(item, index) in postList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="人脸照片" :style="{ width: '100%' }">
                  <img
                    v-if="formData.facePhoto.length === 0"
                    style="width: 100px; height: 100px; margin-left: 45px"
                    src="@/assets/file/no_file.png"
                    alt="暂无文件"
                  />
                  <bns-file-list-tabs
                    v-else
                    :items="formData.facePhoto"
                    :style="{ marginLeft: '45px' }"
                  ></bns-file-list-tabs>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="体检文件">
                  <img
                    v-if="formData.physicalExaminationFile.length === 0"
                    style="width: 100px; height: 100px; margin-left: 45px"
                    src="@/assets/file/no_file.png"
                    alt="暂无文件"
                  />
                  <bns-file-list-tabs
                    v-else
                    :items="formData.physicalExaminationFile"
                    :style="{ marginLeft: '45px' }"
                  ></bns-file-list-tabs>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="保险文件">
                  <img
                    v-if="formData.insuranceFile.length === 0"
                    style="width: 100px; height: 100px; margin-left: 45px"
                    src="@/assets/file/no_file.png"
                    alt="暂无文件"
                  />
                  <bns-file-list-tabs
                    v-else
                    :items="formData.insuranceFile"
                    :style="{ marginLeft: '45px' }"
                  ></bns-file-list-tabs>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="其他文件">
                  <img
                    v-if="formData.otherFileList.length === 0"
                    style="width: 100px; height: 100px; margin-left: 45px"
                    src="@/assets/file/no_file.png"
                    alt="暂无文件"
                  />
                  <bns-file-list-tabs
                    v-else
                    :items="formData.otherFileList"
                    :style="{ marginLeft: '45px' }"
                  ></bns-file-list-tabs>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer">
            <el-button @click="supervisorOpen = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane label="企业资质" name="third">
      <bns-file-list-tabs
        :items="enterpriseQualificationItems"
        :isShowOptions="paramsData.isExamine"
        :opinionValueOther="opinionValueOther"
        @onCloseFileDialog="onCloseFileDialog"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="安全协议书" name="fourth">
      <bns-file-list-tabs
        :items="securityAgreementFileItems"
        :isShowOptions="paramsData.isExamine"
        :opinionValueOther="opinionValueOther"
        @onCloseFileDialog="onCloseFileDialog"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="监理规划" name="five">
      <bns-file-list-tabs
        :items="supervisionPlanningItems"
        :isShowOptions="paramsData.isExamine"
        :opinionValueOther="opinionValueOther"
        @onCloseFileDialog="onCloseFileDialog"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="实施细则" name="six">
      <bns-file-list-tabs
        :items="implementationRulesItems"
        :isShowOptions="paramsData.isExamine"
        :opinionValueOther="opinionValueOther"
        @onCloseFileDialog="onCloseFileDialog"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="审批结果及意见" name="seven">
      <bns-timeline-tabs
        :is-examine="paramsData.isExamine"
        :btn-show="paramsData.btnShow"
        :show-type="paramsData.showType"
        :final-check="paramsData.finalCheck"
        :items="formData.approvalItems"
        :audit-type="'审批信息'"
        v-on:pass="approvalPass"
        v-on:turnDown="approvalTurnDown"
        v-on:finalInstance="approvalFinalInstance"
        :opinionValueOther="opinionValueOther"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import bnsSupervisorInfoTabs from '@/components/pro-tabs/bns-supervisor-info-tabs.vue'
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import bnsGenerateWorkCardTabs from '@/components/pro-tabs/bns-generate-work-card-tabs.vue'
import { listSupervisor, listSupervisorPerson, listSupervisorPersonById } from '@/api/pro/outsourcingPro'
import { dictTableOption, selectFile } from '@/api/tool/select'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import { approvalHistory } from '@/api/terminalEquipment/deviceInformation'
import { getMyToDoNum, hideSensitiveInfo, indexContinuous, lookFaceFile, parseTime } from '@/utils/bonus'
import { submitPersonApproval } from '@/api/pro/subManagement/subList'
import { decryptCBC } from '@/utils/aescbc'
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview.vue'

export default {
  components: {
    bnsKkFilePreview,
    BnsTimelineTabs,
    bnsSupervisorInfoTabs,
    bnsFileListTabs,
    bnsGenerateWorkCardTabs,
  },
  data() {
    return {
      proId: undefined,
      supId: undefined,
      postList: [],
      //当前激活的标签页
      activeName: 'first',
      //监理信息单位弹出层
      supervisorOpen: false,
      //生成工作证弹出层
      workCardOpen: false,
      document: false,
      documentPreview: false,
      fileList: [],
      kkFilePreview: {
        filePreviewUrl: '',
        fileName: '',
        showDownloadButton: false,
      },
      gutterValue: parseInt('21', 10),
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      //监理单位信息
      supervisoryUnitInformationItems: {},
      // 监理人员基本信息查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supervisorName: undefined,
      },
      //企业资质
      enterpriseQualificationItems: [],
      //安全协议书
      securityAgreementFileItems: [],
      //监理规划
      supervisionPlanningItems: [],
      //实施细则
      implementationRulesItems: [],
      // 监理人员基本信息表格数据
      supervisorList: [],
      //工作证信息
      workCardItems: {},
      // 监理人员详情  表单参数
      formData: {
        name: undefined,
        sex: undefined,
        age: undefined,
        idCard: undefined,
        phone: undefined,
        postName: undefined,
        //人脸照片
        facePhoto: [],
        //体检文件
        physicalExaminationFile: [],
        //保险文件
        insuranceFile: [],
        //其他文件
        otherFileList: [],
      },
      paramsData: {},
      lookFaceFile: '',
      // 阅读文件时的意见
      opinionValueOther: '',
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    const params = this.$route.params && this.$route.params.data
    this.paramsData = JSON.parse(decryptCBC(params))
    console.log('this.paramsData', this.paramsData)
    this.getSupervisorList()
  },
  methods: {
    indexContinuous,
    lookFaceFile,
    hideSensitiveInfo,
    approvalHistory() {
      approvalHistory({ taskId: this.paramsData.taskId }).then(res => {
        this.formData.approvalItems = res.data
      })
    },
    getStatus() {
      const params = {
        dictType: 'sys_sup_post',
        dictValue: '',
      }
      dictTableOption(params).then(response => {
        this.postList = response.data
      })
    },
    init() {
      this.approvalHistory()
      this.getSupervisorPersonList()
      this.getEnterpriseQualificationFile()
      this.getSecurityAgreementFile()
      this.getSupervisionPlanningFile()
      this.getImplementationRulesFile()
    },
    /** 文件查看按钮操作 */
    handleShow(row, informationType) {
      this.loading = true
      const arr = {
        1: '体检文件',
        2: '保险文件',
        3: '特殊工种文件',
        4: '其他文件',
      }
      selectFile({
        classification: 9,
        uuid: row.uuid,
        informationType: informationType,
        fromType: 3,
      }).then(response => {
        console.log(response)
        if (response.data.length === 0) {
          this.fileList = []
          this.$message.warning(arr[informationType] + '暂无')
        } else if (response.data.length === 1) {
          this.kkFilePreview = {
            filePreviewUrl: response.data[0].filePath,
            fileName: response.data[0].fileName,
            showDownloadButton: false,
          }
          this.documentPreview = true
        } else {
          this.fileList = response.data
          this.document = true
        }
        this.loading = false
      })
    },
    /**监理基本人员信息查询*/
    getSupervisorList() {
      this.loading = true
      const params = {
        proId: this.paramsData.proId,
      }
      listSupervisor(params).then(response => {
        this.supervisoryUnitInformationItems = response.data
        this.supervisoryUnitInformationItems.corporatePhone = hideSensitiveInfo(response.data.corporatePhone)
        this.supervisoryUnitInformationItems.directorsPhone = hideSensitiveInfo(response.data.directorsPhone)
        this.supervisoryUnitInformationItems.isHasDirector = true
        this.init()
        this.loading = false
      })
    },
    /**监理人员基本信息查询*/
    getSupervisorPersonList() {
      this.loading = true
      const params = {
        proId: this.paramsData.proId,
        supId: this.paramsData.supId,
        supUuid: this.paramsData.supUuid,
        ...this.queryParams,
      }
      listSupervisorPerson(params).then(response => {
        console.log(response)
        this.supervisorList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /**获取企业资质文件*/
    getEnterpriseQualificationFile() {
      const params = {
        id: this.paramsData.proId,
        classification: '1',
        fromType: '1',
        informationType: '1',
        uuid: this.$store.state.user.thisIds.uuid,
      }
      selectFile(params).then(response => {
        this.enterpriseQualificationItems = response.data
      })
    },
    /**获取安全协议书文件*/
    getSecurityAgreementFile() {
      const params = {
        id: this.paramsData.proId,
        classification: '1',
        fromType: '1',
        informationType: '2',
        uuid: this.$store.state.user.thisIds.uuid,
      }
      selectFile(params).then(response => {
        this.securityAgreementFileItems = response.data
      })
    },
    /**获取监理规划文件*/
    getSupervisionPlanningFile() {
      const params = {
        id: this.paramsData.proId,
        classification: '1',
        fromType: '1',
        informationType: '9',
      }
      selectFile(params).then(response => {
        this.supervisionPlanningItems = response.data
      })
    },
    /**获取实施细则文件*/
    getImplementationRulesFile() {
      const params = {
        id: this.paramsData.proId,
        classification: '1',
        fromType: '1',
        informationType: '10',
      }
      selectFile(params).then(response => {
        this.implementationRulesItems = response.data
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getSupervisorPersonList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 导出按钮操作 */
    handleExport() {
      const params = {
        proId: this.paramsData.proId,
        pageNum: 1,
        pageSize: 10,
        supervisorName: this.queryParams.supervisorName,
      }
      this.derive(
        'project/outsourcingPro/exportSupervisorPerson',
        {
          ...params,
        },
        `监理人员基本信息.xlsx`
      )
    },
    // 点击tab事件  切换tab
    handleClick(tab, event) {
      console.log(tab, event)
    },
    /**人员基本信息查看*/
    handleView(row) {
      this.supervisorOpen = true
      //查询人员详细信息
      const params = {
        id: row.id,
        proId: row.proId,
        uuid: row.uuid,
        supUuid: row.supUuid,
      }
      this.getStatus()
      listSupervisorPersonById(params).then(response => {
        console.log(response)
        this.formData = response.data
        this.formData.phone = hideSensitiveInfo(response.data.phone)
        this.formData.idCard = hideSensitiveInfo(response.data.idCard)
        this.loading = false
      })
    },
    close() {
      this.supervisorOpen = false
      this.workCardOpen = false
    },
    /**弹出工作证页面按钮*/
    handleGenerate(row) {
      this.workCardOpen = true
      this.workCardItems = {
        proName: row.proName,
        name: row.name,
        phone: row.phone,
        postName: row.postName,
        faceUrl: row.faceUrl,
      }
    },
    /** 审核通过*/
    approvalPass(e) {
      const param = {
        reason: e,
        ...this.paramsData,
        agree: '1',
      }
      this.approval(param, '审批通过')
    },
    /**审核驳回*/
    approvalTurnDown(e) {
      const param = {
        ...e,
        ...this.paramsData,
        agree: '2',
      }
      this.approval(param, '退回成功')
    },
    /**终审*/
    approvalFinalInstance(e) {
      const param = {
        reason: e,
        ...this.paramsData,
        agree: '3',
      }
      this.approval(param, '终审成功')
    },
    /**
     * 审批方法+
     * @param param
     * @param text
     */
    getMyToDoNum,
    approval(param, text) {
      submitPersonApproval(param).then(response => {
        this.getMyToDoNum()
        if (response.code === 200) {
          this.$message({
            message: text,
            type: 'success',
          })
          this.$tab.closePage()
        } else {
          this.$message({
            message: response.msg,
            type: 'error',
          })
        }
      })
    },
    // 自定义事件接收意见
    onCloseFileDialog(val) {
      this.opinionValueOther = val
    },
  },
}
</script>
