layFormVarGroupRef.value[0].validate();

{
    "__v_isShallow": false,
    "__v_isRef": true,
    "_rawValue": [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
    ],
    "_value": [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
    ]
}

<template>
  <lay-tab
    type="card"
    v-model="current"
    style="background-color: #fff"
    @change="changeTab"
  >
    <lay-tab-item title="通讯口配置" id="-1">
      <div class="table-box">
        <lay-table
          :height="`100%`"
          ref="tableRefPort"
          :loading="loading"
          :columns="columnsPlc"
          :data-source="plcVoPage.list"
        >
          <template #toolbar>
            <lay-button
              size="sm"
              @click="toChangePlc('新建', null)"
              type="normal"
            >
              新建
            </lay-button>
          </template>
          <template #name="{ row }">
            <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
            {{ row.name }}
          </template>
          <template #option="{ row }">
            <lay-button
              @click="toChangePlc('修改', row)"
              size="xs"
              border="green"
              border-style="dashed"
            >
              修改
            </lay-button>
            <lay-button
              @click="toRemovePlc(row)"
              size="xs"
              border="red"
              border-style="dashed"
            >
              删除
            </lay-button>
          </template>
        </lay-table>
      </div>

      <!-- plc 通讯口添加 -->
      <lay-layer
        v-model="layerPlcPop.visible"
        :title="layerPlcPop.title"
        :area="['600px', 'auto']"
      >
        <div style="padding: 20px">
          <lay-form :model="plcForm" ref="layFormPlcRef" required>
            <lay-form-item label="名称" prop="name">
              <lay-input v-model="varGroupForm.name"></lay-input>
            </lay-form-item>
            <lay-form-item label="排序">
              <lay-input-number v-model="varGroupForm.sort"></lay-input-number>
            </lay-form-item>
          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toPlcSubmit"
              >保存</lay-button
            >
            <lay-button size="sm" @click="toPlcCancel">取消</lay-button>
          </div>
        </div>
      </lay-layer>
    </lay-tab-item>

    <lay-tab-item
      :title="item.name"
      :id="`${index}`"
      v-for="(item, index) in varGroupList"
    >
      <div class="table-box">
        <lay-table
          :height="`100%`"
          ref="tableRefVar"
          :loading="loading"
          children-column-name="children"
          id="uid"
          :columns="columnsVar"
          :data-source="[]"
          :default-toolbar="true"
        >
          <template #toolbar>
            <lay-button
              size="sm"
              @click="toChangeVar('新建变量', null)"
              type="normal"
            >
              新建变量
            </lay-button>
            <lay-button
              size="sm"
              @click="varGroupManage('分组管理')"
              type="normal"
            >
              分组管理
            </lay-button>
          </template>
          <template #name="{ row }">
            <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
            {{ row.name }}
          </template>
          <template #option="{ row }">
            <lay-button
              @click="toChangeVar('修改', row)"
              size="xs"
              border="green"
              border-style="dashed"
            >
              修改
            </lay-button>
            <lay-button
              @click="toRemoveVar(row)"
              size="xs"
              border="red"
              border-style="dashed"
            >
              删除
            </lay-button>
          </template>
        </lay-table>
      </div>

      <!-- 变量操作弹窗 -->
      <lay-layer
        v-model="layerVarPop.visible"
        :title="layerVarPop.title"
        :area="['800px', 'auto']"
      >
        <div style="padding: 20px">
          <lay-form :model="varForm" ref="layFormVarRef" required>
            <lay-row>
              <lay-col md="12">
                <lay-form-item label="PLC名称" prop="plcUid">
                  <lay-select v-model="varForm.plcUid" style="width: 100%">
                    <lay-select-option
                      v-for="item in varForm.plcOptions"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="变量名称" prop="name">
                  <lay-input v-model="varForm.name"></lay-input>
                </lay-form-item>
                <lay-form-item label="变量地址">
                  <lay-select
                    v-model="varForm.varAddress"
                    style="width: 100%"
                    @change="changeVarAddress"
                  >
                    <lay-select-option
                      v-for="item in varForm.varAddressOptions"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="数据类型">
                  <lay-select v-model="varForm.dataType" style="width: 100%">
                    <lay-select-option
                      v-for="item in varForm.varAddressTypeOptions"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="12">
                <lay-form-item label="读写类型" prop="readWriteType">
                  <lay-select
                    v-model="varForm.readWriteType"
                    style="width: 100%"
                  >
                    <lay-select-option
                      v-for="item in varForm.readWriteOptions"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></lay-select-option>
                  </lay-select>
                </lay-form-item>
                <lay-form-item label="变量单位">
                  <lay-input v-model="varForm.unit"></lay-input>
                </lay-form-item>
                <lay-form-item label="地址偏移" prop="addressOffset">
                  <lay-input-number
                    v-model="varForm.addressOffset"
                    style="width: 100%"
                  ></lay-input-number>
                </lay-form-item>
              </lay-col>
              <lay-form-item label="变量描述">
                <lay-input v-model="varForm.remark"></lay-input>
              </lay-form-item>
            </lay-row>
            <lay-line></lay-line>
            <lay-collapse v-model="varCollapseKey">
              <lay-collapse-item title="更多设置" id="1">
                <lay-form-item label="存储类型" prop="readWriteType">
                  <lay-select v-model="varForm.readWriteType"></lay-select>
                </lay-form-item>
              </lay-collapse-item>
            </lay-collapse>
          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toSubmitVar"
              >保存</lay-button
            >
            <lay-button size="sm" @click="toCancelVar">取消</lay-button>
          </div>
        </div>
      </lay-layer>

      <!-- 变量组table弹窗 -->
      <lay-layer
        v-model="layerVarGroupPop.visible"
        :title="layerVarGroupPop.title"
        :area="['800px', 'auto']"
      >
        <div style="padding: 20px">
          <lay-table
            :height="`100%`"
            ref="tableRefVarGroup"
            :loading="loading"
            :columns="columnsVarGroup"
            :data-source="varGroupList"
            :default-toolbar="false"
          >
            <template #toolbar>
              <lay-button
                size="sm"
                @click="toChangeVarGroup('新增')"
                type="normal"
              >
                新增
              </lay-button>
            </template>

            <template #option="{ row }">
              <lay-button
                @click="toChangeVarGroup('修改', row)"
                size="xs"
                border="green"
                border-style="dashed"
                :disabled="row.def"
              >
                修改
              </lay-button>
              <lay-button
                @click="toRemoveVarGroup(row)"
                size="xs"
                border="red"
                border-style="dashed"
                :disabled="row.def"
              >
                删除
              </lay-button>
            </template>
          </lay-table>
        </div>
      </lay-layer>

      <!-- 新增操作变量组弹窗 -->
      <lay-layer
        v-model="layerGroupOperatePop.visible"
        :title="layerGroupOperatePop.title"
        :area="['600px', 'auto']"
      >
        <div style="padding: 20px">
          <lay-form :model="varGroupForm" ref="layFormVarGroupRef" required>
            <lay-form-item label="名称" prop="name">
              <lay-input v-model="varGroupForm.name"></lay-input>
            </lay-form-item>
            <lay-form-item label="排序">
              <lay-input-number v-model="varGroupForm.sort"></lay-input-number>
            </lay-form-item>
          </lay-form>
          <div style="width: 100%; text-align: center">
            <lay-button size="sm" type="primary" @click="toVarGroupSubmit"
              >保存</lay-button
            >
            <lay-button size="sm" @click="toVarGroupCancel">取消</lay-button>
          </div>
        </div>
      </lay-layer>
    </lay-tab-item>
  </lay-tab>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { layer } from "@layui/layui-vue";
import { useBoxStore } from "@/store/module/box";
import { selectApi } from "@/api/box/index";
import { BoxVo } from "@/api/box/types";
import NProgress from "nprogress";
import { useVarGroupStore } from "@/store/module/vargroup";
import { useVarStore } from "@/store/module/var";
import { usePlcStore } from "@/store/module/plc";
import { VarGroupVo, VarGroupForm } from "@/api/vargroup/types";
import { PlcForm, PlcQuery, PlcVo } from "@/api/plc/types";
import { VarForm } from "@/api/var/types";

const boxStore = useBoxStore();
const varGroupStore = useVarGroupStore();
const plcStore = usePlcStore();
const varStore = useVarStore();
const props = defineProps({
  boxUid: String,
});

const loading = ref(false);

const varGroupList = ref<VarGroupVo[]>([]);

const plcForm = ref<PlcForm>({});

const plcVoPage = ref<PageResult<PlcVo[]>>({
  currentPage: 0,
  pageSize: 0,
  count: 0,
  list: [],
});

const plcQuery = ref<PlcQuery>({
  currentPage: 0,
  pageSize: 10,
});

const current = ref("0");

const layFormVarRef = ref();
const layFormVarGroupRef = ref();

/* ----------------------------------------------------------------------------------------- */

const handlerSelectPlc = (buid: string) => {
  NProgress.start();
  loading.value = true;
  plcQuery.value.boxUid = buid;
  plcStore
    .select(plcQuery.value)
    .then((data) => {
      plcVoPage.value = data;
    })
    .finally(() => {
      loading.value = false;
      NProgress.done();
    });
};

const handlerSelectVarGroup = (buid: string) => {
  NProgress.start();
  loading.value = true;
  varGroupStore
    .select(buid)
    .then((data) => {
      varGroupList.value = data;
      /* 查询变量 */
      const vguid = varGroupList.value[0].uid;
      handlerSelectVar(vguid);
    })
    .finally(() => {
      loading.value = false;
      NProgress.done();
    });
};

const handlerSelectVar = (vguid: string) => {};

/* ----------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------- */

const changeTab = (e: any) => {
  if (e === "-1") {
    handlerSelectPlc(props.boxUid);
  } else {
    const vguid = varGroupList.value[e].uid;
    handlerSelectVar(vguid);
  }
};

watch(props, (oldV, newV) => {
  if (current.value === "-1") {
    // 通讯口
    handlerSelectPlc(newV.boxUid ?? "");
  } else {
    // 分组
    /* 查询分组 */
    handlerSelectVarGroup(newV.boxUid ?? "");
  }
});

onMounted(() => {
  if (props.boxUid) {
    handlerSelectVarGroup(props.boxUid);
  }
});

/* ----------------------------------------------------------------------------------------- */

const layerPlcPop = ref({
  title: "",
  visible: false,
});

const toChangePlc = (title: string, row: any) => {
  plcForm.value = Object.create({});
  if (row) {
    plcStore.form(row.uid).then((data) => {
      plcForm.value = data;
    });
  } else {
    plcStore.simpleForm().then((data) => {
      plcForm.value = data;
    });
  }
  layerPlcPop.value.title = title;
  layerPlcPop.value.visible = true;
};

const toRemovePlc = (row: any) => {
  layer.confirm("您将删除所有选中的数据？", {
    title: "提示",
    btn: [
      {
        text: "确定",
        callback: (id: any) => {
          console.log(row);
          if (row) {
            plcStore.deletes(row.uid).then(() => {
              layer.close(id);
            });
          }
        },
      },
      {
        text: "取消",
        callback: (id: any) => {
          layer.close(id);
        },
      },
    ],
  });
};

const toPlcSubmit = () => {};

const toPlcCancel = () => {};

/* ----------------------------------------------------------------------------------------- */

const varForm = ref<VarForm>({});

const layerVarPop = ref({
  title: "",
  visible: false,
});

const varCollapseKey = ref("0");

/* 新增变量 */
const toChangeVar = (title: string, row: any) => {
  varForm.value = Object.create({});
  if (row) {
    varStore
      .simpleForm(props.boxUid, row.uid)
      .then((data) => {
        varForm.value = data;
      })
      .finally(() => {
        layerVarPop.value.visible = true;
      });
  } else {
    varStore
      .simpleForm(props.boxUid)
      .then((data) => {
        varForm.value = data;
      })
      .finally(() => {
        layerVarPop.value.visible = true;
      });
  }
  layerVarPop.value.title = title;
};

const changeVarAddress = (e: string) => {
  varForm.value.varAddressTypeOptions = varForm.value.dataTypeOptions?.[e];
};

const toSubmitVar = () => {
  console.log(layFormVarRef);
  layFormVarRef.value.validate(
    (isValidate: boolean, model: VarGroupForm, errors: any) => {
      console.log(model);
      if (isValidate) {
        if (model.uid) {
        } else {
        }
      }
    }
  );
};

const toCancelVar = () => {
  varForm.value = Object.create({});
  layerVarPop.value.visible = false;
};

const toRemoveVar = (row: any) => {};

/* ----------------------------------------------------------------------------------------- */

const varGroupForm = ref<VarGroupForm>({});

const layerVarGroupPop = ref({
  title: "",
  visible: false,
});

const varGroupManage = (title: string) => {
  layerVarGroupPop.value.visible = true;
  layerVarGroupPop.value.title = title;
};

/* 新增分组 */
const toChangeVarGroup = (title: string, row?: VarGroupForm) => {
  varGroupForm.value.boxUid = props.boxUid;
  if (row) {
    varGroupForm.value.uid = row.uid;
    varGroupForm.value.name = row.name;
    varGroupForm.value.sort = row.sort;
  } else {
    varGroupForm.value.uid = "";
  }
  layerGroupOperatePop.value.visible = true;
  layerGroupOperatePop.value.title = title;
  
};

const layerGroupOperatePop = ref({
  title: "",
  visible: false,
});

const toVarGroupCancel = () => {
  varGroupForm.value.name = "";
  varGroupForm.value.sort = 0;
  varGroupForm.value.uid = "";
  layerGroupOperatePop.value.visible = false;
};

const toVarGroupSubmit = () => {
  console.log(layFormVarGroupRef);

  layFormVarGroupRef.value[0].validate(
    (isValidate: boolean, model: VarGroupForm, errors: any) => {
      console.log(model);
      if (isValidate) {
        if (model.uid) {
          varGroupStore.update(model).then(() => {
            varGroupForm.value.name = "";
            varGroupForm.value.sort = 0;
            layerGroupOperatePop.value.visible = false;
            varGroupStore.select(props.boxUid ?? "").then((data) => {
              varGroupList.value = data;
            });
          });
        } else {
          varGroupStore.add(model).then(() => {
            varGroupForm.value.name = "";
            varGroupForm.value.sort = 0;
            layerGroupOperatePop.value.visible = false;
            varGroupStore.select(props.boxUid ?? "").then((data) => {
              varGroupList.value = data;
            });
          });
        }
      }
    }
  );
};

const toRemoveVarGroup = (row: any) => {
  layer.confirm("您将删除所有选中的数据？", {
    title: "提示",
    btn: [
      {
        text: "确定",
        callback: (id: any) => {
          console.log(row);
          if (row) {
            varGroupStore.deletes(row.uid).then(() => {
              layer.close(id);
            });
          }
        },
      },
      {
        text: "取消",
        callback: (id: any) => {
          layer.close(id);
        },
      },
    ],
  });
};

/* ----------------------------------------------------------------------------------------- */

const tableRefPort = ref();
const tableRefVar = ref();
const tableRefVarGroup = ref();

const columnsPlc = [
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "修改时间",
    key: "updateTime",
  },
  {
    title: "排序",
    width: "120px",
    key: "sort",
  },
  {
    title: "操作",
    key: "option",
    customSlot: "option",
  },
];

const columnsVar = [
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "修改时间",
    key: "updateTime",
  },
  {
    title: "操作",
    key: "option",
    customSlot: "option",
  },
];

const columnsVarGroup = [
  {
    title: "分组名称",
    key: "name",
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "修改时间",
    key: "updateTime",
  },
  {
    title: "排序",
    width: "120px",
    key: "sort",
  },
  {
    title: "操作",
    key: "option",
    customSlot: "option",
  },
];
</script>

<style scoped>
.table-box {
  padding: 10px;
  height: 650px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}
</style>