<template>
  <div class="list-box" v-if="showPanel">
    <div class="opr-box">
      <div class="button-box">
        <a-button type="primary" size="small" @click="add" class="!rounded">{{
          t('添加选择')
        }}</a-button>
      </div>
    </div>
    <div :class="prefixCls" v-if="formInfo.paramConfigs">
      <a-table
        :dataSource="formInfo.paramConfigs"
        :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: 128px; font-size: 12px"
              @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'">
            <a-input v-model:value="record.value" :placeholder="t('请填写')" style="width: 128px" />
          </template>
          <template v-if="column.key === 'point'">
            <a-select
              v-model:value="record.point"
              :placeholder="t('请选择类型')"
              style="width: 128px"
            >
              <a-select-option
                style="font-size: 12px"
                v-for="item in pointOptions"
                :key="item.id"
                :value="item.id"
              >
                {{ item.label ? item.label : item.id }}
              </a-select-option>
            </a-select>
          </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 { randomNum } from '/@bpmn/util/random';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import useStateInfo from './../../hooks/useStateInfo';
  // import { isNullAndUnDef } from '/@/utils/is';
  // import { cloneDeep } from 'lodash-es';
  import { SelectNodeResultsType } from '/@/model/ruleProcessConfig';
  import { Edge } from '@vue-flow/core';
  const { showPanel, formInfo, getNextEdges } = useStateInfo();
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const configColumns = [
    // {
    //   title: t('排序'),
    //   dataIndex: 'sort',
    //   key: 'sort',
    //   align: 'center',
    //   width: 78,
    // },
    {
      title: t('条件类型'),
      dataIndex: 'type',
      key: 'type',
      width: 128,
      align: 'center',
    },
    {
      title: t('结果值'),
      dataIndex: 'value',
      key: 'value',
      // width: 78,
      align: 'center',
    },
    {
      title: t('指向'),
      dataIndex: 'point',
      key: 'point',
      width: 128,
      align: 'center',
    },

    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      width: 60,
      align: 'center',
    },
  ];
  let typeOptions = [
    {
      id: SelectNodeResultsType.NODE,
      name: t('节点结果'),
    },
    {
      id: SelectNodeResultsType.API,
      name: 'API结果',
    },
    {
      id: SelectNodeResultsType.CUSTOM,
      name: '自定义结果',
    },
    {
      id: SelectNodeResultsType.VALUE,
      name: '变量值',
    },
    {
      id: SelectNodeResultsType.DEFAULT,
      name: '默认结果',
    },
  ];
  const tableKey = ref(0);
  // watch(
  //   () => formInfo.value?.paramConfigs,
  //   (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.paramConfigs);
  //             const oldColumns = cloneDeep(formInfo.value.paramConfigs);
  //             columns[newIndex] = oldColumns[oldIndex];
  //             columns[oldIndex] = oldColumns[newIndex];
  //             formInfo.value.paramConfigs = cloneDeep(columns);
  //             tableKey.value++;
  //           },
  //         });
  //       });
  //     }
  //   },
  //   {
  //     deep: true,
  //     immediate: true,
  //   },
  // );
  let pointOptions = ref([] as Edge[]);

  onMounted(() => {
    pointOptions.value = getNextEdges();
    console.log('pointOptions.value : ', pointOptions.value);
  });
  // 新增
  function add() {
    formInfo.value.paramConfigs.push({
      id: randomNum(),
      type: SelectNodeResultsType.API,
      point: '',
      value: '',
    });
  }
  //删除
  function deleteItem(index: number) {
    formInfo.value.paramConfigs.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  .list-box {
    width: 500px;

    .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>
