<template>
  <a-card title="" :bordered="false">
    <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="3">
          <a-form-item label="年份">
            <a-input v-model:value="queryParam.year" placeholder="请输入年份" allowClear/>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item label="专业类别" name="professionalCategory">
            <a-select v-model:value="queryParam.professionalCategory" show-search allow-clear placeholder="请选择专业类别">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option value="音乐类">音乐类</a-select-option>
              <a-select-option value="表演类">表演类</a-select-option>
              <a-select-option value="书法类">书法类</a-select-option>
              <a-select-option value="舞蹈类">舞蹈类</a-select-option>
              <a-select-option value="体育类">体育类</a-select-option>
              <a-select-option value="艺术舞蹈类">艺术舞蹈类</a-select-option>
              <a-select-option value="国际标准舞类">国际标准舞类</a-select-option>
              <a-select-option value="播音与主持类">播音与主持类</a-select-option>
              <a-select-option value="美术与设计类">美术与设计类</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item label="文理分科">
            <a-select v-model:value="queryParam.category" show-search allow-clear placeholder="请选择[文科/理科]">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option value="文科">文科</a-select-option>
              <a-select-option value="理科">理科</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
          <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <JVxeTable
      toolbar
      :toolbarConfig="toolbarConfig"
      rowNumber
      rowSelection
      keepSource
      asyncRemove
      :height="500"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      @save="handleTableSave"
      @removed="handleTableRemove"
      @edit-closed="handleEditClosed"
      @pageChange="handlePageChange"
      @selectRowChange="handleSelectRowChange"
    />
  </a-card>
</template>

<script lang="ts" setup>
// 即时保存示例
import { reactive, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
import { useMessage } from '/@/hooks/web/useMessage';
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 7 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});
const { createMessage } = useMessage();
// 工具栏的按钮配置
const toolbarConfig = reactive({
  // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
  btn: ['add', 'save', 'remove', 'clearSelection'],
});
// 是否正在加载
const loading = ref(false);
// 查询参数
const queryParam = reactive({
  year:'',//年份
  category:'',//文理分科
  professionalCategory:'',//专业类别
})
// 分页器参数
const pagination = reactive({
  // 当前页码
  current: 1,
  // 每页的条数
  pageSize: 10,
  // 可切换的条数
  pageSizeOptions: ['10', '20', '30', '100', '200'],
  // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
  total: 0,
});
// 选择的行
const selectedRows = ref<Recordable[]>([]);
// 数据源，控制表格的数据
const dataSource = ref<Recordable[]>([]);
// 列配置，控制表格显示的列
const columns = ref<JVxeColumn[]>([
  /*{ key: 'num', title: '序号', width: 80, type: JVxeTypes.normal },*/
  {
    title: '序号',
    key: 'id',
    width:200,
    type: JVxeTypes.normal,
  },
  {
    title: '年份',
    key: 'year',
    width:100,
    type: JVxeTypes.input,
  },
  {
    title: '专业类别',
    key: 'professionalCategory',
    width:200,
    type: JVxeTypes.input,
  },
  {
    title: '批次',
    key: 'batch',
    width:200,
    type: JVxeTypes.input,
  },
  {
    title: '文科/理科',
    key: 'category',
    width:150,
    type: JVxeTypes.input,
  },
  {
    title: '文化成绩分数',
    key: 'culturalScore',
    width:150,
    type: JVxeTypes.inputNumber,
  },
  {
    title: '专业成绩分数',
    key: 'specialScore',
    width:150,
    type: JVxeTypes.inputNumber,
  },
  {
    title: '文化成绩分数校考',
    key: 'culturalScoreXk',
    width:150,
    type: JVxeTypes.inputNumber,
  },
  {
    title: '专业成绩分数校考',
    key: 'specialScoreXk',
    width:150,
    type: JVxeTypes.inputNumber
  }
]);

// 查询url地址
enum Api {
  getData = '/yx/yxHistoryScoreControlLine/list',
  // 模拟保存单行数据（即时保存）
  saveRow = '/yx/yxHistoryScoreControlLine/edit',
  // 模拟保存整个表格的数据
  saveAll = '/yx/yxHistoryScoreControlLine/saveAll',
  deleteBatch = '/yx/yxHistoryScoreControlLine/deleteBatch',
}

loadData();

async function searchQuery(){
  pagination.current = 1
  loadData()
}
async function searchReset(){
  pagination.current = 1
  queryParam.year = ''
  queryParam.category = ''
  queryParam.professionalCategory = ''
  loadData()
}

// 加载数据
async function loadData() {
  loading.value = true;
  // 调用查询数据接口
  await defHttp
    .get({
      // 请求地址
      url: Api.getData,
      // 封装查询条件
      params: {
        year:queryParam.year,
        category:queryParam.category,
        professionalCategory:queryParam.professionalCategory,
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
      },
    })
    .then((result) => {
      // 后台查询回来的 total，数据总数量
      pagination.total = result.total;
      // 将查询的数据赋值给 dataSource
      dataSource.value = result.records;
      // 重置选择
      selectedRows.value = [];
    })
    .finally(() => {
      // 这里是无论成功或失败都会执行的方法，在这里关闭loading
      loading.value = false;
    });
}

// 【整体保存】点击保存按钮时触发的事件
function handleTableSave({ $table, target }) {
  // 校验整个表格
  $table.validate().then((errMap) => {
    // 校验通过
    if (!errMap) {
      // 获取所有数据
      let tableData = target.getTableData();
      console.log('当前保存的数据是：', tableData);
      // 获取新增的数据
      let newData = target.getNewData();
      console.log('-- 新增的数据：', newData);
      // 获取删除的数据
      let deleteData = target.getDeleteData();
      console.log('-- 删除的数据：', deleteData);
      // 【模拟保存】
      loading.value = true;
      defHttp
        .post({
          url: Api.saveAll,
          params: tableData,
        })
        .then(() => {
          createMessage.success(`保存成功！`);
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

// 触发单元格删除事件
function handleTableRemove(event) {
  // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
  console.log('待删除的数据: ', event.deleteRows);
  // 也可以只传ID，因为可以根据ID删除
  let deleteIds = event.deleteRows.map((row) => row.id);
  console.log('待删除的数据ids: ', deleteIds);
  // 模拟请求后台删除
  loading.value = true;
  window.setTimeout(() => {
    defHttp
      .delete({
        url: Api.deleteBatch,data:{ids:deleteIds.join(',')}
      },{joinParamsToUrl: true})
      .then((res) => {
        createMessage.success('删除成功');
        //// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
        event.confirmRemove();
      })
      .finally(() => {
        loading.value = false;
      });
  }, 1000);
}

// 单元格编辑完成之后触发的事件
function handleEditClosed(event) {
  let { $table, row, column } = event;
  let field = column.property;
  // 判断单元格值是否被修改
  if ($table.isUpdateByRow(row, field)) {
    // 校验当前行
    $table.validate(row).then((errMap) => {
      // 校验通过
      if (!errMap) {
        // 【模拟保存】
        let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
        console.log('即时保存数据：', row);
        defHttp
          .put({
            url: Api.saveRow,
            params: row,
          })
          .then((res) => {
            createMessage.success(`"${column.title}"保存成功！`);
            // 局部更新单元格为已保存状态
            $table.reloadRow(row, null, field);
          })
          .finally(() => {
            hideLoading();
          });
      }
    });
  }
}

// 当分页参数变化时触发的事件
function handlePageChange(event) {
  // 重新赋值
  pagination.current = event.current;
  pagination.pageSize = event.pageSize;
  // 查询数据
  loadData();
}

// 当选择的行变化时触发的事件
function handleSelectRowChange(event) {
  selectedRows.value = event.selectedRows;
}
</script>

<style scoped></style>
