<script setup lang="ts">
import { ElMessage } from 'element-plus'
import AddStaff from '../components/AddStaff.vue'
import ImportStaff from '../components/ImportStaff.vue'
import { useProjectList } from '@/composables/useGetProjectList'
import { getStaffList, updateStaff } from '../api'
import { useUserStore } from '@/stores/user'
import { useMapStore } from '@/stores/map'

// 判断当前用户是不是超级管理员
const user = useUserStore().roles
const isAdmin = !!user.find((item: any) => item.name === '超级管理员')

const departmentList: any = useProjectList('', '79806610719731712').departmentList
const statusList = useMapStore().getMapValuesByKey('system_status')

const appList = ref()
const studentId = ref('')
const title = ref('') // 弹框标题
const isEdit = ref('')
const id = ref('')
const isShowStaffDialog = ref(false)
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getStaffList,
      params: {
        name: '',
        organ_id: '',
        account_type: '',
        status: '',
        mobile: '',
      },
    },
    filters: [
      { type: 'input', prop: 'name', label: '姓名：', placeholder: '姓名' },
      { type: 'input', prop: 'mobile', label: '手机号：', placeholder: '手机号' },
      { type: 'select', prop: 'organ_id', slots: 'filter-department' },
      {
        type: 'select',
        prop: 'account_type',
        label: '账号类型:',
        options: [
          { label: '正式', id: '1' },
          { label: '试用', id: '2' },
        ],
        labelKey: 'label',
        valueKey: 'id',
      },
      {
        type: 'select',
        prop: 'status',
        label: '生效状态:',
        options: statusList,
        labelKey: 'label',
        valueKey: 'value',
      },
    ],
    columns: [
      { label: '序号', type: 'index', align: 'center' },
      { label: '所属部门/学校', prop: 'organ_id_name', align: 'center' },
      { label: '手机号', prop: 'mobile', align: 'center' },
      { label: '姓名', prop: 'name', align: 'center' },
      { label: '性别', prop: 'gender_name', align: 'center' },
      { label: '邮箱', prop: 'email', align: 'center', width: 200 },
      { label: '角色类型', prop: 'role_name', align: 'center' },
      { label: '账号类型', prop: 'account_type_name', align: 'center' },
      { label: '账号有效期', prop: 'account_expired_time', align: 'center', width: 200 },
      { label: '生效状态', slots: 'status', align: 'center' },
      { label: '更新时间', prop: 'updated_time', align: 'center', width: 200 },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
    ],
  }
})

// 新增学生
const handleAddStudent = () => {
  isShowStaffDialog.value = true
  title.value = '新增教工'
  isEdit.value = '0'
}
// 编辑教工
const handleEdit = (row: any) => {
  id.value = row.id
  isShowStaffDialog.value = true
  title.value = '编辑教工'
  studentId.value = row.id
  isEdit.value = '1'
}
// 查看详情
const handleDetail = (row: any) => {
  isShowStaffDialog.value = true
  title.value = '查看详情'
  studentId.value = row.id
  isEdit.value = '2'
  id.value = row.id
}
const handleFresh = () => {
  appList.value.refetch()
}
const handleChangeStatus = (row: any) => {
  if (row.id !== undefined) {
    const params: any = Object.assign({}, row)
    updateStaff(params)
      .then(() => {
        ElMessage.success('更新教工成功')
        handleFresh()
      })
      .catch((err: any) => {
        if (err.code === 1) {
          handleFresh()
        }
      })
  }
}
</script>

<template>
  <AppCard title="教工用户管理">
    <AppList v-bind="listOptions" ref="appList" border stripe style="margin-top: 30px">
      <el-button type="primary" round @click="handleAddStudent" v-permission="'v1-learning-teacher-create'"
        >新增教工</el-button
      >
      <ImportStaff @create="handleFresh" />
      <template v-if="isAdmin" #filter-department="{ params }">
        <div class="name" style="font-size: 14px; color: #606266; padding-right: 12px">所属部门/学校：</div>
        <el-select @change="handleFresh" clearable v-model="params.organ_id" placeholder="请选择所属部门/学校">
          <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </template>
      <template #status="{ row }">
        <el-switch
          size="large"
          v-model="row.status"
          active-value="1"
          inactive-value="0"
          inline-prompt
          style="--el-switch-on-color: #aa1941"
          @change="handleChangeStatus(row)"
          :disabled="!isAdmin"></el-switch>
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link type="primary" plain @click="handleDetail(row)" v-permission="'v1-learning-teacher-view'"
            >查看</el-link
          >
          <el-link type="primary" plain @click="handleEdit(row)" v-permission="'v1-learning-teacher-update'"
            >编辑</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <AddStaff
    v-model:isShowStaffDialog="isShowStaffDialog"
    v-if="isShowStaffDialog === true"
    :title="title"
    :isEdit="isEdit"
    :id="id"
    @create="handleFresh" />
</template>
