<template>
  <BasicModal
    @register="registerModal"
    title="审批专员"
    :width="600"
    fixedHeight
    destroyOnClose
    v-bind="$attrs"
    @ok="handleSubmit"
    ><div class="pt-10px" style="max-height: calc(100% - 52px); overflow: auto">
      <a-table :key="tableKey" :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'index'"> {{ index + 1 }}</template>
          <template v-else-if="column.dataIndex === 'sort'">
            <svg class="icon sortDraggable-icon" aria-hidden="true" style="cursor: move">
              <use xlink:href="#icon-fangxiang1" />
            </svg>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <span @click="handleDelete(index)" style="color: #ed6f6f">删除</span>
          </template>
          <template v-else>
            <a-input
              v-model:value="record[column.dataIndex]"
              :placeholder="`请填写${column.title}`"
            />
          </template>
        </template>
      </a-table>
    </div>
    <div class="p-10px"
      ><a-button
        type="dashed"
        block
        @click="handleAdd"
        class="!rounded"
        style="border: 1px dashed #ddd"
      >
        <PlusOutlined />
        {{ t('新增') }}
      </a-button></div
    >
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { updateApprovalSpe } from '/@/api/system/department';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import Sortable from 'sortablejs';
  import { isNullAndUnDef } from '/@/utils/is';
  import { cloneDeep } from 'lodash-es';

  const { t } = useI18n();

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 50,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 58,
    },
    {
      title: '专员名称',
      dataIndex: 'name',
      width: 196,
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 88,
      align: 'center',
    },
  ];
  defineEmits(['register']);
  const { notification } = useMessage();
  const tableKey = ref<number>(0);
  const data = ref<any[]>([]);

  watch(
    () => data.value,
    (val) => {
      if (val && val.length) {
        nextTick(() => {
          const tbody: any = document.querySelector('.table-box .ant-table-tbody');
          if (!tbody) return;
          Sortable.create(tbody, {
            handle: '.sortDraggable-icon',
            onEnd: ({ oldIndex, newIndex }) => {
              if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || newIndex === oldIndex) {
                return;
              }
              const columns = cloneDeep(data.value);
              if (oldIndex > newIndex) {
                columns.splice(newIndex, 0, columns[oldIndex]);
                columns.splice(oldIndex + 1, 1);
              } else {
                columns.splice(newIndex + 1, 0, columns[oldIndex]);
                columns.splice(oldIndex, 1);
              }
              data.value = cloneDeep(columns);
              tableKey.value++;
            },
          });
        });
      }
    },
    {
      deep: true,
      immediate: true,
    },
  );

  const [registerModal, { closeModal }] = useModalInner(async (info) => {
    data.value = info.datasource;
  });

  const handleDelete = async (index) => {
    data.value.splice(index, 1);
  };

  const handleSubmit = async () => {
    await updateApprovalSpe(data.value);
    notification.success({
      message: t('提示'),
      description: t('添加成功'),
    });
    closeModal();
  };

  const handleAdd = () => {
    data.value.push({
      name: '',
      remark: '',
    });
  };
</script>
<style lang="less" scoped>
  :deep(.ant-table-thead) {
    height: 50px;

    tr {
      th {
        padding: 0;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        background: #f7fbff;
      }
    }
  }

  :deep(.ant-table-tbody) {
    tr {
      td {
        padding: 9px;
        height: 50px;
        text-align: center;
        border-bottom: 1px solid #ddd;

        .ant-input {
          border-radius: 4px;
          border: 1px solid #ddd;
        }
      }
    }
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
    display: inline-block;
  }
</style>
