<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useProjectList } from '@/composables/useGetProjectList'
import AddStudent from '../components/AddStudent.vue'
import ImportStudent from '../components/ImportStudent.vue'
import UpdateStudent from '../components/UpdateStudent.vue'
// import SourceAnalysis from '../components/SourceAnalysis.vue'

import { getStudentList, exportStudent, updateStudent } from '../api'
import { useUserStore } from '@/stores/user'
import { useMapStore } from '@/stores/map'
import { useClassList, useSpecialtyList } from '../composables/useData'

// 判断当前用户是不是超级管理员
const user = useUserStore().roles
const isAdmin = !!user.find((item: any) => item.name === '超级管理员')
const { departmentList } = useProjectList('', '79806610719731712')
const statusList = useMapStore().getMapValuesByKey('system_status')
const appList = ref()
const id = ref('')
const title = ref('')
const isEdit = ref('')
const isShowAddDialog = ref(false)
const isShowImportDialog = ref(false)

// 专业
const { items: specialtyList } = useSpecialtyList()

// 班级
let { items: classList, params } = useClassList()

// const isShowAnalysisDialog = ref(false)
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getStudentList,
      params: {
        name: '',
        organ_id: '',
        mobile: '',
        specialty_id: '',
        class_id: '',
        account_type: '',
        status: '',
      },
      beforeRequest: (requestPrams: any) => {
        params.organ_id = requestPrams.organ_id
        params.specialty_id = requestPrams.specialty_id
        return requestPrams
      },
    },
    filters: [
      {
        type: 'select',
        prop: 'organ_id',
        label: '所属部门/学校:',
        options: departmentList.value,
        labelKey: 'name',
        valueKey: 'id',
      },
      {
        type: 'select',
        prop: 'specialty_id',
        label: '所属专业:',
        options: specialtyList.value,
        labelKey: 'name',
        valueKey: 'id',
      },
      {
        type: 'select',
        prop: 'class_id',
        label: '所属班级:',
        options: classList.value,
        labelKey: 'name',
        valueKey: 'id',
      },
      {
        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',
      },
      { type: 'input', prop: 'name', label: '学生姓名:', placeholder: '学生姓名' },
      { type: 'input', prop: 'mobile', label: '学生电话:', placeholder: '学生电话' },
    ],
    columns: [
      // { type: 'selection' },
      { label: '序号', type: 'index', align: 'center' },
      { label: '学号', prop: 'sno_number', align: 'center', minWidth: '200' },
      { label: '姓名', prop: 'name', align: 'center', minWidth: '100' },
      { label: '性别', prop: 'gender_name', align: 'center' },
      { label: '联系电话', prop: 'mobile', align: 'center', minWidth: '200' },
      { label: '账号类型', prop: 'account_type_name', align: 'center' },
      { label: '账号有效期', prop: 'account_expired_time', align: 'center', minWidth: '200' },
      { label: '部门/学校', prop: 'organ_id_name', align: 'center', minWidth: '200' },
      { label: '专业', prop: 'specialty_id_name', align: 'center', minWidth: '200' },
      { label: '班级', prop: 'class_id_name', align: 'center', minWidth: '200' },
      { label: '身份证号', prop: 'id_number', align: 'center', minWidth: '200' },
      { label: '出生年月', prop: 'birthday', align: 'center', minWidth: '200' },
      { label: '省', prop: 'province_name', align: 'center' },
      { label: '市', prop: 'city_name', align: 'center' },
      { label: '县', prop: 'county_name', align: 'center' },
      { label: '生效状态', slots: 'status', align: 'center' },
      { label: '更新时间', prop: 'updated_time', align: 'center', minWidth: '200' },
      { label: '操作', slots: 'table-operate', align: 'center', minWidth: '200', fixed: 'right' },
    ],
  }
})

// 刷新页面
const handleRefresh = () => {
  appList.value.refetch()
}
// 新增学生
const handleAddStudent = () => {
  isShowAddDialog.value = true
  title.value = '新增学生'
  isEdit.value = '0'
}
// 编辑学生
const handleEdit = (row: any) => {
  isShowAddDialog.value = true
  title.value = '编辑学生'
  isEdit.value = '1'
  id.value = row.id
}
// 查看详情
const handleDetail = (row: any) => {
  isShowAddDialog.value = true
  title.value = '查看详情'
  id.value = row.id
  isEdit.value = '2'
}
const handleChangeStatus = (row: any) => {
  if (row.id !== undefined) {
    const params: any = Object.assign({}, row)
    updateStudent(params).then(() => {
      ElMessage.success('更新学生成功')
      handleRefresh()
    })
  }
}
// 批量导入
const handleImport = () => {
  isShowImportDialog.value = true
}
// 批量修改
const updateDialogVisible = ref(false)
const handleUpdate = () => {
  updateDialogVisible.value = true
}
// 导出
const handleExport = () => {
  const params = Object.assign({}, appList.value?.params)
  exportStudent(params).then((r: any) => {
    const blob = new Blob([r], { type: 'application/vnd.ms-excel' })
    if ('download' in document.createElement('a')) {
      const link = document.createElement('a')
      link.download = '学员数据.xlsx'
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click()
      URL.revokeObjectURL(link.href)
      document.body.removeChild(link)
    }
  })
}
const multipleSelection: any = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const handleAnalysis = () => {
  // isShowAnalysisDialog.value = true
  // window.open(
  //   import.meta.env.VITE_BI_URL +
  //     '/bi/?proc=1&action=viewer&hback=true&isInPreview=true&db=!7d2b!!8346!!6559!!80b2!e-SaaS!2f!!751f!!6e90!!5730!!5206!!5e03!.db&platform=PC&browserType=chrome',
  // )
  window.open('/teach/chart/origin')
}

const isSchool = import.meta.env.MODE === 'school'
</script>

<template>
  <AppCard title="学生管理">
    <AppList
      v-bind="listOptions"
      ref="appList"
      @selection-change="handleSelectionChange"
      border
      stripe
      style="margin-top: 30px">
      <el-button type="primary" round @click="handleAddStudent" v-permission="'v1-learning-student-create'"
        >新增学生</el-button
      >
      <el-button type="primary" round @click="handleImport" v-permission="'v1-learning-student-import'"
        >批量导入</el-button
      >
      <el-button type="primary" round @click="handleExport" v-permission="'v1-learning-student-download'"
        >批量导出</el-button
      >
      <el-button type="primary" round @click="handleUpdate" v-permission="'v1-learning-student-import'"
        >批量修改</el-button
      >
      <el-button type="primary" round @click="handleAnalysis" v-if="isSchool">生源地分析</el-button>
      <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-student-view'"
            >查看</el-link
          >
          <el-link type="primary" plain @click="handleEdit(row)" v-permission="'v1-learning-student-update'"
            >编辑</el-link
          >
        </el-space>
      </template>
    </AppList>
  </AppCard>
  <!-- 新增学生 -->
  <AddStudent
    v-if="isShowAddDialog === true"
    v-model:isShowAddDialog="isShowAddDialog"
    :id="id"
    :title="title"
    :isEdit="isEdit"
    @create="handleRefresh" />
  <!-- 导入学生 -->
  <ImportStudent v-if="isShowImportDialog" v-model:isShowImportDialog="isShowImportDialog" @create="handleRefresh" />
  <!-- 导入学生 -->
  <UpdateStudent v-if="updateDialogVisible" v-model="updateDialogVisible" @create="handleRefresh" />
  <!-- 生源地分析 -->
  <!-- <SourceAnalysis v-if="isShowAnalysisDialog" v-model:isShowAnalysisDialog="isShowAnalysisDialog" /> -->
</template>
