<template>
  <div class="part-box is-filter">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input
          v-model.trim="searchModel.name"
          placeholder="请输入"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toPage(1)">查询</el-button>
        <el-button type="primary" status="success" @click="onAdd"
          >新建</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div class="part-box">
    <el-table class="page-table" :data="dataList" border stripe>
      <el-table-column property="name" label="名称" />
      <el-table-column property="code" label="代码" />
      <el-table-column property="subOrgCode" label="子机构代码" width="100" />
      <el-table-column
        property="enableDoubleTrack"
        label="双评轨迹"
        width="100"
      />
      <el-table-column property="province" label="省份" />
      <el-table-column property="city" label="城市" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" link @click="onEdit(scope.row)">
            修改
          </el-button>
          <el-button size="small" link @click="onEditAdmin(scope.row)">
            编辑管理员
          </el-button>
          <el-button size="small" link @click="onEditRoleAuth(scope.row)">
            角色权限
          </el-button>
          <el-button size="small" link @click="onSplitCourse(scope.row)">
            科目拆分
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>

  <!-- 编辑学校 -->
  <ModifySchool ref="modifySchoolRef" :row-data="curRow" @modified="getList" />
  <!-- 编辑学校管理员 -->
  <ModifySchoolAdmin ref="modifySchoolAdminRef" :row-data="curRow" />

  <!-- ImportDialog -->
  <ImportDialog
    ref="importDialogRef"
    title="科目拆分"
    upload-url="/api/admin/site/import"
    :format="['xls', 'xlsx']"
    :download-handle="downloadTemplate"
    download-filename="科目拆分模板.xlsx"
    :auto-upload="false"
    :before-submit-handle="beforeSubmitHandle"
    @upload-success="importSuccess"
  >
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="名称">
        <el-input :value="curRow.name" readonly disabled />
      </el-form-item>
      <el-form-item label="考试" prop="exam">
        <SelectExam v-model="importExamId" size="large" />
      </el-form-item>
    </el-form>
  </ImportDialog>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { schoolListPage } from '@/api/admin';
  import { SchoolItem, SchoolListFilter } from '@/api/types/admin';
  import useTable from '@/hooks/table';
  import { ElMessage } from 'element-plus';

  // import useDictOption from '@/hooks/dict-option';
  // import useLoading from '@/hooks/loading';
  // import { useAppStore, useUserStore } from '@/store';

  import ModifySchool from './ModifySchool.vue';
  import ModifySchoolAdmin from './ModifySchoolAdmin.vue';

  defineOptions({
    name: 'SchoolManage',
  });

  // const appStore = useAppStore();
  // const userStore = useUserStore();

  // const preDate = getBeforeWeek();
  const searchModel = reactive<SchoolListFilter>({
    name: '',
  });

  const { dataList, pagination, getList, toPage, pageSizeChange } =
    useTable<SchoolItem>(schoolListPage, searchModel, false);

  // table action
  const curRow = ref({} as SchoolItem);
  const modifySchoolRef = ref();
  function onEdit(row: SchoolItem) {
    console.log(row);
    curRow.value = row;
    modifySchoolRef.value?.open();
  }
  function onAdd() {
    curRow.value = {} as SchoolItem;
    modifySchoolRef.value?.open();
  }

  const modifySchoolAdminRef = ref();
  function onEditAdmin(row: SchoolItem) {
    console.log(row);
    curRow.value = row;
    modifySchoolRef.value?.open();
  }
  function onEditRoleAuth(row: SchoolItem) {
    // TODO:权限编辑
    console.log(row);
  }
  // 导入
  const importDialogRef = ref();
  const importExamId = ref(0);
  function onSplitCourse(row: SchoolItem) {
    curRow.value = row;
    importDialogRef.value?.open();
  }

  async function downloadTemplate() {
    // const res = await downloadByApi(() => agentTemplate()).catch((e) => {
    //   Message.error(e || '下载失败，请重新尝试！');
    // });
    // if (!res) return;
    // Message.success('下载成功！');
  }

  async function beforeSubmitHandle() {
    if (!importExamId.value) {
      ElMessage.error('请选择考试');
      return Promise.reject(new Error('请选择考试'));
    }

    return Promise.resolve();
  }

  function importSuccess() {
    importDialogRef.value?.close();
  }
</script>
