<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="施工人员姓名" prop="consName">
        <el-input
          v-model="queryParams.consName"
          placeholder="请输入施工人员名称"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableData" fit highlight-current-row style="width: 100%">
      <!-- 多选 -->
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <template v-slot="scope" v-if="column.prop == 'facePath'">
          <el-image
            v-if="scope.row.facePath"
            style="width: 40px; height: 40px; border-radius: 5px"
            :src="scope.row.facePath"
            :preview-src-list="[scope.row.facePath]"
          ></el-image>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleDetail(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="getList"
    />

    <el-dialog title="查看详情" :visible.sync="personOpen" width="60%">
      <DetailDialog ref="detailDia" :items="personItems" />
      <!-- <bns-cons-person-details-tabs
        :items="personItems"></bns-cons-person-details-tabs> -->
    </el-dialog>
  </div>
</template>

<script>
import DetailDialog from './components/DetailDialog'
import { hideSensitiveInfo, indexContinuous, lookFaceFile } from '@/utils/bonus'
import { listPersonnelInformation } from '@/api/checkInAdmin'
import { getConstructionPersonnelDetails } from '@/api/pro/outsourcingPro'

export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      proId: '',
      time: '',
      showSearch: true,
      personOpen: false,
      personItems: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        consName: '', // 工程名称
      },
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '姓名', prop: 'consName' },
        { label: '性别', prop: 'sex' },
        { label: '年龄', prop: 'age' },
        { label: '联系方式', prop: 'phone' },
        { label: '籍贯', prop: 'natives' },
        { label: '身份证号码', prop: 'idCard' },
        { label: '名族', prop: 'nation' },
        { label: '家庭住址', prop: 'homeAddress' },
        { label: '现住址', prop: 'address' },
        { label: '岗位', prop: 'post' },
        { label: '工种', prop: 'workType' },
        { label: '人脸照片', prop: 'facePath' },
      ],
      // 表格数据
      tableData: [
        // {
        //   consName: '张三',
        //   sex: '男',
        //   age: 25,
        //   phone: '13888888888',
        //   nativePlace: '河南',
        //   idCard: '410000000000000000',
        //   nation: '汉族',
        //   homeAddress: '河南省郑州市',
        //   address: '河南省郑州市',
        //   post: '项目经理',
        //   workType: '项目经理',
        //   facePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        // },
      ],
    }
  },
  created() {
    this.proId = this.$route.query.proId
    this.time = this.$route.query.time
    this.getList()
  },
  methods: {
    indexContinuous,
    // 查询
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const params = {
          ...this.queryParams,
          proId: this.proId,
          time: this.time,
        }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await listPersonnelInformation(params)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableData = res.rows
        this.total = res.total
        this.tableData.forEach(item => {
          if (item.facePath) {
            item.facePath = lookFaceFile() + item.facePath
          } else {
            item.facePath = ''
          }
        })
      } catch (error) {
        console.log('🚀 ~ getList ~ error:', error)
      }
    },
    // 查看详情
    handleDetail(row) {
      console.log('查看详情', row)
      // this.$refs.detailDia.openDialog(row)
      const params = {
        uuid: row.uuid,
      }
      getConstructionPersonnelDetails(params).then(response => {
        console.log(response)
        this.personItems = response.data
        this.personItems.phone = hideSensitiveInfo(response.data.phone)
        this.personItems.idCard = hideSensitiveInfo(response.data.idCard)
        this.loading = false
        this.personOpen = true
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
