<template>
  <div>
    <el-dialog
      :title="title"
      :destroy-on-close="true"
      :visible.sync="Visible"
      width="650px"
      @close="handleClose"
      :close-on-click-modal="false"
      top="10vh"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="130px"
      >
        <el-form-item label="父级菜单" prop="parentId">
          <treeselect
            v-model="form.parentId"
            :options="menuList"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择父级菜单"
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="form.menuType">
            <el-radio
              v-for="(item, key) in dict.menuType"
              :key="key"
              :label="Number(key)"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="name">
          <el-input
            placeholder="请输入菜单名称"
            v-model="form.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="imgPath" v-if="form.menuType != 2">
          <IconSelect v-model="form.imgPath"></IconSelect>
        </el-form-item>

        <el-form-item
          label="权限类型"
          prop="authType"
          v-if="form.menuType != 2"
        >
          <el-select
            clearable
            v-model="form.authType"
            placeholder="请选择权限类型"
          >
            <el-option
              v-for="(item, key) in dict.authType"
              :key="key"
              :label="item"
              :value="Number(key)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="url" v-if="form.menuType != 2">
          <span slot="label">
            <el-tooltip content="访问的路由地址，如：`system`" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
            路由地址
          </span>
          <el-input
            clearable
            placeholder="请输入菜单路由地址"
            v-model="form.url"
          ></el-input>
        </el-form-item>
        <el-form-item prop="component" v-if="form.menuType != 2">
          <span slot="label">
            <el-tooltip
              content="访问的组件路径，如：`pages/system/menu/Menu`，默认在`src`目录下"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            组件路径
          </span>
          <el-input
            clearable
            placeholder="请输入组件路径"
            v-model="form.component"
          ></el-input>
        </el-form-item>
        <el-form-item prop="activeDir" v-if="form.menuType != 2">
          <span slot="label">
            <el-tooltip content="顶部菜单栏激活路由" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
            激活菜单
          </span>
          <el-input
            clearable
            placeholder="请输入激活菜单地址"
            v-model="form.activeDir"
          ></el-input>
        </el-form-item>
        <el-form-item prop="perms" v-if="form.menuType == 2">
          <span slot="label">
            <el-tooltip
              content="控制器中定义的权限字符，如：'system:menu:add'"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            权限字符
          </span>
          <el-input
            clearable
            placeholder="请输入权限字符"
            v-model="form.perms"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12" v-if="form.menuType != 2">
            <el-form-item prop="visible">
              <span slot="label">
                <el-tooltip
                  content="控制路由和子路由是否显示在菜单栏"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model="form.visible">
                <el-radio
                  v-for="(item, key) in dict.visible"
                  :key="key"
                  :label="Number(key)"
                  >{{ item }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 2">
            <el-form-item prop="cache">
              <span slot="label">
                <el-tooltip
                  content="选择是则会被`keep-alive`缓存"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否缓存
              </span>
              <el-radio-group v-model="form.cache">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="form.menuType != 2">
            <el-form-item prop="hideChildrenInMenu">
              <span slot="label">
                <el-tooltip
                  content="强制菜单显示为Item而不是SubItem"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否隐藏子菜单
              </span>
              <el-radio-group v-model="form.hideChildrenInMenu">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="(item, key) in dict.status"
                  :key="key"
                  :label="Number(key)"
                  >{{ item }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleRest">重 置</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="handleOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveMenu } from "@/api/system";
import IconSelect from "./IconSelect.vue";
import iconJson from "@/assets/icon.json";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    IconSelect,
    Treeselect,
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "",
    },
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
    menuList: {
      required: true,
      type: Array,
      default: () => [],
    },
    dict: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      iconJson,
      loading: false,
      defaultProps: {
        children: "childList",
        label: "name",
      },
      form: {
        name: "", // 菜单名称
        url: "", // 路由地址
        ancestors: "", // 当前激活根目录
        parentId: 0, // 父菜单ID，一级菜单的该字段值为-1
        linkType: 0, // 链接方式 (0.普通，1.弹出，2.脚本)
        imgPath: "", // 主菜单图标，主菜单图标的css样式名
        buttonImgPath: "", // 按钮图标，按钮图标的css样式名
        imgCommPath: "", // 常用菜单图标，常用菜单图标的css样式名
        commMenu: 1, // 是否常用菜单 (0.非常用，1.常用)
        component: "", // vue组件路径
        menuType: 0, // 菜单类型 (0.目录，1.菜单，2.按钮)
        authType: 0, // 权限类型 (0.无限制，1.无需登录查看，2.需要登录查看，3.需要角色权限查看)
        visible: 0, // 菜单显示状态 (0.显示，1.隐藏)
        perms: "", // 权限标识，多个逗号分割
        remark: "", // 备注信息
        orderId: "", // 排序编号
        status: 1, // 菜单状态 (0.停用，1.启用)
        cache: 0, // 是否缓存
        activeDir: "", // 激活菜单
        hideChildrenInMenu: 1, // 是否隐藏子菜单
      },
      rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        url: [
          { required: true, message: "请输入菜单访问地址", trigger: "blur" },
        ],
        component: [
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        authType: [
          { required: true, message: "请输入选择权限类型", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    Visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  methods: {
    // 确定
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let res = await saveMenu(this.form);
          let { code, msg } = res.data;
          if (code === 1) {
            this.$message.success(msg);
            this.$emit("success");
            this.handleClose();
          }
          this.loading = false;
        }
      });
    },
    // 新增
    onAdd() {
      Object.assign(this.form, this.$options.data().form);
      this.form.id && this.$delete(this.form, "id");
    },
    // 编辑
    onEdit(row) {
      setTimeout(() => {
        this.form = { ...row };
      }, 10);
    },
    // 重置
    handleRest() {
      this.$resetForm("form");
    },
    // 关闭
    handleClose() {
      this.$resetForm("form");
      this.Visible = false;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.childList && !node.childList.length) {
        delete node.childList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList,
      };
    },
    changeParent(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="less" scoped>
// :deep(.el-dialog__body) {
//   max-height: 600px;
//   overflow: auto;
// }
:deep(.el-select) {
  width: 100%;
}
</style>