<template>
  <div class="template_content">
    <div class="content_box">
      <!-- 操作 -->
      <div class="table_top">
        <a-button-group>
          <a-button icon="plus" type="primary" @click="addMenu('add')">添加</a-button>
          <a-button icon="edit" type="primary" @click="editMenu('edit')">修改</a-button>
          <a-button icon="delete" type="primary" @click="delMenu('del')">删除</a-button>
        </a-button-group>
      </div>
      <div>
        <a-row type="flex" justify="space-between">
          <a-col :span="4" class="col-h">
            <a-tree
              :treeData="menuTreeData"
              :replaceFields="menuReplaceFields"
              defaultExpandAll
              @select="onMenuCheck"
              checkStrictly
              showLine
            />
          </a-col>
          <a-col :span="16">
            <a-form :form="modalForm" @submit="modalHandleSubmit">
              <a-form-item
                label="父级名称"
                :label-col="{ span: 3 }"
                :wrapper-col="{ span: 21 }"
              >
                <a-input disabled v-decorator="['parentName']" placeholder="空" />
              </a-form-item>
              
              <a-form-item label="菜单名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input
                  v-decorator="['name', { rules: [{ required: true, message: '菜单名称不能为空'  }] }]"
                  placeholder="请输入菜单名称"
                />
              </a-form-item>
              <a-form-item
                label="权限"
                :label-col="{ span: 3 }"
                :wrapper-col="{ span: 21 }"
              >
                <a-input v-decorator="['perms']" placeholder="请输入权限" />
              </a-form-item>
              <a-form-item label="菜单图标" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input v-decorator="['icon']" placeholder="请输入图标名称" />
              </a-form-item>
              <a-form-item label="菜单类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-select
                  v-decorator="[
          'type',
          { rules: [{ required: true, message: '类型不能为空' }] },
        ]"
                  placeholder="请选择类型"
                >
                  <a-select-option value="FOLDER">目录</a-select-option>
                  <a-select-option value="MENU">菜单</a-select-option>
                  <a-select-option value="BUTTON">按扭</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="序号" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input v-decorator="['orderNum']" placeholder="请输入序号" />
              </a-form-item>
              </a-form-item>
              <a-form-item label="路径" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input v-decorator="['url']" placeholder="请输入路径" />
              </a-form-item>
              <a-form-item v-show="btnShowType" :wrapper-col="{ span: 21, offset: 3 }">
                <a-button
                  type="primary"
                  html-type="submit"
                  class="btn_right_margin"
                >保存</a-button>
                <a-button @click="onCancel">取消</a-button>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="4"/>
            
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
// 导入接口
import {
  addObj,
  delObj,
  fetchMenuTree,
  getObj,
  putObj
} from "@/api/admin/menu";
import { disposereq } from "@/utils/util";
export default {
  data() {
    return {
      modalForm: this.$form.createForm(this, { name: "coordinated" }),
      menuTreeData: [],
      menuReplaceFields: {
        children: "children",
        title: "name",
        key: "id"
      },
      checkData: "",
      btnType: "",
      btnShowType: false
    };
  },
  // 创建完毕
  created() {
    this.GetAllMenu();
  },
  // 即将更新渲染
  beforeUpdate() {
  },
  methods: {
    // 获取所有菜单
    GetAllMenu() {
      fetchMenuTree()
        .then(res => {
          if (res.resp_code == 200) {
            this.menuTreeData = res.datas.roots;
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch(err => {
          disposereq(this, err);
        });
    },
    getMenuInfo(menuId){
      getObj(menuId).then(res => {
        if(res.resp_code == 200){
          this.btnShowType = false;
          this.checkData = res.datas;
          this.$nextTick(()=>{
            this.modalForm.setFieldsValue({
              parentName: this.checkData.parentName,
              name: this.checkData.name,
              perms: this.checkData.perms,
              icon: this.checkData.icon,
              type: this.checkData.type,
              orderNum: this.checkData.orderNum,
              url: this.checkData.url
            });
          });
        }else{
          this.$message.info(res.resp_msg);
        }
      }).catch(err => {
        disposereq(this, err);
      });
    },
    // 菜单选中事件
    onMenuCheck(checkedKeys, info) {
      if(checkedKeys && checkedKeys.length > 0){
        this.getMenuInfo(checkedKeys);
      }else{
        this.checkData = "";
        this.$nextTick(() => {
          this.modalForm.setFieldsValue({
            parentName: "",
            name: "",
            perms: "",
            icon: "",
            type: "",
            orderNum: "",
            url: ""
          });
        });
      }
      
    },
    // 添加菜单
    addMenu(type) {
      this.btnType = type;
      this.btnShowType = true;
      if (this.checkData == "") {
        
      } else {
        this.$nextTick(() => {
          this.modalForm.setFieldsValue({
            parentName: this.checkData.name,
            name: "",
            perms: "",
            icon: "",
            type: "",
            orderNum: "",
            url: ""
          });
        });
      }
    },
    // 编辑菜单
    editMenu(type) {
      this.btnType = type;
      if (this.checkData == "") {
        this.$message.info('请先选择菜单');
      } else {
        this.btnShowType = true;
      }
    },
    // 删除菜单
    delMenu(type) {
      this.btnType = type;
      this.btnShowType = false;
      if (this.checkData == "") {
        this.$message.info('请先选择菜单');
      } else {
        delObj(this.checkData.id)
          .then(res => {
            if (res.resp_code == 200) {
              this.GetAllMenu();
              this.$message.success('删除成功');
            } else {
              this.$message.info(res.resp_msg);
            }
          })
          .catch(err => {
            this.$message.info(err);
          });
      }
    },
    // 提交事件
    modalHandleSubmit(e) {
      e.preventDefault();
      this.modalForm.validateFields((err, values) => {
        if (!err && this.btnType == "add") {
          let menuObj = {};
          menuObj.parentId = this.checkData == "" ? 0 : this.checkData.id;
          menuObj.name = values.name;
          menuObj.perms = values.perms ? values.perms : "";
          menuObj.icon = values.icon ? values.icon : "";
          menuObj.type = values.type;
          menuObj.orderNum = values.orderNum ? values.orderNum : this.checkData == "" ? 0 : this.checkData.orderNum + 1
          menuObj.url = values.url ? values.url : ""
          // console.log(menuObj)
          addObj(menuObj)
            .then(res => {
              if (res.resp_code == 200) {
                this.GetAllMenu();
                this.$message.success('添加成功');
              } else {
                this.$message.info(res.resp_msg);
              }
            })
            .catch(err => {
              this.$message.info(err);
            });
        } else if (!err && this.btnType == "edit") {
          values.id = this.checkData.id;
          values.parentId = this.checkData.parentId;
          // console.log(values)
          putObj(values)
            .then(res => {
              if (res.resp_code == 200) {
                this.GetAllMenu();
                this.$message.success('编辑成功');
              } else {
                this.$message.info(res.resp_msg);
              }
            })
            .catch(err => {
              this.$message.info(err);
            });
        }
      });
    },
    onCancel(e){
      // console.log("cancel")
      this.btnShowType = false;
      if(this.checkData != ""){
        this.getMenuInfo(this.checkData.id);
      }
      
    }
  }
};
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.content_box {
  width: 100%;
  background-color: #fff;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
.btn_right_margin {
  margin-right: 10px;
}
.col-h{
  min-height: 400px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 1px;
}
</style>