<template>
  <a-layout style="height: 100%; padding: 5px; padding-left: 0px">
    <a-layout-content style="padding: 5px; height: 100%; border: 1px solid #d1dbe5">
      <a-card class="box-card" style="padding: 0px; height: 100%" :body-style='{ padding: "5px", height: "100%" }'>
        <lt-a-form contendPadding="5px" :fill="true" :fit="false" style="border-width: 0px; height: 100%">
          <a-form ref="refFormCondition" :inline="false" layout="vertical" :model="state.form" :inline-message="true"
            label-width="100px" style="width: 100%;" :labelCol="{
              span: 6
            }">
            <a-row style="
                                height: 36px;
                                font-size: 18px;
                                text-align: center;
                                background-color: aliceblue;
                             
                                border-bottom: 1px solid #d1dbe5;;
                              ">
              <a-col :span="17" style="height: 100%; padding: 5px">
                <div>执行分支</div>
              </a-col>
              <a-col :span="7" style="height: 100%; padding: 5px;border-left: 1px solid #d1dbe5;">
                <div>操作</div>
              </a-col>
            </a-row>
            <a-row v-if="state.showEmpty == false" style="width: 100%;">
              <a-row v-for="item in state.form" :key="item.index" style="width: 100%; 
                                border-bottom: 1px solid #d1dbe5;">
                <a-row style="width: 100%;">
                  <a-col :span="17" style="padding: 5px; height: 100%">
                    <a-select v-model:value="item.ExecId" style="width: 100%">
                      <a-select-option v-for="item in state.selectOption" :key="item.id" :value="item.id">{{ item.label
                      }}</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="7"
                    style="padding: 10px; height: 100%; text-align: center;border-left: 1px solid #d1dbe5;">
                    <em class="icon icon-edit" aria-hidden="true" @click="handleEdit(item)" style="color: green"
                      title="编辑脚本"></em>
                    <em class="icon icon-times" aria-hidden="true" @click="handleClose()"
                      style="color: green; margin-left: 5px" title="关闭脚本编辑"></em>
                    <em class="icon icon-trash" aria-hidden="true" @click="handleClear(item)"
                      style="color: #ff9c00; margin-left: 5px" title="清除脚本"></em>
                  </a-col>
                </a-row>
                <a-row style="height: 375px;width: 100%;" v-if="state.editID == item.index">
                  <a-row style="height: 100%;width: 100%;">
                    <codeMirror v-model:scriptData="item.Script" :hintWords="ScriptVar" ref="refSacript">
                    </codeMirror>
                  </a-row>
                </a-row>
              </a-row>
            </a-row>

            <a-row v-if="state.showEmpty == true" style="
                                height: 50px;
                                text-align: center;
                                background: aliceblue;
                                font-size: 30px;
                                width: 100%;
                                
                              ">
              <span>
                请先选择执行分支
              </span>
            </a-row>
            <a-row v-if="state.showEmpty == false" style="padding: 10px;text-align: center;width: 100%;display: flex;">
              <div style="margin: auto;">
                <a-button v-on:click="handleConfirm" type="primary">
                  <template #icon>
                    <check-outlined />
                  </template>
                  确认</a-button>
                <a-button v-on:click="handleReset" style="margin-left: 10px;">
                  <template #icon>
                    <reload-outlined />
                  </template>
                  重置</a-button>
              </div>
            </a-row>
          </a-form>
        </lt-a-form>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
//@ts-ignore
import codeMirror from "../../../code/code-mirror.vue"; //脚本编辑器
import { nextTick, watch, reactive, onBeforeMount, PropType } from "vue"
import { Modal } from 'ant-design-vue';
import { events } from "../../../bus";
import { cloneDeep } from "lodash-es";

const emits = defineEmits(["closeParamForm"])
type functionOption = {
  FuncStyle: number
  FunctionCode: string
}
const props = defineProps({
  formData: {
    type: Object,
    default() {
      return null;
    },
  },
  DeviceOption: {
    type: Array,
  },
  receipFunction: Object,
  moduleType: {
    type: String,
    default: "Formular",
  },
  AllfunOption: {
    //所有工艺
    type: Array as PropType<functionOption[]>,
    default() {
      return [];
    },
  },
  ScriptVar: {
    type: Object,
    default() {
      return {};
    },
  },
})

type formStruct = {
  ExecId: string
  index: string
  Script: string
}

type comboxStruct = {
  id: string | number
  label: string
}

const state = reactive({
  form: [] as formStruct[],
  showEmpty: true,
  cellsArray: [], //分支元素
  selectOption: [] as comboxStruct[],
  editID: "",
  showRow: true,
  parentID: "",
  DetailOrderKey: "",
})

watch(
  state.form,
  () => {
    state.showRow = false;
    nextTick(() => (state.showRow = true));
  }, {
  deep: true
}
);
const handleEdit = function (item: any) {
  //编辑
  state.editID = item.index;
}
const handleClose = function () {
  state.editID = "";
}
const handleClear = function (item: any) {
  //清除脚本内容
  item.Script = "";
  state.editID = "";
}
const showFormStruct = function (data: any) {
  let temp = {};
  state.form = [];
  if (typeof data == "undefined" || data == "") {
    for (let i = 0; i < state.cellsArray.length; i++) {
      //@ts-ignore
      temp["Case" + (i + 1)] = {
        index: i + 1,
        // id: i + 1,
        //@ts-ignore
        ExecId: state.cellsArray[i].target.id,
        Script: "",
      };
    }
  } else {
    temp = cloneDeep(data)
    let n = 0;
    for (const j in data) {
      n++;
      data[j].index = n; //防止生成的徐海重复
    }
    temp = cloneDeep(data)
  }
  //@ts-ignore
  state.form = cloneDeep(temp);
}
const handleConfirm = function () {
  //确认修改数据
  let index = 0;
  let length = Object.getOwnPropertyNames(state.form).length;
  let bRet = false;
  for (const i in state.form) {
    index++;
    //@ts-ignore
    if (length == 2 && !state.form[i].Script) {
      //只有一个条件分支
      bRet = true;
      break;
    } else if (length == 3) {
      //两个条件执行分支
      //@ts-ignore
      if (index == 1 && !state.form[i].Script) {
        bRet = true;
        break;
      }
    } else if (length == 4) {
      //@ts-ignore
      if ((index == 1 || index == 2) && !state.form[i].Script) {
        bRet = true;
        break;
      }
    }
  }
  if (bRet) {
    Modal.warning({
      title: "警告",
      content: "行" + index + "条件脚本不能为空"
    })
    return;
  }

  const tempData = {
    EditFunName: getFunCodeByStyle(3),
    parentID: state.parentID,
    // DetailOrderKey: state.DetailOrderKey,
    Script: state.form,
  };

  const propertyData = {
    data: tempData,
    type: "Condition", //标准工艺
  };
  events.emit("porpertyChange", propertyData);

  emits("closeParamForm", 1);
}
const handleReset = function () {
  //初始化的时候，将页面初始化成初始结构

}
const getFunCodeByStyle = function (style: number) {
  let code = "";
  for (let i = 0; i < props.AllfunOption.length; i++) {
    if (props.AllfunOption[i].FuncStyle == style) {
      code = props.AllfunOption[i].FunctionCode;
      break;
    }
  }
  return code;
}


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

const initFormVal = function () {
  const _val = props.formData
  if (_val != null && _val != undefined) {
    if (_val.cell.cellType == "Condition") {
      state.showRow = false;
      state.DetailOrderKey = _val.cell.DetailOrderKey;
      const edges = _val.cell.edges;
      if (edges == null) {
        state.showEmpty = true;
        return;
      }
      state.cellsArray = []; //每次使用图元之前,先清空数组
      state.selectOption = []; //清空数组
      for (let i = 0; i < edges.length; i++) {
        if (edges[i].source.id == _val.cell.id) {
          //@ts-ignore
          state.cellsArray.push(edges[i]);
          const item = {
            label: edges[i].value,
            id: edges[i].target.id,
          };
          const copy = cloneDeep(item)

          //@ts-ignore
          state.selectOption.push(copy);
        }
      }
      if (state.cellsArray.length > 0) {
        state.showEmpty = false;
      }

      showFormStruct(_val.cell.Script);
    }
  }
}

onBeforeMount(() => {
  initFormVal()
})

</script>

<style scoped>
.codeRow {
  height: 500px;
}

.ltui-form label.a-form-item__label {
  overflow: hidden !important;
}
</style>
