<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import { DataNode } from 'ant-design-vue/lib/tree';
import useI18n from '@/hooks/useI18n';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import useOptions from './hooks/useOptions';
import useConfigList from './hooks/useConfigList';
import useConfigArray from './hooks/useConfigArray';
import useConfigArrayChild from './hooks/useConfigArrayChild';
import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
  t,
});

/**网元参数 */
let neCascaderOptions = ref<Record<string, any>[]>([]);

/**网元类型选择 type,id */
let neTypeSelect = ref<string[]>(['', '']);

/**左侧导航是否可收起 */
let collapsible = ref<boolean>(true);

/**改变收起状态 */
function changeCollapsible() {
  collapsible.value = !collapsible.value;
}

/**对象信息状态类型 */
type TreeStateType = {
  /**网元 loading */
  loading: boolean;
  /**网元配置 tree */
  data: DataNode[];
  /**选择对应Node一级 tree */
  selectNode: {
    title: string;
    key: string;
    // 可选属性数据
    paramName: string;
    paramDisplay: string;
    paramType: string;
    paramPerms: string[];
    paramData: Record<string, any>[];
  };
  /**选择 loading */
  selectLoading: boolean;
};

let treeState: TreeStateType = reactive({
  loading: true,
  data: [],
  selectNode: {
    paramName: '',
    paramDisplay: '',
    paramType: '',
    paramPerms: [],
    paramData: [],
    // 树形节点需要有
    title: '',
    key: '',
  },
  selectLoading: true,
});

/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
  const { key } = info.node;
  if (treeState.selectNode.paramName == key) {
    return;
  }
  fnActiveConfigNode(key);
}

/**列表项点击监听 */
function fnActiveConfigNode(key: string | number) {
  listState.data = [];
  arrayState.data = [];
  treeState.selectLoading = true;
  if (key === '#') {
    key = treeState.selectNode.paramName;
  } else {
    treeState.selectNode.paramName = key as string;
  }

  const param = treeState.data.find(item => item.key === key);
  if (!param) {
    message.warning({
      content: t('common.noData'),
      duration: 3,
    });
    return;
  }
  treeState.selectNode = JSON.parse(JSON.stringify(param));

  // 获取网元端的配置数据
  getNeConfigData({
    neType: neTypeSelect.value[0],
    neId: neTypeSelect.value[1],
    paramName: key,
  }).then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      const ruleArr = param.paramData;
      const dataArr = res.data;
      if (param.paramType === 'list') {
        // 列表项数据
        const dataList = [];
        for (const item of dataArr) {
          for (const key in item) {
            // 规则为准
            for (const rule of ruleArr) {
              if (rule['name'] === key) {
                const ruleItem = Object.assign(rule, {
                  optional: 'true',
                  value: item[key],
                });
                dataList.push(ruleItem);
                break;
              }
            }
          }
        }
        listState.data = dataList;
        tablePagination.current = 1;
        listEditClose();
      }
      if (param.paramType === 'array') {
        // 列表项数据
        const dataArray = [];
        for (const item of dataArr) {
          const index = item['index'];
          let record: Record<string, any>[] = [];
          for (const key in item) {
            // 规则为准
            for (const rule of ruleArr) {
              if (rule['name'] === key) {
                const ruleItem = Object.assign({ optional: 'true' }, rule, {
                  value: item[key],
                });
                record.push(ruleItem);
                break;
              }
            }
          }
          dataArray.push({ title: `Index-${index}`, key: index, record });
        }
        arrayState.data = dataArray;
        // 无数据时，用于新增
        arrayState.dataRule = { title: `Index-0`, key: 0, record: ruleArr };

        // 列表数据
        const columnsData: Record<string, any>[] = [];
        for (const v of arrayState.data) {
          const row: Record<string, any> = {};
          for (const item of v.record) {
            row[item.name] = item;
          }
          columnsData.push(row);
        }
        arrayState.columnsData = columnsData;
        // 列表字段
        const columns: Record<string, any>[] = [];
        for (const rule of arrayState.dataRule.record) {
          columns.push({
            title: rule.display,
            dataIndex: rule.name,
            align: 'left',
            resizable: true,
            width: 150,
            minWidth: 100,
            maxWidth: 350,
          });
        }
        columns.push({
          title: t('common.operate'),
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          fixed: 'right',
          width: 100,
        });
        arrayState.columns = columns;
        tablePagination.current = 1;
        arrayEditClose();
      }
      setTimeout(() => {
        treeState.selectLoading = false;
      }, 300);
    } else {
      message.warning({
        content: `${param.paramDisplay} ${t(
          'views.configManage.configParamForm.noConfigData'
        )}`,
        duration: 3,
      });
    }
  });
}

/**查询配置可选属性值列表 */
function fnGetNeConfig() {
  const neType = neTypeSelect.value[0];
  if (!neType) {
    message.warning({
      content: t('views.configManage.configParamForm.neTypePleace'),
      duration: 3,
    });
    return;
  }

  treeState.loading = true;
  // 获取数据
  getAllNeConfig(neType).then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      const arr = [];
      for (const item of res.data) {
        let paramPerms: string[] = [];
        if (item.paramPerms) {
          paramPerms = item.paramPerms.split(',');
        } else {
          paramPerms = ['post', 'put', 'delete'];
        }
        arr.push({
          ...item,
          children: undefined,
          title: item.paramDisplay,
          key: item.paramName,
          paramPerms,
        });
      }
      treeState.data = arr;
      treeState.loading = false;
      // 取首个tag
      if (res.data.length > 0) {
        const item = JSON.parse(JSON.stringify(treeState.data[0]));
        treeState.selectNode = item;
        treeState.selectLoading = false;
        fnActiveConfigNode(item.key);
      }
    }
  });
}

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**添加框是否显示 */
  visible: boolean;
  /**标题 */
  title: string;
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
  /**项类型 */
  type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
  /**项Key */
  key: string | number;
  /**项数据 */
  data: Record<string, any>[];
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  visible: false,
  title: 'Item',
  from: {},
  confirmLoading: false,
  type: 'arrayAdd',
  key: '',
  data: [],
});

/**
 * 对话框弹出确认执行函数
 * 进行表达规则校验
 */
function fnModalOk() {
  const from = toRaw(modalState.from);
  if (modalState.type === 'arrayAdd') {
    arrayAddOk(from);
  }
  if (modalState.type === 'arrayEdit') {
    arrayEditOk(from);
  }
  if (modalState.type === 'arrayChildAdd') {
    arrayChildAddOk(from);
  }
  if (modalState.type === 'arrayChildEdit') {
    arrayChildEditOk(from);
  }
}

/**
 * 对话框弹出关闭执行函数
 * 进行表达规则校验
 */
function fnModalCancel() {
  modalState.visible = false;
  modalState.from = {};
  modalState.type = 'arrayAdd';
  modalState.key = '';
  modalState.data = [];
}

// 监听新增编辑弹窗
watch(
  () => modalState.visible,
  val => {
    // SMF需要选择配置的UPF id
    if (val && neTypeSelect.value[0] === 'SMF') {
      smfByUPFIdLoadData(neTypeSelect.value[1]);
    }
  }
);

const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
  useConfigList({ t, treeState, neTypeSelect, ruleVerification });

const {
  arrayState,
  arrayEdit,
  arrayEditClose,
  arrayEditOk,
  arrayDelete,
  arrayAdd,
  arrayAddOk,
  arrayInitEdit,
  arrayInitAdd,
} = useConfigArray({
  t,
  treeState,
  neTypeSelect,
  fnActiveConfigNode,
  ruleVerification,
  modalState,
  fnModalCancel,
});

const {
  arrayChildState,
  arrayChildExpand,
  arrayChildEdit,
  arrayChildEditOk,
  arrayChildDelete,
  arrayChildAdd,
  arrayChildAddOk,
} = useConfigArrayChild({
  t,
  treeState,
  neTypeSelect,
  fnActiveConfigNode,
  ruleVerification,
  modalState,
  arrayState,
  arrayInitEdit,
  arrayInitAdd,
  arrayEditClose,
});

onMounted(() => {
  // 获取网元网元列表
  neInfoStore.fnNelist().then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      if (res.data.length > 0) {
        // 过滤不可用的网元
        neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
          (item: any) => {
            return !['LMF', 'NEF'].includes(item.value);
          }
        );
        if (neCascaderOptions.value.length === 0) {
          message.warning({
            content: t('common.noData'),
            duration: 2,
          });
          return;
        }
        // 默认选择AMF
        const item = neCascaderOptions.value.find(s => s.value === 'AMF');
        if (item && item.children) {
          const info = item.children[0];
          neTypeSelect.value = [info.neType, info.neId];
        } else {
          const info = neCascaderOptions.value[0].children[0];
          neTypeSelect.value = [info.neType, info.neId];
        }
        fnGetNeConfig();
      }
    } else {
      message.warning({
        content: t('common.noData'),
        duration: 2,
      });
    }
  });
});
</script>

<template>
  <PageContainer>
    <a-row :gutter="16">
      <a-col
        :lg="6"
        :md="6"
        :xs="24"
        style="margin-bottom: 24px"
        v-show="collapsible"
      >
        <!-- 网元类型 -->
        <a-card size="small" :bordered="false" :loading="treeState.loading">
          <template #title>
            {{ t('views.configManage.configParamForm.treeTitle') }}
          </template>
          <a-form layout="vertical" autocomplete="off">
            <a-form-item name="neId ">
              <a-cascader
                v-model:value="neTypeSelect"
                :options="neCascaderOptions"
                :allow-clear="false"
                @change="fnGetNeConfig"
              />
            </a-form-item>
            <a-form-item name="listeningPort">
              <a-tree
                :tree-data="treeState.data"
                :selected-keys="[treeState.selectNode.paramName]"
                @select="fnSelectConfigNode"
              >
              </a-tree>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
        <a-card
          size="small"
          :bordered="false"
          :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
          :loading="treeState.selectLoading"
        >
          <template #title>
            <a-button
              type="text"
              size="small"
              @click.prevent="changeCollapsible()"
            >
              <template #icon>
                <MenuFoldOutlined v-show="collapsible" />
                <MenuUnfoldOutlined v-show="!collapsible" />
              </template>
            </a-button>

            <a-typography-text strong v-if="treeState.selectNode.paramDisplay">
              {{ treeState.selectNode.paramDisplay }}
            </a-typography-text>
            <a-typography-text type="danger" v-else>
              {{ t('views.configManage.configParamForm.treeSelectTip') }}
            </a-typography-text>
          </template>
          <template #extra>
            <a-space :size="8" align="center" v-show="!treeState.selectLoading">
              <a-tooltip>
                <template #title>{{ t('common.reloadText') }}</template>
                <a-button
                  type="default"
                  size="small"
                  @click.prevent="fnActiveConfigNode('#')"
                >
                  <template #icon>
                    <ReloadOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-space>
          </template>

          <!-- 单列表格列表 -->
          <a-table
            v-if="treeState.selectNode.paramType === 'list'"
            class="table"
            row-key="name"
            :size="listState.size"
            :columns="listState.columns"
            :data-source="listState.data"
            :pagination="tablePagination"
            :bordered="true"
            :scroll="{ x: true, y: '500px' }"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'value'">
                <a-tooltip placement="topLeft">
                  <template #title v-if="record.comment">
                    {{ record.comment }}
                  </template>
                  <div class="editable-cell">
                    <div
                      v-if="
                        listState.editRecord['display'] === record['display']
                      "
                      class="editable-cell__input-wrapper"
                    >
                      <a-input-number
                        v-if="record['type'] === 'int'"
                        v-model:value="listState.editRecord['value']"
                        :disabled="listState.confirmLoading"
                        style="width: 100%"
                      ></a-input-number>
                      <a-switch
                        v-else-if="record['type'] === 'bool'"
                        v-model:checked="listState.editRecord['value']"
                        :checked-children="t('common.switch.open')"
                        :un-checked-children="t('common.switch.shut')"
                        :disabled="listState.confirmLoading"
                      ></a-switch>
                      <a-select
                        v-else-if="record['type'] === 'enum'"
                        v-model:value="listState.editRecord['value']"
                        :allow-clear="true"
                        :disabled="listState.confirmLoading"
                        style="width: 100%"
                      >
                        <a-select-option
                          :value="+v"
                          :key="+v"
                          v-for="(k, v) in JSON.parse(record['filter'])"
                        >
                          {{ k }}
                        </a-select-option>
                      </a-select>
                      <a-input
                        v-else
                        v-model:value="listState.editRecord['value']"
                        :disabled="listState.confirmLoading"
                      ></a-input>
                      <a-space
                        :size="8"
                        align="center"
                        direction="horizontal"
                        style="margin-left: 18px"
                      >
                        <a-tooltip placement="bottomRight">
                          <template #title> {{ t('common.ok') }} </template>
                          <a-popconfirm
                            :title="
                              t(
                                'views.configManage.configParamForm.editOkTip',
                                { num: record['display'] }
                              )
                            "
                            placement="topRight"
                            :disabled="listState.confirmLoading"
                            @confirm="listEditOk()"
                          >
                            <a-button
                              type="text"
                              class="editable-cell__icon-edit"
                              :disabled="listState.confirmLoading"
                            >
                              <template #icon>
                                <CheckOutlined />
                              </template>
                            </a-button>
                          </a-popconfirm>
                        </a-tooltip>
                        <a-tooltip placement="bottomRight">
                          <template #title> {{ t('common.cancel') }} </template>
                          <a-button
                            type="text"
                            class="editable-cell__icon-edit"
                            :disabled="listState.confirmLoading"
                            @click.prevent="listEditClose()"
                          >
                            <template #icon>
                              <CloseOutlined />
                            </template>
                          </a-button>
                        </a-tooltip>
                      </a-space>
                    </div>
                    <div
                      v-else
                      class="editable-cell__text-wrapper"
                      @dblclick="listEdit(record)"
                    >
                      <template v-if="record['type'] === 'enum'">
                        {{ JSON.parse(record['filter'])[text] || '&nbsp;'}}
                      </template>
                      <template v-else>{{ `${text}` || '&nbsp;' }}</template>
                      <EditOutlined
                        class="editable-cell__icon"
                        @click="listEdit(record)"
                        style="margin-left: 18px"
                        v-if="
                          !listState.confirmLoading &&
                          !['read-only', 'read', 'ro'].includes(record.access)
                        "
                      />
                    </div>
                  </div>
                </a-tooltip>
              </template>
            </template>
          </a-table>

          <!-- array类型 -->
          <template v-if="treeState.selectNode.paramType === 'array'">
            <a-table
              class="table"
              row-key="index"
              :columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
              :data-source="arrayState.columnsData"
              :size="arrayState.size"
              :pagination="tablePagination"
              :bordered="true"
              :scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
              @resizeColumn="(w:number, col:any) => (col.width = w)"
              :show-expand-column="false"
              v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
            >
              <!-- 多列新增操作 -->
              <template #title>
                <a-space :size="16" align="center">
                  <a-button
                    type="primary"
                    @click.prevent="arrayAdd()"
                    size="small"
                    v-if="treeState.selectNode.paramPerms.includes('post')"
                  >
                    <template #icon> <PlusOutlined /> </template>
                    {{ t('common.addText') }}
                  </a-button>
                  <TableColumnsDnd
                    type="ghost"
                    :cache-id="treeState.selectNode.key"
                    :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
                    v-model:columns-dnd="arrayState.columnsDnd"
                  ></TableColumnsDnd>
                </a-space>
              </template>

              <!-- 多列数据渲染 -->
              <template #bodyCell="{ column, text, record }">
                <template v-if="column?.key === 'index'">
                  <a-space :size="16" align="center">
                    <a-tooltip
                      v-if="treeState.selectNode.paramPerms.includes('put')"
                    >
                      <template #title>{{ t('common.editText') }}</template>
                      <a-button type="link" @click.prevent="arrayEdit(text)">
                        <template #icon><FormOutlined /></template>
                      </a-button>
                    </a-tooltip>
                    <a-tooltip
                      v-if="
                        treeState.selectNode.paramPerms.includes('delete') &&
                        !(
                          neTypeSelect[0] === 'IMS' &&
                          treeState.selectNode.paramName === 'plmn' &&
                          text['value'] === 0
                        )
                      "
                    >
                      <template #title>{{ t('common.deleteText') }}</template>
                      <a-button type="link" @click.prevent="arrayDelete(text)">
                        <template #icon><DeleteOutlined /></template>
                      </a-button>
                    </a-tooltip>
                  </a-space>
                </template>
                <template v-else-if="text">
                  <a-tooltip placement="topLeft">
                    <template #title v-if="text.comment">
                      {{ text.comment }}
                    </template>
                    <div class="editable-cell">
                      <template v-if="text.array">
                        <a-button
                          type="default"
                          size="small"
                          @click.prevent="
                            arrayChildExpand(record['index'], text)
                          "
                        >
                          <template #icon><BarsOutlined /></template>
                          {{
                            t('views.configManage.configParamForm.arrayMore')
                          }}
                        </a-button>
                        <!--特殊字段拓展显示-->
                        <span
                          v-if="
                            text.name === 'dnnList' && Array.isArray(text.value)
                          "
                        >
                          ({{
                            text.value.length > 4
                              ? `${text.value
                                  .slice(0, 3)
                                  .map((s: any) => s.dnn)
                                  .join()}...${text.value.length}`
                              : text.value.map((s: any) => s.dnn).join()
                          }})
                        </span>
                      </template>

                      <div v-else class="editable-cell__text-wrapper">
                        <template v-if="text['type'] === 'enum'">
                          {{ JSON.parse(text['filter'])[text.value] }}
                        </template>
                        <template v-else>
                          {{ `${text.value}` || '&nbsp;' }}
                        </template>
                      </div>
                    </div>
                  </a-tooltip>
                </template>
              </template>

              <!-- 多列嵌套类型 -->
              <template #expandedRowRender>
                <a-table
                  class="table"
                  row-key="index"
                  :columns="arrayChildState.columnsDnd"
                  :data-source="arrayChildState.columnsData"
                  :size="arrayChildState.size"
                  :pagination="tablePagination"
                  :bordered="true"
                  :scroll="{
                    x: arrayChildState.columnsDnd.length * 200,
                    y: 200,
                  }"
                  @resizeColumn="(w:number, col:any) => (col.width = w)"
                >
                  <template #title>
                    <a-space :size="16" align="center">
                      <a-button
                        type="primary"
                        @click.prevent="arrayChildAdd"
                        size="small"
                      >
                        <template #icon> <PlusOutlined /> </template>
                        {{ t('common.addText') }} {{ arrayChildState.title }}
                      </a-button>
                      <TableColumnsDnd
                        type="ghost"
                        :cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
                        :columns="[...arrayChildState.columns]"
                        v-model:columns-dnd="arrayChildState.columnsDnd"
                        v-if="arrayChildState.loc"
                      ></TableColumnsDnd>
                    </a-space>
                  </template>
                  <template #bodyCell="{ column, text, record }">
                    <template v-if="column?.key === 'index'">
                      <a-space :size="8" align="center">
                        <a-tooltip>
                          <template #title>{{ t('common.editText') }}</template>
                          <a-button
                            type="link"
                            @click.prevent="arrayChildEdit(text)"
                          >
                            <template #icon><FormOutlined /></template>
                          </a-button>
                        </a-tooltip>
                        <a-tooltip>
                          <template #title>
                            {{ t('common.deleteText') }}
                          </template>
                          <a-button
                            type="link"
                            @click.prevent="arrayChildDelete(text)"
                          >
                            <template #icon><DeleteOutlined /></template>
                          </a-button>
                        </a-tooltip>
                      </a-space>
                    </template>
                    <template v-else-if="text">
                      <a-tooltip placement="topLeft">
                        <template #title v-if="text.comment">
                          {{ text.comment }}
                        </template>
                        <div class="editable-cell">
                          <template v-if="text.array">
                            <a-button type="default" size="small">
                              <template #icon><BarsOutlined /></template>
                              {{
                                t(
                                  'views.configManage.configParamForm.arrayMore'
                                )
                              }}
                            </a-button>
                          </template>

                          <div v-else>
                            <template v-if="text['type'] === 'enum'">
                              {{ JSON.parse(text['filter'])[text.value] }}
                            </template>
                            <template v-else>
                              {{ `${text.value}` || '&nbsp;' }}
                            </template>
                          </div>
                        </div>
                      </a-tooltip>
                    </template>
                  </template>
                </a-table>
              </template>
            </a-table>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <!-- 新增框或修改框 -->
    <ProModal
      :drag="true"
      :width="800"
      :destroyOnClose="true"
      :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
      :keyboard="false"
      :mask-closable="false"
      :visible="modalState.visible"
      :title="modalState.title"
      :confirm-loading="modalState.confirmLoading"
      @ok="fnModalOk"
      @cancel="fnModalCancel"
    >
      <a-form
        class="form"
        layout="horizontal"
        autocomplete="off"
        :validate-on-rule-change="false"
        :validateTrigger="[]"
        :label-col="{ span: 6 }"
        :labelWrap="true"
      >
        <a-form-item
          v-for="item in modalState.data"
          :label="item.display"
          :name="item.name"
          :required="item.optional === 'false'"
          style="margin-bottom: 4px"
        >
          <a-tooltip placement="topLeft">
            <template #title v-if="item.comment">
              {{ item.comment }}
            </template>

            <div>
              <div
                v-if="
                  !Array.isArray(item.array) &&
                  modalState.from[item.name] !== undefined
                "
              >
                <!-- 特殊SMF-upfid选择 -->
                <a-select
                  v-if="
                    neTypeSelect[0] === 'SMF' &&
                    modalState.from[item.name]['name'] === 'upfId'
                  "
                  v-model:value="modalState.from[item.name]['value']"
                  :options="smfByUPFIdOptions"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                  :allow-clear="true"
                  style="width: 100%"
                >
                </a-select>
                <!-- 常规 -->
                <a-input-number
                  v-else-if="item['type'] === 'int'"
                  v-model:value="modalState.from[item.name]['value']"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                  style="width: 100%"
                ></a-input-number>
                <a-switch
                  v-else-if="item['type'] === 'bool'"
                  v-model:checked="modalState.from[item.name]['value']"
                  :checked-children="t('common.switch.open')"
                  :un-checked-children="t('common.switch.shut')"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                ></a-switch>
                <a-select
                  v-else-if="item['type'] === 'enum'"
                  v-model:value="modalState.from[item.name]['value']"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                  :allow-clear="true"
                  style="width: 100%"
                >
                  <a-select-option
                    :value="+v"
                    :key="+v"
                    v-for="(k, v) in JSON.parse(item['filter'])"
                  >
                    {{ k }}
                  </a-select-option>
                </a-select>
                <a-input
                  v-else
                  v-model:value="modalState.from[item.name]['value']"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                ></a-input>
              </div>
              <div v-else>
                {{ `${item.value || '&nbsp;'}` }}
              </div>
            </div>
          </a-tooltip>
        </a-form-item>
      </a-form>
    </ProModal>
  </PageContainer>
</template>

<style lang="less" scoped>
.editable-cell {
  &__icon {
    display: none;
    cursor: pointer;
  }
  &__icon:hover {
    color: var(--ant-primary-color);
  }
  &__icon-edit:hover {
    color: var(--ant-primary-color);
  }
  &__text-wrapper {
    font-size: 16px;
    color: inherit;
  }
  &__text-wrapper:hover &__icon {
    display: inline-block;
  }
  &__input-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
  }
}
</style>
