<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" :style="{ padding: '20px' }">
    <el-tab-pane label="分包商单位信息" name="first">
      <bns-sub-info-tabs :items="subUnitInformationItems"></bns-sub-info-tabs>
    </el-tab-pane>
    <el-tab-pane label="企业资质" name="second">
      <bns-file-list-tabs :items="enterpriseQualificationItems"></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="安全协议书" name="third">
      <bns-file-list-tabs :items="securityAgreementFileItems"></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="四措两案" name="fourth">
      <bns-file-list-tabs :items="fourMeasuresAndTwoMeasuresFileItems"></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="施工人员信息" name="five">
      <div class="app-container">
        <el-form :model="personQueryParams" ref="personQueryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="施工人员姓名" label-width="120px" prop="supervisorName">
            <el-input
              v-model="personQueryParams.name"
              placeholder="请输入施工人员姓名"
              show-word-limit
              maxlength="20"
              clearable
              v-no-whitespace
              @keyup.enter.native="handleQueryPerson"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="personQueryParams.status" placeholder="请选择状态" clearable>
              <el-option label="在场" value="1" />
              <el-option label="离场" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="人员进场时间范围" label-width="150px" prop="supervisorName">
            <el-date-picker
              v-model="timeRange"
              :editable="false"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryPerson">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryPerson">重置</el-button>
            <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleExportPerosn">
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="personList" border>
          <el-table-column
            type="index"
            width="55"
            label="序号"
            align="center"
            :index="indexContinuous(personQueryParams.pageNum, personQueryParams.pageSize)"
          />
          <el-table-column label="姓名" width="70" align="center" prop="name" />
          <el-table-column label="岗位" width="100" align="center" prop="postName" />
          <el-table-column label="特殊工种种类" width="100" align="center" prop="specialJobType" />
          <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, 3)">查看</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="性别" width="50" align="center" prop="sex" />
          <el-table-column label="年龄" width="50" 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="性别" width="50" align="center" prop="sex" />
          <el-table-column label="年龄" width="50" 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="籍贯" width="70" align="center" prop="nativePlace" />
          <el-table-column label="身份证号码" width="160" align="center">
            <template slot-scope="scope">
              <!-- 检查是否存在身份证号 -->
              <span v-if="scope.row.idCard">{{ hideSensitiveInfo(scope.row.idCard) }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="民族" width="70" align="center" prop="nation" />
          <el-table-column label="家庭地址" width="200" align="center" prop="homeAddress" />
          <el-table-column label="现地址" width="200" align="center" prop="currentAddress" />
          <el-table-column label="进场日期" width="100" align="center" prop="admissionDate" />
          <el-table-column label="离场日期" width="100" align="center" prop="departureDate" />
          <el-table-column label="人脸照片" align="center" prop="faceUrl">
            <template slot-scope="scope">
              <el-popover placement="right" title="" trigger="hover">
                <img
                  :src="`${scope.row.faceUrl ? lookFaceFile + scope.row.faceUrl : ''}`"
                  :min-width="300"
                  :height="300"
                  alt="照片"
                />
                <img
                  slot="reference"
                  :src="`${scope.row.faceUrl ? lookFaceFile + scope.row.faceUrl : ''}`"
                  style="max-height: 50px; max-width: 50px"
                  :alt="`${scope.row.faceUrl ? lookFaceFile + scope.row.faceUrl : ''}`"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" />
          <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
              <el-button size="mini" type="text" @click="handleGenerate(scope.row)">生成工作证</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="personQueryParams.pageNum"
          :limit.sync="personQueryParams.pageSize"
          @pagination="getSubPersonList"
        />
        <!--施工人员基本信息查看-->
        <el-dialog title="查看详情" :visible.sync="constructionPersonnelOpen" width="60%">
          <bns-cons-person-details-tabs :items="formData"></bns-cons-person-details-tabs>
          <div class="footer" style="position: absolute; left: 90%; top: 95%">
            <el-button type="primary" :plain="true" @click="constructionPersonnelOpen = false">关闭</el-button>
          </div>
        </el-dialog>
        <!--生成工作证-->
        <el-dialog title="生成工作证" :visible.sync="workCardOpen" width="30%">
          <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
            <bns-generate-work-card-tabs :items="workCardItems"></bns-generate-work-card-tabs>
          </el-form>
        </el-dialog>

        <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>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { hideSensitiveInfo, indexContinuous, lookFaceFile } from '@/utils/bonus'
import bnsSubInfoTabs from '@/components/pro-tabs/bns-sub-info-tabs.vue'
import bnsConsInfoTabs from '@/components/pro-tabs/bns-cons-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 { getSubPersonList, getSubDetailsInfo, getSubPersonnelDetails } from '@/api/pro/outsourcingPro'
import { selectFile } from '@/api/tool/select'
import BnsConsPersonDetailsTabs from '@/components/pro-tabs/bns-cons-person-details-tabs.vue'

import { decryptCBC } from '@/utils/aescbc'
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview.vue'

export default {
  components: {
    bnsKkFilePreview,
    BnsConsPersonDetailsTabs,
    bnsConsInfoTabs,
    bnsSubInfoTabs,
    bnsFileListTabs,
    bnsGenerateWorkCardTabs,
  },
  data() {
    return {
      id: undefined,
      proId: undefined,
      consId: undefined,
      timeRange: [],
      //当前激活的标签页
      activeName: 'first',
      //监理信息单位弹出层
      constructionPersonnelOpen: false,
      //生成工作证弹出层
      workCardOpen: false,
      document: false,
      documentPreview: false,
      fileList: [],
      kkFilePreview: {
        filePreviewUrl: '',
        fileName: '',
        showDownloadButton: false,
      },
      //时间范围选择器
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      gutterValue: parseInt('21', 10),
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      //分包商单位信息
      subUnitInformationItems: {},
      // 施工人员基本信息查询参数
      personQueryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        status: undefined,
        startDate: undefined,
        endDate: undefined,
      },
      //企业资质
      enterpriseQualificationItems: [],
      //安全协议书
      securityAgreementFileItems: [],
      //四措两案
      fourMeasuresAndTwoMeasuresFileItems: [],
      // 分包商基本信息表格数据
      // 施工人员基本信息表格数据
      personList: [],
      //工作证信息
      workCardItems: {},
      // 人员详情  表单参数
      formData: {},
      paramsData: {},
      lookFaceFile: '',
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    const params = this.$route.params && this.$route.params.data
    this.paramsData = JSON.parse(decryptCBC(params))
    console.log(this.paramsData)
    this.getSubDetailsInfo()
    this.getEnterpriseQualificationFile()
    this.getSecurityAgreementFile()
    this.getFourMeasuresAndTwoMeasuresFile()
    this.getSubPersonList()
  },
  methods: {
    indexContinuous,
    lookFaceFile,
    hideSensitiveInfo,
    changTime() {
      this.personQueryParams.admissionDate = this.timeRange[0]
      this.personQueryParams.departureDate = this.timeRange[1]
    },
    /** 文件查看按钮操作 */
    handleShow(row, informationType) {
      this.loading = true
      const arr = {
        1: '体检文件',
        2: '保险文件',
        3: '特殊工种文件',
        4: '其他文件',
      }
      selectFile({
        classification: 9,
        uuid: row.uuid,
        informationType: informationType,
        fromType: 2,
      }).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
      })
    },
    /**分包商信息查询*/
    getSubDetailsInfo() {
      this.loading = true
      const params = {
        ...this.paramsData,
      }
      getSubDetailsInfo(params).then(response => {
        console.log(response)
        this.subUnitInformationItems = response
        this.subUnitInformationItems.corporatePhone = hideSensitiveInfo(response.corporatePhone)
        this.loading = false
      })
    },
    /**获取企业资质文件*/
    getEnterpriseQualificationFile() {
      const params = {
        ...this.paramsData,
        classification: '3',
        fromType: '1',
        informationType: '1',
      }
      selectFile(params).then(response => {
        console.log(response)
        this.enterpriseQualificationItems = response.data
      })
    },
    /**获取安全协议书文件*/
    getSecurityAgreementFile() {
      const params = {
        ...this.paramsData,
        classification: '3',
        fromType: '1',
        informationType: '2',
      }
      selectFile(params).then(response => {
        console.log(response)
        this.securityAgreementFileItems = response.data
      })
    },
    /**获取四措两案文件*/
    getFourMeasuresAndTwoMeasuresFile() {
      const params = {
        ...this.paramsData,
        classification: '3',
        fromType: '1',
        informationType: '3',
      }
      selectFile(params).then(response => {
        console.log(response)
        this.fourMeasuresAndTwoMeasuresFileItems = response.data
      })
    },
    /**施工人员信息查询*/
    getSubPersonList() {
      this.loading = true
      this.changTime()
      const params = {
        ...this.personQueryParams,
        ...this.paramsData,
      }
      getSubPersonList(params).then(response => {
        this.personList = response.rows
        this.personTotal = response.total
        this.loading = false
      })
    },
    handleQueryPerson() {
      this.personQueryParams.pageNum = 1
      this.getSubPersonList()
    },
    /** 重置按钮操作 */
    resetQueryPerson() {
      this.personQueryParams.name = undefined
      this.personQueryParams.status = undefined
      this.timeRange = []
      this.personQueryParams.startDate = undefined
      this.personQueryParams.endDate = undefined
      this.handleQueryPerson()
    },
    /** 导出按钮操作 */
    handleExportPerosn() {
      this.derive(
        'system/post/export',
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      )
    },
    // 点击tab事件  切换tab
    handleClick(tab, event) {
      console.log(tab, event)
    },
    /**人员基本信息查看*/
    handleView(row) {
      this.constructionPersonnelOpen = true
      this.workCardOpen = false
      const params = {
        ...this.paramsData,
        uuid: row.uuid,
      }
      getSubPersonnelDetails(params).then(response => {
        console.log(response)
        this.formData = response.data
        this.loading = false
      })
    },
    close() {
      this.constructionPersonnelOpen = false
      this.workCardOpen = false
    },
    /**弹出工作证页面按钮*/
    handleGenerate(row) {
      this.workCardOpen = true
      this.workCardItems = {
        proName: row.proName,
        faceUrl: row.faceUrl,
        name: row.name,
        phone: row.phone,
        postName: row.postName,
      }
    },
  },
}
</script>
<style scoped></style>
