<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { GlobalStore } from '@/stores/index'
import DrawerFrom from './components/DrawerFrom.vue'
import TableBase from '@/components/TableBase/index.vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { User_List, User_Del } from '@/api/user/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ColumnProps } from '@/components/TableBase/interface/index'

const action = ref(true)
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const drawerFromRef = ref<InstanceType<typeof DrawerFrom> | null>(null)
const initParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: ''
}

const columns: ColumnProps[] = [
  { type: 'index', label: '#', width: 80, fixed: 'left' },
  { prop: 'T_name', label: '姓名', width: 120, fixed: 'left', name: 'T_name' },
  { prop: 'T_post_name', label: '职位', ellipsis: true },
  { prop: 'T_dept_name', label: '部门', ellipsis: true },
  { prop: 'T_phone', label: '联系电话', ellipsis: true, width: 100 },
  { prop: 'T_nation', label: '民族' },
  { prop: 'T_sex', label: '性别', name: 'T_sex' },
  { prop: 'T_school', label: '毕业院校', ellipsis: true, width: 100 },
  { prop: 'T_major', label: '专业', ellipsis: true },
  { prop: 'T_education', label: '学历' },
  { prop: 'T_entry_time', label: '入职时间', ellipsis: true, width: 100 },
  { prop: 'T_positive_time', label: '转正时间', ellipsis: true, width: 100 },
  { prop: 'T_entry_type', label: '入职类型', name: 'T_entry_type', width: 100 },
  { prop: 'T_contract_start_time', label: '劳动合同开始时间', width: 160 },
  { prop: 'T_contract_end_time', label: '劳动合同结束时间', width: 160 },
  { prop: 'T_expire', label: '是否到期', name: 'T_expire', width: 100 },
  { prop: 'T_marry', label: '婚否', name: 'T_marry' },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
]
const openDrawerFrom = () => {
  drawerFromRef.value?.openDrawer()
}

const UpdateTableList = () => {
  TableRef.value?.getTableList()
}

const UpdateAction = (val: boolean) => {
  action.value = val
}

const EditUserInfo = (row: any) => {
  action.value = false
  drawerFromRef.value?.openDrawer()
  drawerFromRef.value?.DataEcho(row)
}
const DeleteUserInfo = (row: any) => {
  ElMessageBox.confirm('您确定要删除吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await User_Del({ User_tokey: globalStore.GET_User_tokey, T_uuid: row.T_uuid })
      if (res.Code === 200) {
        ElMessage.success('删除成功！')
        nextTick(() => {
          TableRef.value?.getTableList()
        })
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}

// search
const search = ref<string>('')
const SearchInfo = () => {
  initParam.T_name = search.value
  TableRef.value?.searchTable()
}
</script>

<template>
  <div class="users">
    <TableBase ref="TableRef" :columns="columns" :requestApi="User_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">账户查询：</span>
              <el-input type="text" class="w-50 m-2" v-model="search" />
              <el-button type="primary" @click="SearchInfo">搜索</el-button>
            </el-col>
            <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawerFrom">添加</el-button></el-col>
          </el-row>
        </div>
      </template>
      <template #T_name="{ row }">{{ row.T_name }}</template>
      <template #T_sex="{ row }">
        <el-tag class="ml-2" type="primary" v-if="row.T_sex === 1">男</el-tag>
        <el-tag class="ml-2" type="danger" v-else>女</el-tag>
      </template>
      <template #T_expire="{ row }">
        <el-tag class="ml-2" type="primary" v-if="row.T_expire === 0">否</el-tag>
        <el-tag class="ml-2" type="danger" v-else>是</el-tag>
      </template>
      <template #T_marry="{ row }">
        <el-tag class="ml-2" type="primary" v-if="row.T_marry === 0">未婚</el-tag>
        <el-tag class="ml-2" type="danger" v-else>已婚</el-tag>
      </template>
      <template #T_entry_type="{ row }">
        <el-tag class="ml-2" type="primary" v-if="+row.T_entry_type === 1">全职</el-tag>
        <el-tag class="ml-2" type="warning" v-else-if="+row.T_entry_type === 2">兼职</el-tag>
        <el-tag class="ml-2" type="danger" v-else>实习生</el-tag>
      </template>
      <template #right="{ row }">
        <el-button link type="primary" size="small" :icon="Edit" @click="EditUserInfo(row)">编辑</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="DeleteUserInfo(row)">删除</el-button>
      </template>
    </TableBase>
    <DrawerFrom ref="drawerFromRef" :action="action" @onTableList="UpdateTableList" @onaction="UpdateAction" />
  </div>
</template>

<style scoped lang="scss">
.input-suffix {
  width: 100%;
  .w-50 {
    width: 12.5rem;
  }
}
.form {
  margin-top: 3rem;
}
</style>
