<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"
              placeholder="请输入监理姓名"
              clearable v-no-whitespace
              @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="年龄" 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="`${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" 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="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getSupervisorPersonList"
        />
        <!--监理人员基本信息查看-->
        <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 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="phone">
                  <el-input v-model="formData.phone" 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="postName">
                  <el-input v-model="formData.postName" 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="24">
                <el-form-item label-width="120px" label="人脸照片" :style="{width:'100%'}">
                </el-form-item>
                <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-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="体检文件">
                </el-form-item>
                <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-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="保险文件">
                </el-form-item>
                <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-col>
            </el-row>
            <el-row type="flex" justify="start" align="top" :gutter="gutterValue">
              <el-col :span="24">
                <el-form-item label-width="120px" label="其他文件">
                </el-form-item>
                <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-col>
            </el-row>
          </el-form>
          <div slot="footer">
            <el-button @click="supervisorOpen = 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>
      </div>
    </el-tab-pane>
    <el-tab-pane label="企业资质" name="third">
      <bns-file-list-tabs
        :items="enterpriseQualificationItems"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="安全协议书" name="fourth">
      <bns-file-list-tabs
        :items="securityAgreementFileItems"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="监理规划" name="five">
      <bns-file-list-tabs
        :items="supervisionPlanningItems"
      ></bns-file-list-tabs>
    </el-tab-pane>
    <el-tab-pane label="实施细则" name="six">
      <bns-file-list-tabs
        :items="implementationRulesItems"
      ></bns-file-list-tabs>
    </el-tab-pane>
  </el-tabs>

</template>
<script>
import { hideSensitiveInfo, indexContinuous, lookFaceFile } from '@/utils/bonus'
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 { selectFile } from '@/api/tool/select'


export default {
  components: {
    bnsSupervisorInfoTabs,
    bnsFileListTabs,
    bnsGenerateWorkCardTabs
  },
  data() {
    return {
      proId: undefined,
      supId: undefined,
      //当前激活的标签页
      activeName: 'first',
      //监理信息单位弹出层
      supervisorOpen: false,
      //生成工作证弹出层
      workCardOpen: 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: [],
        lookFaceFile:''
      }
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    this.proId = this.$route.params && this.$route.params.proId
    this.getSupervisorList()
  },
  methods: {
    indexContinuous,
    lookFaceFile,
    hideSensitiveInfo,
    init(){
      this.getSupervisorPersonList()
      this.getEnterpriseQualificationFile()
      this.getSecurityAgreementFile()
      this.getSupervisionPlanningFile()
      this.getImplementationRulesFile()
    },
    /**监理基本人员信息查询*/
    getSupervisorList() {
      this.loading = true
      const params = {
        proId: this.proId,
      }
      listSupervisor(params).then(response => {
        this.supervisoryUnitInformationItems = response.data
        this.supId = response.data.id
        this.init()
        this.loading = false
      })
    },
    /**监理人员基本信息查询*/
    getSupervisorPersonList() {
      this.loading = true
      const params = {
        proId: this.proId,
        supId: this.supId,
        ...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.proId,
        classification: '1',
        fromType: '1',
        informationType: '1'
      }
      selectFile(params).then(response => {
        this.enterpriseQualificationItems = response.data
      })
    },
    /**获取安全协议书文件*/
    getSecurityAgreementFile() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '2'
      }
      selectFile(params).then(response => {
        this.securityAgreementFileItems = response.data
      })
    },
    /**获取监理规划文件*/
    getSupervisionPlanningFile() {
      const params = {
        id: this.proId,
        classification: '1',
        fromType: '1',
        informationType: '9'
      }
      selectFile(params).then(response => {
        this.supervisionPlanningItems = response.data
      })
    },
    /**获取实施细则文件*/
    getImplementationRulesFile() {
      const params = {
        id: this.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.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 = {
        uuid: row.uuid
      }
      listSupervisorPersonById(params).then(response => {
        console.log(response)
        this.formData = response.data
        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
      }
    }
  }
}
</script>
