<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      destroyOnClose
      @register="registerModal"
      title="班次配置"
      width="60%"
      @ok="handleSubmit"
      :showFooter="true"
    >
      <div class="mb-4">
        <a-button type="primary" shape="round" @click="handleAdd">
          <template #icon>
            <PlusOutlined />
          </template>
          添加
        </a-button>
      </div>
      <BasicTable @register="registerTable" @edit-change="callEditChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  auth: '',
                  icon: 'icon-xt-details_delete_default|iconfont',
                  tooltip: '删除',
                  popConfirm: {
                    title: '是否取消删除',
                    placement: 'left',
                    confirm: handleDel.bind(null, record, column),
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { nextTick, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { nanoid } from 'nanoid';
  import { getSailings, sailingsEdit } from '/@/api/biz/management/working';
  import { sailingsEditColumns } from './data';
  import { useMessage } from '/@/hooks/web/useMessage';
  const tableDatas = ref([]);
  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
    setModalProps({ confirmLoading: false, canFullscreen: false });
    tableDatas.value = await getSailings();
    await nextTick();
    await setTableData(tableDatas.value);
  });
  const [registerTable, { setTableData, getDataSource }] = useTable({
    rowKey: 'sort',
    showIndexColumn: false,
    bordered: true,
    striped: false,
    pagination: false,
    maxHeight: 200,
    actionColumn: {
      width: 40,
      title: '操作',
      dataIndex: 'action',
    },
    dataSource: tableDatas.value,
    columns: sailingsEditColumns,
  });

  async function handleAdd() {
    tableDatas.value.push({
      endTime: '',
      name: '',
      startTime: '',
      sort: nanoid(5),
    });
    await nextTick();
    await setTableData(tableDatas.value);
  }

  // 保存班次配置，请求接口
  async function handleSubmit() {
    try {
      const values = getDataSource();
      const infoList = [];
      values.forEach(item => {
        infoList.push({
          name: item.name,
          startTime: item.startTime,
          endTime: item.endTime,
        });
      });
      const infos = {
        infos: infoList,
      };
      await sailingsEdit(infos);
      createMessage.success('班次编辑成功!');
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  // 删除当前行
  async function handleDel(record) {
    const data = getDataSource();
    const index = data.findIndex(item => item.sort === record.sort);
    tableDatas.value.splice(index, 1);
    await setTableData(tableDatas.value);
  }

  function callEditChange() {}
</script>
<style type="less" scoped>
  ::v-deep(.ant-btn-link) {
    color: rgb(61 65 85 / 100%);
  }
</style>
