<template>
  <div class="system-menu-dialog-container">
    <el-dialog
      v-model="state.dialog.isShowDialog"
      :close-on-click-modal="false"
      width="400px"
      draggable
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>{{ state.dialog.title }}</span>
        </div>
      </template>
      <el-form
        ref="menuDialogFormRef"
        :model="state.ruleForm"
        :rules="rules"
        size="default"
        label-width="80px"
        style="height: 400px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="菜单类型">
              <el-radio-group v-model="state.ruleForm.type">
                <el-radio-button label="0">目录</el-radio-button>
                <el-radio-button label="1">菜单</el-radio-button>
                <el-radio-button label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <template v-if="state.ruleForm.type != '0'">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
              <el-form-item label="上级菜单" prop="parentId">
                <selectTree ref="tree" @getvalue="getval"></selectTree>
              </el-form-item>
            </el-col>
          </template>
          <el-col :xs="24" class="mb20">
            <el-form-item label="菜单名称" prop="title">
              <el-input
                v-model="state.ruleForm.title"
                placeholder="请输入菜单名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="state.ruleForm.type == '0'">
            <el-col :xs="24" class="mb20">
              <el-form-item label="菜单图标">
                <IconSelector
                  placeholder="请输入菜单图标"
                  v-model="state.ruleForm.icon"
                  clearable
                />
              </el-form-item>
            </el-col>
          </template>
          <template v-if="state.ruleForm.type != '2'">
            <el-col :xs="24" class="mb20">
              <el-form-item label="路由地址" prop="href">
                <el-input
                  v-model="state.ruleForm.href"
                  placeholder="请输入路由地址"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="state.ruleForm.type == '2'">
            <el-col :xs="24" class="mb20">
              <el-form-item label="权限标识">
                <el-input
                  v-model="state.ruleForm.code"
                  placeholder="权限标识：sys:menu:main"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="state.ruleForm.type == '1'">
            <el-col :xs="24" class="mb20">
              <el-form-item label="菜单图标">
                <IconSelector
                  placeholder="请输入菜单图标"
                  v-model="state.ruleForm.icon"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" class="mb20">
              <el-form-item label="权限标识">
                <el-input
                  v-model="state.ruleForm.code"
                  placeholder="权限标识：sys:menu:main"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :xs="24" class="mb20">
            <el-form-item label="菜单排序">
              <el-input-number
                v-model="state.ruleForm.sort"
                :min="0"
                controls-position="right"
                placeholder="请输入排序"
                class="w100"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{
            state.dialog.submitTxt
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import { defineAsyncComponent, reactive, onMounted, ref, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { useRoutesList } from "/@/stores/routesList";
import { menuApi } from "/@/api/sys/menu";
import { ElMessage } from "element-plus";

const emit = defineEmits(["refresh"]);

// 引入组件
const IconSelector = defineAsyncComponent(
  () => import("/@/components/iconSelector/index.vue")
);

// 引入组件
const selectTree = defineAsyncComponent(
  () => import("/@/components/treeselect/index.vue")
);
function getval(e: any) {
  state.ruleForm.parentId = e;
}
// 定义变量内容
const menuDialogFormRef = ref();
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const state = reactive({
  // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
  ruleForm: {} as any,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "",
  },
});

// 表单验证
const rules = reactive({
  title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
});

let formRal = {
  parentId: 0, //上级菜单
  title: "", //菜单标题
  type: "0", //菜单类型 0-目录 1-菜单 2-按钮
  code: "", //菜单权限标识
  href: "", //菜单地址
  icon: "", //菜单icon
  sort: 0, //菜单排序
  enable: 1, //启用标识 0禁用 1启用
  delFlag: 1, //删除标识 0删除 1:正常
  isAuthType: true, ///是否拥有权限
};

const tree = ref();
// 打开弹窗
const openDialog = (type: string, rows?: any) => {
  if (type === "edit") {
    let row = Object.assign({}, rows);
    if (row.type != 0) {
      setTimeout(() => {
        tree.value.seelctsetitem(row.parentId);
      }, 500);
    }
    // 模拟数据，实际请走接口
    state.dialog.title = "修改菜单";
    state.dialog.submitTxt = "修 改";
    state.ruleForm = {
      id: row.id,
      parentId: row.parentId, //上级菜单
      title: row.title, //菜单标题
      type: row.type, //菜单类型 0-目录 1-菜单 2-按钮
      code: row.code, //菜单权限标识
      href: row.href, //菜单地址
      icon: row.icon, //菜单icon
      sort: row.sort, //菜单排序
      enable: row.enable, //启用标识 0禁用 1启用
      delFlag: row.delFlag, //删除标识 0删除 1:正常
    };
  } else {
    state.dialog.title = "新增菜单";
    state.dialog.submitTxt = "新 增";
    state.ruleForm = Object.assign({}, formRal);
  }
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let menuFrom = state.ruleForm;
  if (menuFrom.title == "") return ElMessage.error("请输入菜单名称");
  if (menuFrom.type == "0") {
    // 目录
    if (menuFrom.href == "") return ElMessage.error("请输入路由地址");
  } else if (menuFrom.type == "1") {
    // 菜单
    if (menuFrom.parentId == "") return ElMessage.error("请选择上级菜单");
    if (menuFrom.href == "") return ElMessage.error("请输入路由地址");
    if (menuFrom.enable == "") return ElMessage.error("请选择权限状态");
  } else {
    // 按钮
    if (menuFrom.parentId == "") return ElMessage.error("请选择上级菜单");
  }

  if (state.dialog.type == "edit") {
    // 修改菜单
    let item = await menuApi().putMenu(state.ruleForm);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog(); // 关闭弹窗
      emit("refresh");
    } else {
      ElMessage.error(item.msg);
    }
  } else {
    // 新增菜单
    let item = await menuApi().setMenu(state.ruleForm);
    if (item.code == 200) {
      ElMessage.success(item.msg);
      closeDialog(); // 关闭弹窗
      emit("refresh");
    } else {
      ElMessage.error(item.msg);
    }
  }
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>
