<script setup lang="ts">
import {ref, nextTick, reactive, onMounted} from 'vue'
import { GlobalStore } from '@/stores/index'
import DrawerFrom from './components/DrawerFrom.vue'
import TableBase from '@/components/TableBase/index.vue'
import { Edit, Delete,EditPen } from '@element-plus/icons-vue'
import {User_List, User_Del, User_Leave, ColdVerify_User_List} from '@/api/user/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { PerformanceTarget_List } from '@/api/performance/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 = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_State:''
})
const options = ref<any[]>([{
    value: '1',
    label: '正常',
  },{
    value: '2',
    label: '离职',
  }])
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: '部门', width: 120 },
  { prop: 'T_State', label: '状态',  name: 'T_State',width: 120 },
  { prop: 'T_phone', label: '联系电话', width: 120 },
  { 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: '入职时间', width: 120 },
  { prop: 'T_positive_time', label: '转正时间', width: 120 },
  { 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: 'T_verify_cold_uuid', label: '冷链验证平台', name: 'T_verify_cold_uuid', width: 120 },
  { prop: 'T_verify_perf_target', label: '工资级别', name: 'T_verify_perf_target', width: 120 },
  { 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
  openDrawerFrom()
  drawerFromRef.value?.DataEcho(row)
}

const Dimission = (row: any) =>{
  ElMessageBox.confirm('确定将该成员设置为离职状态吗?', '离职警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res:any = await User_Leave({T_uuid:row.T_uuid}) 
    if (res.Code === 200) {
      ElMessage.success('离职状态设置成功！')
      nextTick(() => {
        UpdateTableList()
      })
    }
  })
  .catch(() => {
    ElMessage.warning('取消设置！')
  })
  
}

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(() => {
          UpdateTableList()
        })
      }
    })
    .catch(() => {
      ElMessage.warning('取消成功！')
    })
}

// 获取设备类型
const coldVerifyUserList = ref<any[]>([
	{
		T_uuid: '',
		T_name: ''
	}
])
const performanceTargetOptions = ref<any[]>([])
const getPerformanceTargetOptions = async () => {
  const res: any = await PerformanceTarget_List({
    User_tokey: globalStore.GET_User_tokey,
    page: 1,
    page_z: 9999
  })
  const list = res.Data?.Data || res.Data || []
  performanceTargetOptions.value = Array.isArray(list) ? list : []
}
const getColdVerifyUserList = async () => {
	const res: any = await ColdVerify_User_List({})
	coldVerifyUserList.value = res.Data.List
}
onMounted(() => {
	getColdVerifyUserList()
  getPerformanceTargetOptions()
})

// search
const SearchInfo = () => 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="4">
              <div style="display: flex;align-items: center;">
                <span style="flex-shrink: 0;">账户查询：</span>
                <el-input type="text" v-model="initParam.T_name" placeholder="输入账户名称查询" />
              </div>
            </el-col>

            <el-col :span="4">
              <div style="display: flex;align-items: center;">
                <span style="flex-shrink: 0;">状态查询：：</span>
                <el-select v-model="initParam.T_State" clearable placeholder="请选择状态">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="1">
              <el-button type="primary" @click="SearchInfo">搜索</el-button>
            </el-col>

            <el-col :span="1" :offset="1"><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" v-if="row.T_sex === 1">男</el-tag>
        <el-tag class="ml-2" type="danger" v-else>女</el-tag>
      </template>
      <template #T_State="{ row }">
        <el-tag class="ml-2" v-if="row.T_State === 1">正常</el-tag>
        <el-tag class="ml-2" type="danger" v-else>离职</el-tag>
      </template>
      <template #T_expire="{ row }">
        <el-tag class="ml-2" 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" v-if="row.T_marry === 0">未婚</el-tag>
        <el-tag class="ml-2" type="danger" v-else>已婚</el-tag>
      </template>
      <template #T_verify_perf_target="{ row }">
        <el-text type="info">{{ +row.T_verify_perf_target === 0 ? '-' : (performanceTargetOptions.find(opt => opt.Id === row.T_verify_perf_target)?.T_name || '-') }}</el-text>
      </template>
      <template #T_entry_type="{ row }">
        <el-tag class="ml-2" 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 #T_verify_cold_uuid="{ row }">
        <el-text>{{ coldVerifyUserList.find(option => option.T_uuid === row.T_verify_cold_uuid)?.T_name || '' }}</el-text>
      </template>
      <template #right="{ row }">
        <el-button link type="primary" :disabled="row.T_State==2?true:false" size="small" :icon="EditPen" @click="Dimission(row)">离职</el-button>
        <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">
@import '@/styles/var.scss';

.users {
  @include f-direction;
  .input-suffix {
    width: 100%;
    .w-50 {
      width: 33.33%;
    }
  }
}
</style>
