<template>
  <a-layout style="height: 100%; padding: 5px; padding-left: 0px">
    <a-layout-content
      style="padding: 0px; height: 100%; border: 1px solid #d1dbe5"
    >
      <a-card
        class="box-card"
        style="padding: 0px; height: 100%"
        :body-style="{ padding: '5px', height: '100%' }"
      >
        <lt-a-table
          :data-source="tableData"
          style="width: 100%; margin-bottom: 20px"
          :searchBox="false"
          bordered
          stripe
          row-key="id"
          :dataFilter="dataFilter"
          :columnFilter="columnFilter"
          :isExpandTable="true"
          :pagination="false"
          :defaultExpandAllRows="true"
          :columns="columns"
          @row-click="handleClick"
          size="small"
        >
        </lt-a-table>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="tsx">
import { events } from "../../../bus";
import { computed, ref, watch, onMounted } from "vue";
//@ts-ignore
import { cols } from "./cols";
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  showTreeOperate: {
    type: Boolean,
    default: true,
  },
  ifCanBeEdite: {
    type: Boolean,
    default: false,
  },
});

let tableData = ref([]);
let columnFilter = ref([
  "id",
  {
    prop: "cellType",
    type: "ComBox",
    options: [
      { label: "投料位置", value: "Channel" },
      { label: "工艺包", value: "Layer" },
      { label: "总线", value: "Bus" },
      { label: "连接线", value: "Line" },
      { label: "与", value: "AndLogic" },
      { label: "或", value: "OrLogic" },
      { label: "QC", value: "Qc" },
      { label: "结束工艺", value: "End" },
      { label: "复杂条件", value: "ComplexCondition" },
      { label: "条件", value: "Condition" },
      { label: "标准工艺", value: "Common" },
      { label: "子过程", value: "Sub" },
      { label: "子过程返回", value: "Return" },
      { label: "空工艺", value: "NULL" },
      { label: "调拨工艺", value: "Allot" },
      { label: "投料工艺组", value: "Table" },
    ],
  },
  "keyWord",
  "EditFunName",
  "Status",
  "EditMatName",
  "value",
]);
let graph = ref(null);

const columns = computed(() => {
  let curCols = [] as any;
  $.extend(true, curCols, cols);
  let temp = {
    title: "操作",
    align: "center",
    dataIndex: "operate",
    fixed: "right",
    width: 65,
    customRender: ({ record }: any) => {
      return getDelBtn(record);
    },
  };
  if (props.ifCanBeEdite == true) {
    curCols.push(temp);
  }

  return curCols;
});

watch(
  () => props.formData,
  () => {
    initFormVal();
  },
);

const getDelBtn = function (record: any) {
  if (typeof record.cellType == "undefined" || record.cellType == "") {
    return "";
  }
  if (record.cellType == "keyWords" || record.cellType == "Bus") {
    return "";
  }
  if (record.Status == 2) {
    return "";
  }
  if (record.cellType != "Common" && record.Status == 1) {
    return "";
  }
  return (
    <div>
      <em
        class="icon icon-edit"
        title="编辑"
        size="small"
        style="height: 24px; color: dodgerblue;cursor: pointer;"
        onClick={() => {
          handleEditCell(record);
        }}
      ></em>
      <em
        class="icon icon-trash"
        title="删除"
        size="small"
        style="height: 24px; color: dodgerblue;cursor: pointer;"
        onClick={() => {
          handleDelCell(record);
        }}
      ></em>
    </div>
  );
};

const initFormVal = function () {
  const newValue = props.formData;
  if (newValue && typeof newValue != "undefined") {
    if (typeof newValue.cell == "undefined") {
      return;
    }
    graph.value = newValue.graph;
    if (typeof newValue.cell.root != "undefined") {
      tableData.value = [];
      //@ts-ignore
      tableData.value.push(newValue.cell.root);
      let tempData = tableData.value[0];
      //@ts-ignore
      tempData.key = tempData.id;
      //@ts-ignore
      formatTableData(tempData.children);
    }
  }
};

const formatTableData = function (data: any) {
  for (let i = 0; i < data.length; i++) {
    data[i].key = data[i].id;
    if (data[i].children) {
      formatTableData(data[i].children);
    }
  }
};

const defaultKeys = computed(() => {
  let tempData = [] as any;
  $.extend(true, tempData, tableData.value);
  let tempArray = [] as any;
  let idArray = [];
  tempArray = tempArray.concat(tempData);
  while (tempArray.length) {
    const temp = tempArray.shift();
    if (temp.cellType != "Layer") {
      idArray.push(temp.id);
    }
    if (temp.children != undefined) {
      tempArray = tempArray.concat(temp.children);
    }
  }
  console.log(idArray);
  return idArray;
});

const dataFilter = function (params: any) {
  let showDatas = [] as any;
  $.extend(true, showDatas, params);
  for (let i = 0; i < showDatas.length; i++) {
    setTableChild(showDatas[i]);
  }

  return showDatas;
};
const setTableChild = function (parama: any) {
  //设置投料组显示信息
  if (parama.children) {
    if (typeof parama.cellType == "undefined" || parama.cellType != "Table") {
      for (let i = 0; i < parama.children.length; i++) {
        setTableChild(parama.children[i]);
      }
    } else {
      let bRet = ifConEmptyText(parama.children);
      if (bRet) {
        return;
        //如果是过滤的数据，则认为不做任何处理
      }
      if (
        parama.children.length < parama.EditCols.length + 1 ||
        bRet == false
      ) {
        //为了防止重复生成图元
        for (let j = 0; j < parama.EditCols.length; j++) {
          //@ts-ignore
          let vertex = graph.value.insertVertex(
            parama,
            null,
            "",
            0,
            0,
            0,
            0,
            "shape=text;",
          );
          for (let k in parama.EditCols[j]) {
            vertex[k] = parama.EditCols[j][k];
          }
          vertex.keyWord = parama.EditCols[j].DetailOrderKey;
          vertex.DetailOrderKey = parama.EditCols[j].DetailOrderKey;
          vertex.cellType = "emptyText"; //给新增加的图元加一个类别
        }
      }
    }
  }
};
const ifConEmptyText = function (sTexts: any) {
  //判断子元素里面是否有插入的图元
  let bRet = false;
  for (let i = 0; i < sTexts.length; i++) {
    if (sTexts[i].cellType == "emptyText") {
      bRet = true;
      break;
    }
  }
  return bRet;
};
const handleEditCell = function (row: any) {
  var propertyData = {
    data: row,
    type: "EditCell", //编辑图元
  };
  events.emit("porpertyChange", propertyData);
};
const handleClick = function (row: any, dataIndex: number, evt: any) {
  let parent = null;
  if (row.parent) {
    if (row.parent.cellType) {
      if (row.parent.cellType == "Table") {
        parent = row.parent;
      }
    }
  } else {
    return;
  }

  var propertyData = {
    data: parent ? parent : row,
    type: "SelectCell", //编辑图元
  };
  events.emit("porpertyChange", propertyData);
};
const handleDelCell = function (row: any) {
  var propertyData = {
    data: row,
    type: "delCell", //删除图元
  };
  events.emit("porpertyChange", propertyData);
};

onMounted(() => {
  initFormVal();
});
</script>

<style scoped>
.header-bread {
  margin-top: 8px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
</style>
