<template>
  <div class="list-box" v-if="showPanel">
    <div class="opr-box">
      <div class="button-box">
        <a-button type="primary" size="small" @click.stop="add" class="!rounded">{{
          t('添加事件')
        }}</a-button>
      </div>
    </div>
    <div :class="prefixCls" v-if="formInfo.eventConfigs">
      <a-table
        :dataSource="formInfo.eventConfigs"
        :columns="configColumns"
        :pagination="false"
        :key="tableKey"
        size="middle"
        :class="`table-box`"
        ><template #headerCell="{ column }">
          <div class="header-cell__custom-title">{{ column.title }}</div>
        </template>
        <template #bodyCell="{ column, record, index }">
          <!-- <template v-if="column.key === 'sort'">
            <svg
              :class="['icon', `draggable-icon`]"
              aria-hidden="true"
              style="cursor: move; display: inline-block"
            >
              <use xlink:href="#icon-paixu" />
            </svg>
          </template> -->
          <template v-if="column.key === 'type'">
            <a-select
              v-model:value="record.type"
              :placeholder="t('请选择类型')"
              style="width: 160px"
              @change="
                () => {
                  record.value = null;
                }
              "
            >
              <a-select-option
                style="font-size: 12px"
                v-for="item in typeOptions"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </template>
          <template v-if="column.key === 'value'">
            <ScriptApiSelect
              v-if="record.type === NodeEventExType.API"
              style="width: 100%"
              v-model="record['apiConfig']"
            />
            <SelectPushMessage
              v-if="record.type === NodeEventExType.PUSH_MESSAGE"
              style="width: 100%"
              v-model="record['messageConfig']"
              :need-hide-components="true"
            />
            <SelectScriptingEngine
              v-if="record.type === NodeEventExType.SCRIPTING_ENGINE"
              style="width: 100%"
              v-model="record['scriptConfig']"
              :need-hide-components="true"
            />
          </template>
          <template v-if="column.key === 'operation'">
            <div class="text-[#FF5461]" @click="deleteItem(index)">删除</div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  // import { nextTick, onMounted, ref, watch } from 'vue';
  // import Sortable from 'sortablejs';
  import { NodeEventExType } from '/@/enums/workflowEnum';
  import { randomNum } from '/@bpmn/util/random';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import useStateInfo from './../../hooks/useStateInfo';
  import ScriptApiSelect from './SelectScriptApiSelect.vue';
  import SelectPushMessage from './SelectPushMessage.vue';
  import SelectScriptingEngine from './SelectScriptingEngine.vue';
  // import { isNullAndUnDef } from '/@/utils/is';
  // import { cloneDeep } from 'lodash-es';
  const { showPanel, formInfo } = useStateInfo();
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const configColumns = [
    // {
    //   title: t('排序'),
    //   dataIndex: 'sort',
    //   key: 'sort',
    //   align: 'center',
    //   width: 80,
    // },
    {
      title: t('事件类型'),
      dataIndex: 'type',
      key: 'type',
      width: 160,
      align: 'center',
    },
    {
      title: t('配置'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      width: 88,
      align: 'center',
    },
  ];
  let typeOptions = [
    {
      id: NodeEventExType.API,
      name: t('执行API'),
    },
    {
      id: NodeEventExType.PUSH_MESSAGE,
      name: '推送消息',
    },
    {
      id: NodeEventExType.SCRIPTING_ENGINE,
      name: '脚本引擎',
    },
  ];
  const tableKey = ref(0);
  // watch(
  //   () => formInfo.value?.eventConfigs,
  //   (val) => {
  //     if (val && val.length) {
  //       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(formInfo.value.eventConfigs);
  //             const oldColumns = cloneDeep(formInfo.value.eventConfigs);
  //             columns[newIndex] = oldColumns[oldIndex];
  //             columns[oldIndex] = oldColumns[newIndex];
  //             formInfo.value.eventConfigs = cloneDeep(columns);
  //             tableKey.value++;
  //           },
  //         });
  //       });
  //     }
  //   },
  //   {
  //     deep: true,
  //     immediate: true,
  //   },
  // );
  onMounted(() => {});
  // 新增
  function add() {
    if (formInfo.value.eventConfigs && Array.isArray(formInfo.value.eventConfigs)) {
      formInfo.value.eventConfigs.push({
        id: randomNum(),
        type: NodeEventExType.API,
        apiConfig: {},
        messageConfig: {},
        scriptConfig: {},
      });
    }
  }
  //删除
  function deleteItem(index: number) {
    formInfo.value.eventConfigs.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .opr-box {
      display: flex;
      justify-content: flex-end;
      margin: 0 10px 10px;
    }
  }

  .delete-icon {
    color: @clear-color;
  }

  .pop-desc {
    font-size: 12px;
    color: rgb(0 0 0 / 40%);
  }

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