<template>
  <div class="process-top">
    <a-button type="primary" @click="addEvent" class="!rounded"> 添加消息推送 </a-button>
  </div>
  <div :class="prefixCls" style="height: 300px">
    <a-table
      :columns="columns"
      :data-source="configs"
      :pagination="false"
      :key="tableKey"
      size="middle"
    >
      <template #headerCell="{ column }">
        <div v-if="column.dataIndex === 'sort'" class="header-cell__custom-title"
          ><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fangxiang1" /></svg
        ></div>
        <div v-else class="header-cell__custom-title">{{ column.title }}</div>
      </template>
      <template #bodyCell="{ column, record, index }">
        <div v-if="column.dataIndex === 'sort'">
          <svg :class="['icon', 'draggable-icon']" aria-hidden="true" style="cursor: move">
            <use xlink:href="#icon-paixu" />
          </svg>
        </div>
        <template v-if="column.dataIndex === 'type'">
          <a-select v-model:value="record[column.dataIndex]">
            <a-select-option :value="1">
              {{ t('推送消息') }}
            </a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex === 'operateConfig'">
          <SelectPushMessage
            v-if="record.type === 1"
            style="width: 100%"
            v-model="record['messageConfig']"
            :need-hide-components="true"
          />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div class="text-[#ff8080]" @click="deleteEvent(index)">删除</div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import SelectPushMessage from '/@bpmn/components/arguments/SelectPushMessage.vue';
  import { isNullAndUnDef } from '/@/utils/is';
  import { useI18n } from '/@/hooks/web/useI18n';
  import Sortable from 'sortablejs';
  import { cloneDeep } from 'lodash-es';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  const props = defineProps({
    noticeMessageConfigs: {
      type: Array,
      default: () => [],
    },
  });
  const emits = defineEmits(['update:noticeMessageConfigs']);

  const { t } = useI18n();
  const columns = ref([
    {
      dataIndex: 'sort',
      width: 50,
      align: 'center',
    },
    {
      title: t('类别'),
      dataIndex: 'type',
      align: 'center',
    },
    {
      title: t('配置'),
      dataIndex: 'operateConfig',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'action',
      width: 88,
      align: 'center',
    },
  ]);
  const configs = ref(props.noticeMessageConfigs);
  const tableKey = ref(0);

  watch(
    () => configs.value,
    (val) => {
      emits('update:noticeMessageConfigs', val);
    },
    {
      deep: true,
    },
  );

  watch(
    () => configs.value,
    () => {
      if (configs.value.length > 0) {
        nextTick(() => {
          const tbody: any = document.querySelector('.table-box .ant-table-tbody');
          Sortable.create(tbody, {
            handle: '.draggable-icon',
            onEnd: ({ oldIndex, newIndex }) => {
              if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || newIndex === oldIndex) {
                return;
              }
              const columns = cloneDeep(configs.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);
              }
              configs.value = cloneDeep(columns);
              tableKey.value++;
            },
          });
        });
      }
    },
    { deep: true, immediate: true },
  );

  const addEvent = () => {
    configs.value.push({
      type: 1,
      messageConfig: {},
    });
  };

  const deleteEvent = (index) => {
    configs.value.splice(index, 1);
  };
</script>
<style lang="less" scoped>
  .process-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 10px 10px 0;

    .process-title {
      line-height: 18px;
      padding-left: 6px;
      border-left: 6px solid #5e95ff;
    }
  }

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