<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="请输入施工人员姓名"
                  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"
                  type="daterange"
                  align="right"
                  :editable="false"
                  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">
              <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="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>
            </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 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: {},
      lookFaceFile:''
    };
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    this.id = this.$route.params && this.$route.params.id
    this.proId = this.$route.params && this.$route.params.proId
    this.consId = this.$route.params && this.$route.params.consId
    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 = {
        id: this.id,
        proId: this.proId,
        consId: this.consId
      }
      getSubDetailsInfo(params).then(response => {
        console.log(response)
        this.subUnitInformationItems = response;
        this.loading = false;
      });
    },
    /**获取企业资质文件*/
    getEnterpriseQualificationFile() {
      const params = {
        id: this.id,
        proId: this.proId,
        consId: this.consId,
        classification: '3',
        fromType: '1',
        informationType: '1'
      }
      selectFile(params).then(response => {
        this.enterpriseQualificationItems = response.data
      })
    },
    /**获取安全协议书文件*/
    getSecurityAgreementFile() {
      const params = {
        id: this.id,
        proId: this.proId,
        consId: this.consId,
        classification: '3',
        fromType: '1',
        informationType: '2'
      }
      selectFile(params).then(response => {
        this.securityAgreementFileItems = response.data
      })
    },
    /**获取四措两案文件*/
    getFourMeasuresAndTwoMeasuresFile() {
      const params = {
        id: this.id,
        proId: this.proId,
        consId: this.consId,
        classification: '3',
        fromType: '1',
        informationType: '3'
      }
      selectFile(params).then(response => {
        this.fourMeasuresAndTwoMeasuresFileItems = response.data
      })
    },
    /**施工人员信息查询*/
    getSubPersonList() {
      this.loading = true;
      this.personQueryParams.subId = this.id
      this.personQueryParams.consId = this.consId
      this.personQueryParams.proId = this.proId
      this.changTime()
      getSubPersonList(this.personQueryParams).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 = {
        id : row.id,
        subId: this.id,
        consId : this.consId,
        proId :this.proId
      }
      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>
