<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="medium" 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">
          <icon-select v-model="form.imgPath"></icon-select>
        </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="medium" @click="handleRest">重 置</el-button>
        <el-button size="medium" 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>
