<template>
    <a-card title="" :bordered="false">
      <BasicTable @register="registerTable" @edit-change="onEditChange">
        <template #action="{ record, column }">
          <TableAction :actions="createActions(record, column)" />
        </template>
      </BasicTable>
    </a-card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
import { optionsListApi } from '/@/api/demo/select';

import { treeOptionsListApi } from '/@/api/demo/tree';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '/@/hooks/web/useMessage';
import {DemoListGetResultModel, DemoParams} from "@/api/demo/model/tableModel";
import {defHttp} from "@/utils/http/axios";

const columns: BasicColumn[] = [
  {
    title: '学校代码',
    align:"center",
    dataIndex: 'schoolCode',
    editRow: true,
    editRule: true,
    editComponent: 'InputNumber',
    /*editRule: async (text) => {
      if (text === '2') {
        return '不能输入该值';
      }
      return '';
    },*/
    width: 150,
  },
  {
    title: '学校名称',
    align:"center",
    dataIndex: 'schoolName',
    editRow: true,
    editRule: true,
    width: 150,
  },
  {
    title: '专业代码',
    align:"center",
    dataIndex: 'majorCode',
    editRow: true,
    editRule: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '专业名称',
    align:"center",
    dataIndex: 'majorName'
  },
  {
    title: '招生代码',
    align:"center",
    dataIndex: 'enrollmentCode',
    editRow: true,
    editRule: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '专业类型',
    align:"center",
    dataIndex: 'majorType'
  },
  {
    title: '专业类别子级',
    align:"center",
    dataIndex: 'majorTypeChild'
  },
  {
    title: '批次',
    align:"center",
    dataIndex: 'batch',
    editRow: true,
    editRule: true,
    editComponent: 'Input',
    width: 150,
  },
  {
    title: '年份',
    align:"center",
    dataIndex: 'year'
  },
  {
    title: '科类(文科/理科)',
    align:"center",
    dataIndex: 'category'
  },
  {
    title: '录取方式',
    align:"center",
    dataIndex: 'rulesEnrollProbability'
  },
  {
    title: '录取概率计算规则运算符',
    align:"center",
    dataIndex: 'probabilityOperator'
  },
  {
    title: '省控线',
    align:"center",
    dataIndex: 'controlLine',
    editRow: true,
    editRule: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '录取线',
    align:"center",
    dataIndex: 'admissionLine',
    editRow: true,
    editRule: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '招生人数',
    align:"center",
    dataIndex: 'enrollNum',
    editRow: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '录取数',
    align:"center",
    dataIndex: 'admissionNum',
    editRow: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '一志愿录取数',
    align:"center",
    dataIndex: 'oneVolunteerAdmissionNum',
    editRow: true,
    editComponent: 'InputNumber',
    width: 150,
  },
  {
    title: '备注',
    align:"center",
    dataIndex: 'detail',
    editRow: true,
    editComponent: 'Input',
    width: 150,
  },
  //=================================
  /*{
    title: '下拉框',
    dataIndex: 'name3',
    editRow: true,
    editComponent: 'Select',
    editComponentProps: {options: [{label: 'Option1', value: '1',},{label: 'Option3', value: '3',},],},
    width: 200,
  },*/
  /*{
    title: '远程下拉',
    dataIndex: 'name4',
    editRow: true,
    editComponent: 'ApiSelect',
    editComponentProps: {api: optionsListApi, resultField: 'list', labelField: 'name', valueField: 'id',},
    width: 200,
  },*/
  {
    title: '勾选框',
    dataIndex: 'name5',
    editRow: true,

    editComponent: 'Checkbox',
    editValueMap: (value) => {
      return value ? '是' : '否';
    },
    width: 100,
  },
  {
    title: '开关',
    dataIndex: 'name6',
    editRow: true,
    editComponent: 'Switch',
    editValueMap: (value) => {
      return value ? '开' : '关';
    },
    width: 100,
  },
];

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

export const demoListApi = (params: DemoParams) =>
  defHttp.get<DemoListGetResultModel>({
    url: Api.getData,
    params,
    headers: {
      ignoreCancelToken: true,
    },
  });


export default defineComponent({
  components: { BasicTable, TableAction },
  setup() {
    const { createMessage: msg } = useMessage();
    const currentEditKeyRef = ref('');
    const [registerTable] = useTable({
      title: '可编辑行示例',
      titleHelpMessage: ['本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变'],
      api: demoListApi,
      columns: columns,
      showIndexColumn: false,
      showTableSetting: true,
      tableSetting: { fullScreen: true },
      actionColumn: {
        width: 160,
        title: 'Action',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

    function handleEdit(record: EditRecordRow) {
      currentEditKeyRef.value = record.key;
      record.onEdit?.(true);
    }

    function handleCancel(record: EditRecordRow) {
      currentEditKeyRef.value = '';
      record.onEdit?.(false, false);
    }

    async function handleSave(record: EditRecordRow) {
      // 校验
      msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
      const valid = await record.onValid?.();
      if (valid) {
        try {
          const data = cloneDeep(record.editValueRefs);
          console.log(data);
          //TODO 此处将数据提交给服务器保存
          // ...
          // 保存之后提交编辑状态
          const pass = await record.onEdit?.(false, true);
          if (pass) {
            currentEditKeyRef.value = '';
          }
          msg.success({ content: '数据已保存', key: 'saving' });
        } catch (error) {
          msg.error({ content: '保存失败', key: 'saving' });
        }
      } else {
        msg.error({ content: '请填写正确的数据', key: 'saving' });
      }
    }

    function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
      if (!record.editable) {
        return [
          {
            label: '编辑',
            disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
            onClick: handleEdit.bind(null, record),
          },
        ];
      }
      return [
        {
          label: '保存',
          onClick: handleSave.bind(null, record, column),
        },
        {
          label: '取消',
          popConfirm: {
            title: '是否取消编辑',
            confirm: handleCancel.bind(null, record, column),
          },
        },
      ];
    }

    function onEditChange({ column, value, record }) {
      // 本例
      if (column.dataIndex === 'id') {
        record.editValueRefs.name4.value = `${value}`;
      }
      console.log(column, value, record);
    }

    return {
      registerTable,
      handleEdit,
      createActions,
      onEditChange,
    };
  },
});
</script>
