<template>
  <div class="page-wrapper">
    <div class="page-container">
      <a-form-model
        ref="menuForm"
        :model="menuForm"
        :rules="menuFormRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        class="menuForm"
      >
        <a-collapse
          :bordered="false"
          default-active-key="a"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row>
              <a-col :span="8">
                <a-form-model-item :label="$t('SUP_MENU')" prop="parentId">
                  <div
                    class="transparentDiv"
                    :class="disabled ? 'disabledStatus' : ''"
                  >
                    {{ $t(parentMenuName) }}
                  </div>
                  <MegaSelectTree
                    v-model="menuForm.parentId"
                    :tree-data="menuAllList"
                    style="width: 100%"
                    :disabled="parentMenuName != ''"
                    :placeholder="$t('PLACESELECT')"
                    @change="handleChangeFormDept"
                  ></MegaSelectTree>
                </a-form-model-item>
              </a-col>
              <a-col v-if="menuForm.clientType !== 'STATION'" :span="8">
                <a-form-model-item :label="$t('TYPE')" prop="menuType">
                  <a-radio-group v-model="menuForm.menuType">
                    <a-radio
                      v-for="(item, index) in menuTypeList"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col v-else :span="8">
                <a-form-model-item :label="$t('TYPE')" prop="menuType">
                  <a-radio-group v-model="menuForm.menuType">
                    <a-radio
                      v-for="(item, index) in menuTypeList"
                      v-show="item.value === 'MODULE'"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <!-- 名称 -->
                <a-form-model-item :label="$t('NAME')" prop="menuName">
                  <a-row>
                    <a-col>
                      <I18nSelect
                        v-if="clientTypeList.length && typeList.length"
                        ref="select"
                        v-model="menuForm.menuName"
                        :client-type-list="clientTypeList"
                        :i18n-type-list="typeList"
                        :menu-type="'MENU'"
                      ></I18nSelect>
                    </a-col>
                  </a-row>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <!-- 序号 -->
                <a-form-model-item :label="$t('SORT')" prop="seq">
                  <a-input-number
                    v-model="menuForm.seq"
                    style="width: 100%"
                    :min="0"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <!-- 权限标识 -->
                <a-form-model-item :label="$t('PERMISSION_ID')" prop="perms">
                  <a-input
                    v-model.trim="menuForm.perms"
                    allow-clear
                    :placeholder="$t('PLACEENTER')"
                    maxlength="50"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <!-- 权重 -->
                <a-form-model-item :label="$t('WEIGHT')" prop="weight">
                  <a-select
                    v-model="menuForm.weight"
                    :placeholder="$t('PLACESELECT')"
                    style="width: 100%"
                  >
                    <a-select-option
                      v-for="item in weightList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <template v-if="menuForm.menuType !== 'BUTTON'">
                <a-col :span="8">
                  <!-- 是否可见 -->
                  <a-form-model-item :label="$t('IS_VISIBLE')" prop="visible">
                    <a-radio-group v-model="menuForm.visible">
                      <a-radio value="Y">{{ $t("YES") }}</a-radio>
                      <a-radio value="N">{{ $t("NO") }}</a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <!-- 图标 -->
                  <a-form-model-item :label="$t('ICON')" prop="icon">
                    <IconList v-model="menuForm.icon" />
                  </a-form-model-item>
                </a-col>
                <a-col v-if="menuForm.menuType !== 'CONTENTS'" :span="8">
                  <!-- 背景色 -->
                  <a-form-model-item
                    :label="$t('BACKGROUND_COLOR')"
                    prop="backgroundColor"
                  >
                    <MegaColorPicker
                      v-model="menuForm.backgroundColor"
                      color-format="hex"
                    />
                  </a-form-model-item>
                </a-col>
              </template>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
        <a-collapse
          :bordered="false"
          default-active-key="b"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="b" :header="$t('DISPLAY_INFORMATION')">
            <template v-if="menuForm.clientType !== 'STATION'">
              <!-- 类型为模块的时候显示 -->
              <template
                v-if="
                  menuForm.menuType === 'MODULE' ||
                  menuForm.menuType === 'CONTENTS'
                "
              >
                <a-row>
                  <a-col :span="8">
                    <!-- 是否外链 -->
                    <a-form-model-item :label="$t('IS_FRAME')" prop="menuType">
                      <a-radio-group
                        v-model="menuForm.isFrame"
                        @change="isFrameChange"
                      >
                        <a-radio value="Y">{{ $t("YES") }}</a-radio>
                        <a-radio value="N">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <template v-if="formIsFrame">
                    <a-col :span="8">
                      <!-- 外链类型 -->
                      <a-form-model-item
                        :label="$t('FRAME_TYPE')"
                        prop="frameType"
                      >
                        <a-select
                          v-model="menuForm.frameType"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in menuFrameList"
                            :key="item.value"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <!-- 外链类型为BI 处理 -->
                      <a-form-model-item
                        v-if="menuForm.frameType === 'BI'"
                        :label="$t('REPORT_SERVER')"
                        prop="reportServerCode"
                      >
                        <a-select
                          v-model="menuForm.reportServerCode"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in reportServerList"
                            :key="item.code"
                            :value="item.code"
                          >
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col v-if="menuForm.frameType !== 'BI'" :span="8">
                      <!-- 打开方式 -->
                      <a-form-model-item
                        :label="$t('OPEN_TYPE')"
                        prop="openType"
                      >
                        <a-select
                          v-model="menuForm.openType"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in menuFrameOpenList"
                            :key="item.value"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                  </template>
                </a-row>
                <a-row v-if="menuForm.frameType === 'BI'">
                  <a-col :span="8" :offset="8">
                    <!-- 打开方式 -->
                    <a-form-model-item :label="$t('OPEN_TYPE')" prop="openType">
                      <a-select
                        v-model="menuForm.openType"
                        :placeholder="$t('PLACESELECT')"
                        style="width: 100%"
                        allow-clear
                      >
                        <a-select-option
                          v-for="item in menuFrameOpenList"
                          :key="item.value"
                          :value="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 路由 -->
                    <a-form-model-item :label="$t('MENU_PATH')" prop="menuPath">
                      <a-input
                        v-model.trim="menuForm.menuPath"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row
                  v-if="
                    formIsFrame && !formIsRelated && menuForm.frameType !== 'BI'
                  "
                >
                  <a-col :span="8" :offset="8">
                    <!-- 路由 -->
                    <a-form-model-item :label="$t('MENU_PATH')" prop="menuPath">
                      <a-input
                        v-model.trim="menuForm.menuPath"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col v-if="!formIsFrame" :span="8">
                    <!-- 是否关联组件 -->
                    <a-form-model-item
                      :label="$t('IS_RELATED_COMPONENT')"
                      prop="isRelated"
                    >
                      <a-radio-group v-model="menuForm.isRelated">
                        <a-radio value="Y">{{ $t("YES") }}</a-radio>
                        <a-radio value="N">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col v-if="formIsRelated" :span="8">
                    <!-- 路由 -->
                    <a-form-model-item :label="$t('MENU_PATH')" prop="menuPath">
                      <a-input
                        v-model.trim="menuForm.menuPath"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col v-if="formIsRelated" :span="8">
                    <!-- 组件 -->
                    <a-form-model-item
                      :label="$t('COMPONENT')"
                      prop="component"
                    >
                      <a-input
                        v-model.trim="menuForm.component"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-if="menuForm.menuType === 'MODULE'">
                  <a-col :span="8">
                    <!-- 是否存在移动端 -->
                    <a-form-model-item
                      :label="$t('EXIST_MOBILE_TERMINAL')"
                      prop="mobileAppFlag"
                    >
                      <a-radio-group v-model="menuForm.mobileAppFlag">
                        <a-radio value="1">{{ $t("YES") }}</a-radio>
                        <a-radio value="0">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col v-if="menuForm.mobileAppFlag === '1'" :span="8">
                    <!-- 移动端首页地址 -->
                    <a-form-model-item
                      :label="$t('MOBILE_HOME_ADDRESS')"
                      prop="appHomeUrl"
                    >
                      <a-input
                        v-model.trim="menuForm.appHomeUrl"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </template>
              <template v-if="menuForm.menuType === 'MENU'">
                <a-row>
                  <a-col :span="8">
                    <!-- 是否外链 -->
                    <a-form-model-item :label="$t('IS_FRAME')" prop="menuType">
                      <a-radio-group
                        v-model="menuForm.isFrame"
                        @change="isFrameChange"
                      >
                        <a-radio value="Y">{{ $t("YES") }}</a-radio>
                        <a-radio value="N">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <template v-if="!formIsFrame">
                    <a-col :span="8">
                      <!-- 路由 -->
                      <a-form-model-item
                        :label="$t('MENU_PATH')"
                        prop="menuPath"
                      >
                        <a-input
                          v-model.trim="menuForm.menuPath"
                          allow-clear
                          :placeholder="$t('PLACEENTER')"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <!-- 组件 -->
                      <a-form-model-item
                        :label="$t('COMPONENT')"
                        prop="component"
                      >
                        <a-input
                          v-model.trim="menuForm.component"
                          allow-clear
                          :placeholder="$t('PLACEENTER')"
                        />
                      </a-form-model-item>
                    </a-col>
                  </template>
                  <template v-if="formIsFrame">
                    <a-col :span="8">
                      <!-- 外链类型 -->
                      <a-form-model-item
                        :label="$t('FRAME_TYPE')"
                        prop="frameType"
                      >
                        <a-select
                          v-model="menuForm.frameType"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in menuFrameList"
                            :key="item.value"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <!-- 外链类型为BI 处理 -->
                      <a-form-model-item
                        v-if="menuForm.frameType === 'BI'"
                        :label="$t('REPORT_SERVER')"
                        prop="reportServerCode"
                      >
                        <a-select
                          v-model="menuForm.reportServerCode"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in reportServerList"
                            :key="item.code"
                            :value="item.code"
                          >
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col v-if="menuForm.frameType !== 'BI'" :span="8">
                      <!-- 打开方式 -->
                      <a-form-model-item
                        :label="$t('OPEN_TYPE')"
                        prop="openType"
                      >
                        <a-select
                          v-model="menuForm.openType"
                          :placeholder="$t('PLACESELECT')"
                          style="width: 100%"
                          allow-clear
                        >
                          <a-select-option
                            v-for="item in menuFrameOpenList"
                            :key="item.value"
                            :value="item.value"
                          >
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                  </template>
                </a-row>
                <a-row v-if="menuForm.frameType === 'BI'">
                  <a-col :span="8" :offset="8">
                    <!-- 打开方式 -->
                    <a-form-model-item :label="$t('OPEN_TYPE')" prop="openType">
                      <a-select
                        v-model="menuForm.openType"
                        :placeholder="$t('PLACESELECT')"
                        style="width: 100%"
                        allow-clear
                      >
                        <a-select-option
                          v-for="item in menuFrameOpenList"
                          :key="item.value"
                          :value="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <!-- 路由 -->
                    <a-form-model-item :label="$t('MENU_PATH')" prop="menuPath">
                      <a-input
                        v-model.trim="menuForm.menuPath"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row
                  v-if="
                    formIsFrame && !formIsRelated && menuForm.frameType !== 'BI'
                  "
                >
                  <a-col :span="8" :offset="8">
                    <!-- 路由 -->
                    <a-form-model-item :label="$t('MENU_PATH')" prop="menuPath">
                      <a-input
                        v-model.trim="menuForm.menuPath"
                        allow-clear
                        :placeholder="$t('PLACEENTER')"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row v-if="!formIsFrame">
                  <a-col :span="8">
                    <!-- 状态缓存 -->
                    <a-form-model-item
                      :label="$t('STATE_CACHE')"
                      prop="keepAlive"
                    >
                      <a-radio-group v-model="menuForm.keepAlive">
                        <a-radio value="1">{{ $t("YES") }}</a-radio>
                        <a-radio value="0">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </template>
              <template v-if="menuForm.menuType === 'BUTTON'">
                <a-row>
                  <a-col :span="8">
                    <!-- 是否关联组件 -->
                    <a-form-model-item
                      :label="$t('IS_RELATED_COMPONENT')"
                      prop="isRelated"
                    >
                      <a-radio-group v-model="menuForm.isRelated">
                        <a-radio value="Y">{{ $t("YES") }}</a-radio>
                        <a-radio value="N">{{ $t("NO") }}</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <!-- 关联组件 处理（地址 组件 keepalive） -->
                  <template v-if="formIsRelated">
                    <a-col :span="8">
                      <!-- 路由 -->
                      <a-form-model-item
                        :label="$t('MENU_PATH')"
                        prop="menuPath"
                      >
                        <a-input
                          v-model.trim="menuForm.menuPath"
                          allow-clear
                          :placeholder="$t('PLACEENTER')"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <!-- 组件 -->
                      <a-form-model-item
                        :label="$t('COMPONENT')"
                        prop="component"
                      >
                        <a-input
                          v-model.trim="menuForm.component"
                          allow-clear
                          :placeholder="$t('PLACEENTER')"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8" :offset="8">
                      <!-- tab name -->
                      <a-form-model-item :label="$t('TAB_NAME')" prop="menuTag">
                        <I18nSelect
                          v-if="clientTypeList.length && typeList.length"
                          ref="select"
                          v-model="menuForm.menuTag"
                          :client-type-list="clientTypeList"
                          :i18n-type-list="typeList"
                          :menu-type="'MENU'"
                        ></I18nSelect>
                      </a-form-model-item>
                    </a-col>
                  </template>
                </a-row>
                <!-- 关联组件 处理（地址 组件 keepalive） -->
                <template v-if="formIsRelated">
                  <a-row>
                    <a-col :span="8">
                      <!-- keep alive -->
                      <a-form-model-item
                        :label="$t('STATE_CACHE')"
                        prop="keepAlive"
                      >
                        <a-radio-group v-model="menuForm.keepAlive">
                          <a-radio value="1">{{ $t("YES") }}</a-radio>
                          <a-radio value="0">{{ $t("NO") }}</a-radio>
                        </a-radio-group>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
              </template>
            </template>
            <template v-else>
              <a-row>
                <a-col :span="8">
                  <!-- 关联WebLink页面 -->
                  <a-form-model-item
                    :label="$t('ASSOCIATE_WEBLINK_PAGES')"
                    prop="menuType"
                  >
                    <a-select
                      v-model="menuForm.ideWebPageId"
                      allow-clear
                      show-search
                      :filter-option="filterOption"
                      :placeholder="$t('PLACESELECT')"
                    >
                      <a-select-option
                        v-for="item in webLinkList"
                        :key="item.value"
                        :value="item.value"
                        >{{ item.label }}</a-select-option
                      >
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <div class="page-bottom-op">
        <a-button type="primary" @click="confirm">
          <Icon type="icon-cur-save_1" :size="18" />
          {{ $t("SAVE") }}
        </a-button>
        <a-button @click="cancel">
          <Icon type="icon-dir-f-rollback" :size="18" />
          {{ $t("CANCEL") }}
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Icon,
  SelectTree as MegaSelectTree,
  ColorPicker as MegaColorPicker,
  IconList,
} from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import { deleteLeafArray, getLevelMark } from "@mega-apps/utils";
import I18nSelect from "@/components/I18nSelect";

export default {
  components: {
    MegaSelectTree,
    MegaColorPicker,
    IconList,
    // eslint-disable-next-line vue/no-unused-components
    Icon,
    I18nSelect,
  },
  data() {
    return {
      menuList: [],
      typeList: [],
      // 下拉数据菜单
      moduleList: [],
      menuAllList: [],
      menuFrameList: [], // 菜单外链类型
      menuFrameOpenList: [], // 菜单外链打开类型
      weightList: [], // 权重
      reportServerList: [], // BI 报表服务器列表
      code_rule: "", // 编码规则
      menuTypeList: [], // 菜单类型
      webLinkList: [], // 关联webLink页面的下拉
      disabled: false,
      parentMenuName: "",
      clientTypeList: [],
      oldMenuAllList: [],
      menuForm: {
        name: "",
        clientType: this.$route.query.id,
        menuCode: "",
        parentMenuCode: "",
        parentId: "",
        parentName: "",
        menuType: "MODULE",
        mobileAppFlag: "0",
        appHomeUrl: "",
        backgroundColor: "",
        isFrame: "N",
        openType: "",
        frameType: "",
        reportServerCode: "",
        icon: "",
        treeLevel: 0,
        seq: "",
        menuName: "",
        isRelated: "N", // 是否关联路由
        menuPath: "",
        component: "",
        perms: "",
        keepAlive: "0",
        menuTag: "",
        visible: "Y",
        weight: "",
        ideWebPageId: "",
      },
    };
  },
  computed: {
    menuFormRules() {
      return {
        menuCode: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        menuName: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        menuPath: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        component: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        openType: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        frameType: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        reportServerCode: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        keepAlive: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
        perms: [
          {
            max: 64,
            message: this.$t("PLACEENTER") + 64 + this.$t("LENGTH_TIP"),
            trigger: "blur",
          },
        ],
      };
    },
    formIsFrame() {
      // 是否外链
      return this.menuForm.isFrame === "Y";
    },
    formIsRelated() {
      // 是否关联组件或布局
      return this.menuForm.isRelated === "Y";
    },
  },
  async created() {
    await this.init();
    await this.queryDictData();
    await this.moduleChange(this.$route.query.clientType);
    await this.getDetails();
    await this.queryIdeWebLink();
  },
  methods: {
    queryIdeWebLink() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/idewebpage/list-search-key`, {
          params: { enableFlag: "Y" },
        })
        .then((res) => {
          const { data } = res.data;
          this.webLinkList = data.map((item) => {
            return {
              label: item.pageName,
              value: item.id,
            };
          });
        });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text
        .toLowerCase()
        .includes(input.toLowerCase());
    },
    queryDictData() {
      // 获取 权重
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/user/list-low-weight`)
        .then((res) => {
          this.weightList = res.data?.data;
        });
      this.$set(this.menuForm, "weight", "20");
      // 类型
      this.getDictByCode("DIC:CORE:I18N_TYPE").then((res) => {
        this.typeList = res.data?.data;
      });
      this.getDictByCode("DIC:CORE:SYS_MENU_TPYE").then((res) => {
        this.menuTypeList = res.data?.data;
      });
      this.getDictByCode("DIC:CORE:MOM_VERSION").then((res) => {
        this.clientTypeList = res.data.data || [];
      });
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/report/report-server/list?enableFlag=Y`
        )
        .then((res) => {
          this.reportServerList = res.data.data;
        });
    },
    init() {
      return Promise.all([
        // 获取 菜单类型
        this.getDictByCode("DIC:CORE:SYS_MENU_TPYE"),
        // 获取 菜单外链类型
        this.getDictByCode("DIC:CORE:SYS_FRAME_TYPE"),
        // 获取 菜单外链打开类型
        this.getDictByCode("DIC:CORE:SYS_OUTER_LINK_OPEN_TYPE"),
        // 获取 Y/N <==> 是否
        this.getDictByCode("DIC:COMMON:WHETHER_CHAR"),
        // 终端
        this.getDictByCode("DIC:CORE:MENU_CLIENT"),
      ]).then(
        ([menuTypeRes, frameTypeRes, openTypeRes, whetherRes, clientRes]) => {
          this.menuTypeList = menuTypeRes.data?.data;
          this.menuFrameList = frameTypeRes.data?.data;
          this.menuFrameOpenList = openTypeRes.data?.data;
          this.whetherCharList = whetherRes.data?.data;
          this.moduleList = clientRes.data.data;
          const row = this.moduleList
            .filter((item) => item.value === this.$route.query.parentId)
            .shift();
          this.parentMenuName = row?.label || "";
        }
      );
    },
    getDetails() {
      const list = JSON.parse(JSON.stringify(this.oldMenuAllList));
      this.deleteSelf(list, this.$route?.query?.id);
      this.menuAllList = list;
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/sys/menu/get-by-id/${this.$route.query.id}`
        )
        .then((res) => {
          const { data } = res.data;
          this.menuForm = {
            ...data,
            mobileAppFlag: `${data.mobileAppFlag}`,
            clientType: data.clientType,
            name: `${data.menuName}(${data.dataValue})`,
            parentMenuCode: data.parentMenuCode,
            parentId: data.parentId,
            menuCode: data.menuCode,
            menuName: data.menuName,
            keepAlive: (data.keepAlive && `${data.keepAlive}`) || "0",
            menuTag: data.menuTag || "",
            weight: `${data.weight}` || this.defaultWeight,
          };
          if (data.parentId === "0") {
            this.parentMenuName = data.clientType;
            this.disabled = true;
          }
        });
    },
    // 表单中的组织选择
    handleChangeFormDept(value) {
      // eslint-disable-next-line vue/no-mutating-props
      this.menuForm.parentId = value;
    },
    // 是否显示外链
    isFrameChange() {
      this.menuForm.openType = "";
      this.menuForm.frameType = "";
      this.menuForm.isRelated = "N";
      this.menuForm.menuPath = "";
      this.menuForm.reportServerCode = "";
    },
    // 模块切换，获取菜单
    async moduleChange(moduleCode) {
      await this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/sys/menu/list-system-menu/${moduleCode}`
        )
        .then((res) => {
          deleteLeafArray(res.data.data, "children");
          this.menuListCode = getLevelMark(res.data.data, "children", "code");
          const fn = (data, arr = []) => {
            data.forEach((item) => {
              arr.push({
                ...item,
                menuTypeText: this.getAttrValue(
                  this.menuTypeList,
                  item.menuType
                ),
                isFrameText: this.getAttrValue(
                  this.whetherCharList,
                  item.isFrame
                ),
                openTypeText: this.getAttrValue(
                  this.menuFrameOpenList,
                  item.openType
                ),
                frameTypeText: this.getAttrValue(
                  this.menuFrameList,
                  item.frameType
                ),
                visibleText: this.getAttrValue(
                  this.whetherCharList,
                  item.visible
                ),
              });
              if (item.children && item.children.length) {
                // eslint-disable-next-line no-param-reassign
                arr[arr.length - 1].children = [];
                fn(item.children, arr[arr.length - 1].children);
              }
            });
            return arr;
          };
          this.menuList = fn(res.data.data);
          this.oldMenuAllList = fn(res.data.data);
          this.getDeptCodeList(this.oldMenuAllList, "0");
        });
    },
    // 数据重构
    getDeptCodeList(list, parentIndex) {
      list.forEach((item, index) => {
        const data = item;
        const cIndex = index;
        data.value = item.id;
        data.title = this.$t(item.menuName);
        data.key = `${parentIndex}-${cIndex}`;
        if (item.children && item.children.length) {
          if (item.children[0].menuType === "BUTTON") {
            data.children = [];
          } else {
            this.getDeptCodeList(item.children, data.key);
          }
        }
      });
    },
    // 去掉自身
    deleteSelf(list, self) {
      const index = list.findIndex((item) => item.id === self.id);
      if (index >= 0) {
        list.splice(index, 1);
        return;
      }
      list.forEach((item) => {
        if (item.children && item.children.length) {
          this.deleteSelf(item.children, self);
        }
      });
    },
    saveMenuCodeI18n(val) {
      this.$set(this.menuForm, "menuName", val);
    },
    // 选择图标
    selected(name) {
      this.menuForm.icon = name;
    },
    // eslint-disable-next-line
    async confirm() {
      // 表单验证
      const valid = await this.$refs.menuForm.validate();
      if (!valid) {
        return false;
      }
      let reqKeys = [];
      const defaultKeys = [
        "parentId",
        "id",
        "clientType",
        "menuType",
        "menuName",
        "seq",
        "weight",
        "ideWebPageId",
      ];
      const frameKeys = [
        "isFrame",
        "frameType",
        "reportServerCode",
        "openType",
        "menuPath",
      ];
      const componentKeys = ["keepAlive", "component", "menuPath"];
      const { menuType } = this.menuForm;
      if (menuType === "MODULE") {
        reqKeys = [
          "perms",
          "visible",
          "mobileAppFlag",
          "appHomeUrl",
          "icon",
          "backgroundColor",
          "isRelated",
        ]
          .concat(defaultKeys)
          .concat(frameKeys);
      } else if (menuType === "CONTENTS") {
        reqKeys = ["perms", "icon", "visible", "isRelated"]
          .concat(defaultKeys)
          .concat(frameKeys);
      } else if (menuType === "MENU") {
        reqKeys = ["perms", "icon", "visible", "backgroundColor"]
          .concat(defaultKeys)
          .concat(frameKeys)
          .concat(componentKeys);
      } else if (menuType === "BUTTON") {
        reqKeys = ["perms", "isRelated", "menuTag"]
          .concat(defaultKeys)
          .concat(componentKeys);
      }
      const req = reqKeys.reduce((result, curr) => {
        // eslint-disable-next-line no-param-reassign
        result[curr] = this.menuForm[curr];
        return result;
      }, {});

      try {
        await this.$axios.put(`${ApiConstant.PREFIX_CORE}/api/sys/menu`, {
          ...req,
          id: this.$route.query?.id,
        });
        this.$message.success(this.$t("EDIT_SUCCESS"));
        this.moduleChange(this.menuForm.clientType);
        this.$store.dispatch("tagsView/jumpBeforeView", {
          to: { path: "/upms/system/setting/menu" },
          vm: this,
        });
      } catch (_e) {}
    },
    cancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/system/setting/menu" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.menuForm .transparentDiv {
  position: absolute;
  left: 10px;
  width: 230px;
  top: -5px;
  height: 30px;
  color: #606266;
  font-size: inherit;
  line-height: 30px;
  z-index: 9;
}
.disabledStatus {
  background: rgb(245, 245, 245);
  z-index: 1;
}
</style>
