<template>
  <div class="part-box is-filter">
    <a-space class="filter-line" :size="12" wrap>
      <SelectTeaching
        v-model="searchModel.teachingId"
        placeholder="请选择"
        allow-clear
        prefix
      />
      <a-input v-model.trim="searchModel.name" placeholder="请输入" allow-clear>
        <template #prefix>考点名称</template>
      </a-input>
      <a-select
        v-model="searchModel.enable"
        placeholder="请选择"
        allow-clear
        :options="ableOptions"
      >
        <template #prefix>状态</template>
      </a-select>

      <a-button type="primary" @click="toPage(1)">查询</a-button>
    </a-space>
  </div>
  <div class="part-box">
    <a-space class="part-action" :size="6">
      <a-button type="text" @click="toAdd">
        <template #icon>
          <svg-icon name="icon-add" />
        </template>
        新增
      </a-button>
      <a-divider direction="vertical" />
      <a-button type="text" @click="toImport">
        <template #icon>
          <svg-icon name="icon-import" />
        </template>
        导入
      </a-button>
    </a-space>
    <a-table
      class="page-table"
      :columns="columns"
      :data="dataList"
      :pagination="pagination"
      :scroll="{ x: 1200 }"
      :bordered="false"
    >
      <template #enable="{ record }">
        <status-tag type="enable" :value="record.enable" />
      </template>
      <template #action="{ record }">
        <a-button type="text" class="btn-primary" @click="toEdit(record)"
          >编辑</a-button
        >
        <a-button
          :class="record.enable ? 'btn-danger' : 'btn-primary'"
          type="text"
          @click="toEnable(record)"
          >{{ record.enable ? '禁用' : '启用' }}</a-button
        >
        <a-button
          v-if="!record.cancel"
          type="text"
          class="btn-primary"
          @click="toPlace(record)"
          >考点指引</a-button
        >
        <a-button
          v-if="!record.cancel"
          type="text"
          class="btn-primary"
          @click="toRoom(record)"
          >考场</a-button
        >
      </template>
    </a-table>

    <!-- ImportDialog -->
    <ImportDialog
      ref="importDialogRef"
      title="导入考点"
      upload-url="/api/admin/agent/import"
      :format="['xls', 'xlsx']"
      :download-handle="downloadTemplate"
      download-filename="考点导入模板.xlsx"
      :auto-upload="false"
      @upload-success="getList"
    />
    <!-- ModifyAgent -->
    <ModifyAgent ref="modifyAgentRef" :row-data="curRow" @modified="getList" />
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { agentListPage, agentTemplate, ableAgent } from '@/api/base';
  import { AgentItem, AgentListFilter } from '@/api/types/base';
  import useTable from '@/hooks/table';
  import useDictOption from '@/hooks/dict-option';
  import { modalConfirm } from '@/utils/arco';
  import { downloadByApi } from '@/utils/download';
  import { useAppStore } from '@/store';

  import ImportDialog from '@/components/import-dialog/index.vue';
  import ModifyAgent from './modifyAgent.vue';

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

  const appStore = useAppStore();
  appStore.setInfo({ breadcrumbs: ['基础信息管理', '考点管理'] });

  const { optionList: ableOptions } = useDictOption('ABLE_TYPE');

  const searchModel = reactive<AgentListFilter>({
    teachingId: null,
    name: '',
    enable: undefined,
  });

  const columns: TableColumnData[] = [
    {
      title: '考点代码',
      dataIndex: 'code',
      width: 120,
    },
    {
      title: '考点名称',
      dataIndex: 'name',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '所属教学点',
      dataIndex: 'teachingName',
    },
    {
      title: '总容量',
      dataIndex: 'capacity',
      width: 100,
    },
    {
      title: '状态',
      slotName: 'enable',
      width: 100,
    },
    {
      title: '操作',
      slotName: 'action',
      width: 210,
      fixed: 'right',
      cellClass: 'action-column',
    },
  ];
  const { dataList, pagination, toPage, getList } = useTable<AgentItem>(
    agentListPage,
    searchModel,
    true
  );

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

  // table action
  // 导入
  const importDialogRef = ref();
  function toImport() {
    importDialogRef.value?.open();
  }

  const modifyAgentRef = ref();
  const curRow = ref({} as AgentItem);
  function toAdd() {
    curRow.value = {} as AgentItem;
    modifyAgentRef.value?.open();
  }
  function toEdit(row: AgentItem) {
    curRow.value = row;
    modifyAgentRef.value?.open();
  }

  async function toEnable(row: AgentItem) {
    const action = row.enable ? '禁用' : '启用';
    const confirmRes = await modalConfirm(
      '提示',
      `确定要${action}考点【${row.name}】吗?`
    ).catch(() => false);
    if (confirmRes !== 'confirm') return;

    await ableAgent({ id: row.id, enable: !row.enable });
    Message.success('操作成功！');
    getList();
  }

  function toPlace(row: AgentItem) {
    console.log(row);
  }
  function toRoom(row: AgentItem) {
    console.log(row);
  }
</script>
