<template>
  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
    <a-spin :spinning="loading">
      <a-icon slot="indicator" spin type="loading" />
      <a-alert type="warning">
        <template slot="message">当前没有写入字段[重定向]</template>
      </a-alert>
      <br />
      <div class="yo-form-group">
        <!-- 表单控件 -->
        <h3>基本信息</h3>
        <div class="yo-form-group">
          <a-form-model-item label="菜单类型" prop="type">
            <template slot="help">
              目录：默认添加在顶级
              <br />菜单：
              <br />按钮：
            </template>
            <a-radio-group @change="onTypeChange" v-model="form.type">
              <a-radio-button
                :key="type.code"
                :value="type.code"
                v-for="type in codes.menuType"
              >{{ type.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="名称" prop="name">
            <a-input placeholder="请输入名称" v-model="form.name" />
          </a-form-model-item>
          <a-form-model-item label="唯一编码" prop="code">
            <a-input placeholder="请输入唯一编码" v-model="form.code" />
          </a-form-model-item>
          <a-form-model-item label="所属应用" prop="application">
            <a-select @change="onLoadMenuTree" placeholder="请选择所属应用" v-model="form.application">
              <a-select-option
                :key="item.code"
                :value="item.code"
                v-for="item in appList"
              >{{ item.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 父级菜单只有[目录]不可用 -->
          <a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
            <a-tree-select
              :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
              :tree-data="parentTreeData"
              placeholder="请选择父级菜单"
              v-model="form.pid"
            />
          </a-form-model-item>
        </div>

        <h3>扩展信息</h3>
        <div class="yo-form-group">
          <a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
            <a-radio-group @change="onOpenTypeChange" v-model="form.openType">
              <a-radio-button
                :key="type.code"
                :value="type.code"
                v-for="type in codes.openType"
              >{{ type.value }}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <!-- 前端组件只有[菜单]及[组件]可用 -->
          <a-form-model-item
            label="前端组件"
            prop="component"
            v-if="form.type == 1 && form.openType == 1"
            v-show="form.type == 1 && form.openType == 1"
          >
            <a-input placeholder="请输入前端组件" v-model="form.component" />
          </a-form-model-item>
          <!-- 内链地址只有[菜单]及[内链]可用 -->
          <a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
            <a-input placeholder="请输入内链地址" v-model="form.router" />
          </a-form-model-item>
          <!-- 外链地址只有[菜单]及[外链]可用 -->
          <a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
            <a-input placeholder="请输入内外链地址" v-model="form.link" />
          </a-form-model-item>
          <!-- <a-form-model-item label="权重" prop="weight">
            <template slot="help">
              系统权重：菜单可分配给任何角色
              <br />业务权重：菜单对超级管理员不可见
            </template>
            <a-radio-group v-model="form.weight">
              <a-radio-button
                :key="type.code"
                :value="type.code"
                v-for="type in codes.menuWerght"
              >{{type.value}}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>-->
          <a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
            <a-input placeholder="请输入权限标识" v-model="form.permission" />
          </a-form-model-item>
          <a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
            <a-switch v-model="form.visibleParent" />
          </a-form-model-item>
          <a-form-model-item label="可见性">
            <a-switch v-model="form.visible" />
          </a-form-model-item>
          <!-- 图标只有[按钮]不可用 -->
          <a-form-model-item label="图标" v-if="form.type != 2">
            <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
              <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
              <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="排序">
            <a-input-number
              :max="1000"
              :min="0"
              class="w-100-p"
              placeholder="请输入排序"
              v-model="form.sort"
            />
          </a-form-model-item>
          <a-form-model-item label="备注信息">
            <a-textarea placeholder="请输入备注信息" v-model="form.remark" />
          </a-form-model-item>
        </div>
      </div>
    </a-spin>

    <yo-icon-selector ref="icon-selector" v-model="form.icon" />
  </a-form-model>
</template>
<script>
import { EMPTY_ID } from '@/util/global';

import YoIconSelector from '@/components/yoIconSelector';

const defaultValue = {
  type: '1',
  openType: '1',
  weight: '1',
  visibleParent: false,
  visible: true,
  sort: 100,
};

export default {
  components: {
    YoIconSelector,
  },

  data() {
    return {
      /** 表单数据 */
      form: {},
      /** 验证格式 */
      rules: {
        type: [{ required: true, message: '请选择菜单类型' }],
        name: [{ required: true, message: '请输入名称' }],
        code: [{ required: true, message: '请输入唯一编码' }],
        application: [{ required: true, message: '请选择所属应用' }],
        pid: [{ required: true, message: '请选择父级' }],
        component: [{ required: true, message: '请输入前端组件' }],
        router: [{ required: true, message: '请输入内链地址' }],
        link: [{ required: true, message: '请输入外链地址' }],
        permission: [{ required: true, message: '请输入权限标识' }],
      },

      /** 加载异步数据状态 */
      loading: false,

      /** 其他成员属性 */
      /** ... */
      appList: [],
      codes: {
        menuType: [],
        menuWerght: [],
        openType: [],
      },

      parentTreeData: [],
    };
  },

  methods: {
    /**
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
    onFillData(params) {
      /** 将默认数据覆盖到form */
      let form = {
        ...defaultValue,
        ...params.record,
        /** 在此处添加默认数据转换 */
        /** ... */
      };

      if (params.isParent) {
        form.pid = params.parent.id;
        form.application = params.parent.application;
      }

      this.form = this.$_.cloneDeep(form);
    },

    /**
     * 必要方法
     * 验证表单并获取表单数据
     */
    onGetData() {
      return new Promise((reslove, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
            /** ... */

            reslove(record);
          } else {
            reject();
          }
        });
      });
    },

    /**
     * 必要的方法
     * 在外部窗口进行保存时调用表单验证
     */
    onValidate(callback) {
      this.$refs.form.validate(callback);
    },

    /**
     * 必要的方法
     * 在外部窗口关闭或重置时对表单验证进行初始化
     */
    onResetFields() {
      setTimeout(() => {
        this.$refs.form.resetFields();
        this.form = {
          ...defaultValue,
        };

        /** 在这里可以初始化当前组件中其他属性 */
        /** ... */
        this.parentTreeData = [];
      }, 300);
    },

    /**
     * 必要方法
     * 加载当前表单中所需要的异步数据
     */
    async onInit(params) {
      this.loading = true;

      /** 可以在这里await获取一些异步数据 */
      /** ...BEGIN */
      this.codes = await this.onLoadCodes();
      this.appList = await this.onLoadSysApplist();
      if (params.isParent) {
        await this.onLoadMenuTree(params.parent.application);
      } else if (params.record) {
        await this.onLoadMenuTree(params.record.application);
      }
      /** ...END */
      this.loading = false;
    },

    /** 当前组件的其他方法 */
    /** ... */
    onLoadCodes() {
      return this.$api
        .$queue([
          this.$api.sysDictTypeDropDownAwait({ code: 'menu_type' }),
          this.$api.sysDictTypeDropDownAwait({ code: 'menu_weight' }),
          this.$api.sysDictTypeDropDownAwait({ code: 'open_type' }),
        ])
        .then(([menuType, menuWerght, openType]) => {
          return {
            menuType: menuType.data,
            menuWerght: menuWerght.data,
            openType: openType.data,
          };
        });
    },

    onLoadSysApplist() {
      return this.$api.getAppList().then(({ data }) => {
        return data;
      });
    },

    onLoadMenuTree(app) {
      return this.$api.getMenuTree({ application: app }).then(({ data }) => {
        this.parentTreeData = [
          {
            id: EMPTY_ID,
            parentId: undefined,
            title: '顶级',
            value: EMPTY_ID,
            pid: undefined,
            children: data,
          },
        ];
      });
    },

    onTypeChangeGroup() {
      const { type, openType } = this.form;
      if (type == 1 && openType == 2) {
        this.$set(this.form, 'component', 'iframe');
      } else {
        this.$set(this.form, 'component', '');
      }
    },

    onTypeChange() {
      this.onTypeChangeGroup();

      if (this.form.type == 0 || this.form.type == 2) {
        this.form.openType = '0';
      } else {
        this.form.openType = '1';
      }
    },

    onOpenTypeChange() {
      this.onTypeChangeGroup();
    },

    onOpenSelectIcon() {
      this.$refs['icon-selector'].onOpen(this.form.icon);
    },

    onSelectIcon(icon) {
      this.$set(this.form, 'icon', icon);
    },
  },
};
</script>