<template>
  <a-layout style="height: 300px">
    <a-layout-content id="tableID-swimlane" style="width: 360px;border: 1px solid #e8e8e8;border-left: 0px;">
      <lt-a-table :data-source="dataSource" :columns="getCurrentCols" bordered :pagination="false" :showToolBar="false"
        :rowKey="rowKey" class="drag-table" childrenColumnName=" ">
      </lt-a-table>
    </a-layout-content>
    <a-layout-footer
      style="height: 40px;padding: 5px 24px;text-align: center;border: 1px solid #e8e8e8;border-top: 0px;">
      <a-button type="primary" @click="handleOK">
        {{ t("LongtecProCessDraw.confirm") }}
      </a-button>
      <a-button @click="handleCancel" style="margin-left: 10px;">
        {{ t("LongtecProCessDraw.cancel") }}
      </a-button>
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="tsx">
import { nextTick, ref, computed, onMounted } from 'vue';
import { Modal } from 'ant-design-vue';
import { HolderOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n()
import { cloneDeep } from "lodash-es"
import Sortable from "sortablejs";
import { GuidID } from "../commonMethods/commonMethods"

const emits = defineEmits(['onOK', "onCancel"])
const tableID = GuidID()

const props = defineProps({
  mxgraph: {
    type: Object,
    default() {
      return {};
    },
  },
  currentParentID: {
    type: Number || String,
  },
  rowKey: {
    type: String,
    default: "id",
  },
})

const showCols = [
  {
    title: " ",
    dataIndex: "sort",
    width: 40,
  },
  {
    title: "名称",
    dataIndex: "RecipeStyleName",
    width: 100,
  },
]

const dataSource = ref([])
const originDataSource = ref([])
const getCurrentCols = computed(() => {
  const showLocalCols = cloneDeep(showCols);
  for (const i in showLocalCols) {
    if (showLocalCols[i].dataIndex == "sort") {
      //@ts-ignore
      showLocalCols[i].customRender = ({ record, index }: any) => {
        //@ts-ignore
        return <HolderOutlined />;
      };
    } else {
      //@ts-ignore
      showLocalCols[i].customRender = ({ record, index }: any) => {
        return record[showLocalCols[i].dataIndex];
      };
    }
  }
  return showLocalCols;
});

const initDataSource = function () {
  if (!props.mxgraph) {
    return;
  }
  const model = props.mxgraph.getModel();
  const cells = model.cells;
  dataSource.value = []
  originDataSource.value = []
  for (const j in cells) {
    // var temp = cells[i].cellType;
    if (
      cells[j].cellType == "Channel" &&
      cells[j].currentParentID == props.currentParentID
    ) {
      //@ts-ignore
      dataSource.value.push(cells[j]);
    }
  }
  originDataSource.value = cloneDeep(dataSource.value)

}

const rowDrop = function () {
  if (document.querySelector(`#tableID-swimlane .ant-table-tbody`)) {
    Sortable.create(
      document.querySelector(`#tableID-swimlane .ant-table-tbody`),
      {
        handle: ".ant-table-row", // 行元素
        animation: 150,
        onEnd: ({ newIndex, oldIndex }: any) => {
          if (oldIndex === newIndex) return;
          // 创建数据副本以避免响应式问题
          const from = oldIndex - 1;
          const to = newIndex - 1;
          const newData = [...dataSource.value];
          const [movedRow] = newData.splice(from, 1);
          newData.splice(to, 0, movedRow);
          dataSource.value = newData;
          nextTick(() => {
            // handleSorteData(dataSource.value);
          });
        },
      }
    );
  }
};

const handleOK = () => {
  // 检查dataSource是否与originDataSource相等，如果相等则直接返回
  if (dataSource.value.length === originDataSource.value.length) {
    let isEqual = true;
    for (let i = 0; i < dataSource.value.length; i++) {
      //@ts-ignore
      if (dataSource.value[i].id !== originDataSource.value[i].id) {
        isEqual = false;
        break;
      }
    }
    if (isEqual) {
      handleCancel()
      return;
    }
  }

  const modal = Modal.confirm({
    title: t("LongtecProCessDraw.waring"),
    okText: t("LongtecProCessDraw.confirm"),
    cancelText: t("LongtecProCessDraw.cancel"),
    okType: "primary",
    zIndex: 10000,
    content: t("LongtecProCessDraw.changeSwinlanePositionWarn"),
    onOk: () => {
      emits("onOK", dataSource.value);
      modal.destroy();
    },
    onCancel: () => {
      modal.destroy();
    }
  })
}

const handleCancel = () => {
  emits("onCancel");
}

onMounted(() => {
  initDataSource()
  nextTick(() => {
    rowDrop();
  });
});



</script>

<style></style>