<template>
  <div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="70%" v-if="dialogVisible">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="关键字" prop="keyWord">
          <el-input
            v-model="queryParams.keyWord"
            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-table
        :data="tableData"
        fit
        highlight-current-row
        style="width: 100%"
        row-key="id"
        @selection-change="handleSelect"
      >
        <!-- 多选 -->
        <el-table-column type="selection" width="55" align="center" reserve-selection />
        <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
              style="width: 40px; height: 40px; border-radius: 5px"
              :src="scope.row.facePath"
              :preview-src-list="[scope.row.facePath]"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[50, 100, 200]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="small" @click="submit" v-preventReClick="3000">确定选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs.vue'
import BnsTimelineTabs from '@/components/pro-tabs/bns-timeline-tabs.vue'
import { indexContinuous, lookFaceFile } from '@/utils/bonus'
import { getPersonList } from '@/api/checkInAdmin'

export default {
  components: {
    bnsFileListTabs,
    BnsTimelineTabs,
  },
  data() {
    return {
      proId: this.$store.state.user.thisIds.proId,
      contUuid: this.$store.state.user.thisIds.consUuid,
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        keyWord: '',
      },
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '姓名', prop: 'userName' },
        { label: '性别', prop: 'sex' },
        { label: '年龄', prop: 'age' },
        { label: '联系方式', prop: 'phone' },
        { label: '籍贯', prop: 'nativePlace' },
        { label: '身份证号码', prop: 'idCard' },
        { label: '名族', prop: 'nation' },
        { label: '家庭住址', prop: 'homeAddress' },
        { label: '现住址', prop: 'address' },
        { label: '岗位', prop: 'post' },
        { label: '工种', prop: 'workType' },
        { label: '人脸照片', prop: 'facePath' },
      ],
      // 表格数据
      tableData: [],
      // 选择数据
      userIds: [],
    }
  },
  created() {
    console.log('工程Id', this.$store.state.user.thisIds)
  },
  methods: {
    indexContinuous,
    // 打开详情弹窗
    openDialog() {
      this.dialogVisible = true
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 关闭详情弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.keyWord = ''
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const params = {
          ...this.queryParams,
          proId: this.proId,
          contUuid: this.contUuid,
        }
        console.log('🚀 ~ params', params)
        const res = await getPersonList(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('获取列表失败', error)
      }
    },
    // 选择
    handleSelect(selection) {
      console.log('🚀 ~ handleSelect ~ selection, row:', selection)
      this.userIds = selection.map(item => {
        return {
          userId: item.id,
        }
      })
    },
    //
    submit() {
      console.log('submit', this.userIds)
      this.$emit('handleIds', this.userIds)
      this.dialogVisible = false
    },
  },
}
</script>

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