<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { getProList, updatePro } from '../api'
import { useUserStore } from '@/stores/user'
import AddPro from '../components/AddPro.vue'
import ImportPro from '../components/ImportPro.vue'
// 判断当前用户是不是超级管理员
const user = useUserStore().roles
const isAdmin = !!user.find((item: any) => item.name === '超级管理员')
const appList = ref()
const title = ref('')
const id = ref('')
const isEdit = ref('')
const isShowProDialog = ref(false)
const listOptions = computed(() => {
  return {
    remote: { httpRequest: getProList, params: { name: '' } },
    filters: [{ type: 'input', prop: 'name', label: '专业名称：', placeholder: '专业名称' }],
    columns: [
      { label: '序号', type: 'index', align: 'center' },
      { label: '专业代码', prop: 'code', align: 'center' },
      { label: '专业名称', prop: 'name', align: 'center' },
      { label: '专业类别', prop: 'category_name', align: 'center' },
      { label: '学历', prop: 'education_background_name', align: 'center' },
      { label: '学制', prop: 'length_of_schooling_name', align: 'center' },
      { label: '学位门类', prop: 'degree_category_name', align: 'center' },
      { label: '学位', prop: 'degree_name', align: 'center' },
      { label: '生效状态', slots: 'status', align: 'center' },
      { label: '更新时间', prop: 'updated_time', align: 'center', width: 200 },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
    ],
  }
})
const handleAddPro = () => {
  isShowProDialog.value = true
  title.value = '新增专业'
  isEdit.value = '0'
}
const handleDetail = (row: any) => {
  isShowProDialog.value = true
  title.value = '查看详情'
  id.value = row.id
  isEdit.value = '2'
}
const handleEdit = (row: any) => {
  isShowProDialog.value = true
  title.value = '编辑专业'
  id.value = row.id
  isEdit.value = '1'
}
const handleFresh = () => {
  appList.value.refetch()
}
const handleChangeStatus = (row: any) => {
  if (row.id !== undefined) {
    const params: any = Object.assign({}, row)
    updatePro(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="handleAddPro">新增专业</el-button>
      <ImportPro @create="handleFresh" />
      <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)">查看</el-link>
          <el-link type="primary" plain @click="handleEdit(row)">编辑</el-link>
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <AddPro
    v-if="isShowProDialog === true"
    v-model:isShowProDialog="isShowProDialog"
    :id="id"
    :title="title"
    :isEdit="isEdit"
    @create="handleFresh" />
</template>
