<script setup>
import { reactive } from 'vue'
import { iuserList, iuserAdd, IuserUpdate, iuserDelete, iuserGetById } from './api'
import { baseModelOptions, baseFilterOptions,batchOptions } from './options'
// const { proxy } = getCurrentInstance();

const state = reactive({
  baseModelOptions: baseModelOptions(),
  batchOptions: batchOptions(),
  baseFilterOptions: baseFilterOptions(),
  title: "实名管理",
  baseModelName: '实名信息',
  addBtnName: '新增人员',
  editBtnName: '',
  delBtnName: '',
  primaryKey: 'id',
  getTableFn: iuserList,
  addFn: iuserAdd,
  editFn: IuserUpdate,
  deleteFn: iuserDelete,
  detailFn: iuserGetById,
  showEditBtn: false,
  showDeleteBtn: false,
  columnCount: 1,
  hideselection:true,
  showModel: false,
  // rowControl: {
  //   showEditBtn: false,
  //   showDelBtn: false
  // },
  permission: {//菜单管理中添加权限
    add: 'realName:page:list',
    edit: 'realName:page:list',
    delete: 'realName:page:list',
    detail: 'realName:page:list',
  },
  pageInfo: { total: 0, base: { limit: 8, current: 1 } },
})

const beforeUpload = (form) => {
  console.log('form :>> ', form);
}

</script>

<template>
  <div class="app-container">
    <el-dialog title="批量导入" v-model="state.showModel" width="30%">
      <el-upload
        action="#"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :on-progress="handleUploadProgress"
        :on-change="handleUploadChange"
        :auto-upload="false"
        :show-file-list="false"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <BaseTablePage :tableOptions="state">
      <!-- <template #afterTop="scope">
        <el-button @click="state.showModel=true" type="primary">批量导入</el-button>
      </template> -->
      <template v-slot:column>
        <el-table-column type="index" align="center" label="序号" width="70" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="身份证" align="center" prop="idCard" />
        <el-table-column label="工种" align="center" prop="workType" />
        <el-table-column label="联系方式" align="center" prop="tel" />
        <el-table-column label="录入时间" align="center" prop="createTime" />
      </template>
      <template #control="baseScope">
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <template #default="scope">
            <el-button plain type="text" icon="Edit" @click="baseScope.handleEdit(scope.$index, scope.row)"
              v-hasPermi="['realName:page:edit']">修改</el-button>
            <el-button type="text" @click="baseScope.deleteTableData(scope.$index, scope.row)"
              v-hasPermi="['realName:page:remove']" icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTablePage>
  </div>
</template>

<style scoped></style>
