<!--
  @description: 菜单管理-新增菜单/菜单编辑弹框
  @author: 肖文龙
  @routerPath:
  @date:  2020/11/04
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form
        ref="fromData"
        :rules="rules"
        :model="fromData"
        :inline-message="true"
      >
        <table class="from_table mb10">
          <tr>
            <td><el-form-item label="是否可用" prop="functionType" /></td>
            <td>
              <el-radio-group v-model="fromData.functionType">
                <el-radio :label="1">
                  是
                </el-radio>
                <el-radio :label="0">
                  否
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!-- 新增时展示 -->
          <tr v-if="type==='add'">
            <td><el-form-item label="菜单等级" prop="functionLevel" /></td>
            <td>
              <el-radio-group v-model="fromData.functionLevel">
                <el-radio :label="0">
                  一级菜单
                </el-radio>
                <el-radio :label="1">
                  二级菜单
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <!-- 菜单级别为一级时 && 菜单不为编辑时展示 -->
          <tr v-if="fromData.functionLevel===1&&type!=='edit'">
            <td><el-form-item label="上级菜单" prop="id" /></td>
            <td>
              <!-- 弹框类型为新增子级时 不可编辑 -->
              <el-select v-model="fromData.id" :disabled="type==='rowAdd'" placeholder="请选择" filterable>
                <el-option
                  v-for="item in menuList"
                  :key="item.id"
                  :label="item.functionname"
                  :value="item.id"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="菜单名称" prop="functionname" /></td>
            <td>
              <gx-input
                v-model="fromData.functionname"
                gx-maxlength="varchar200"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="前端地址" prop="functionUrl" /></td>
            <td>
              <gx-input
                v-model="fromData.functionUrl"
                gx-maxlength="varchar200"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="icon图标" prop="functionIconStyle" /></td>
            <td>
              <gx-input
                v-model="fromData.functionIconStyle"
                gx-maxlength="varchar100"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="排序" prop="functionOrder" /></td>
            <td>
              <!--金额组件-->
              <money
                :unit-fixed="0"
                :money-value="fromData"
                name="functionOrder"
              />
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">
          确定
        </el-button>
        <el-button @click="dialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import {
  createMenu,
  updateMenu
} from '@/api/rolemanagment/menu'
/* 常用方法 */
import { En_Ch_NumTest, characters1_auto, validateRoleCode } from '@/assets/js/validate'
/* 组件*/
import money from '@comp/common/money/money' // 数字组件
export default {
  name: 'MenuAddDialog',
  components: {
    money
  },
  props: {
    // 菜单列表
    menuList: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 添加成功回调
    callBack: {
      type: Function,
      default: function() {}
    }
  },
  data() {
    return {
      dialog: false, // 弹框打开状态
      title: '', // 标题
      type: '', // add新增 edit 编辑
      fromData: {
        id: '', // 编辑id/新增子节点时的父级ID
        functionname: '', // 菜单名称
        functionUrl: '', // 前端地址
        functionType: 1, // 是否可用 1可用 0 不可用
        functionOrder: '', // 排序
        functionIconStyle: '', // icon图标
        functionLevel: 0, // 菜单等级 0 一级 1 二级
        parentIds: ''// 父级id
      },
      rules: {
        // 校验
        id: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 编辑id/新增子节点时的父级IDå
        functionname: [{ required: true, validator: En_Ch_NumTest, trigger: 'blur' }], // 菜单名称
        functionType: [{ required: true, validator: characters1_auto, trigger: 'change' }], // 是否可用
        functionLevel: [{ required: true, validator: characters1_auto, trigger: 'change' }], // 菜单等级
        functionUrl: [{ required: true, validator: validateRoleCode, trigger: 'blur' }], // 前端地址
        functionOrder: [{ required: true, validator: characters1_auto, trigger: 'blur' }]// 排序
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹框
    open(data) {
      this.dialog = true // 打开弹框
      this.type = data.type
      this.title = data.type === 'add' || data.type === 'rowAdd' ? '新增菜单' : data.type === 'edit' ? '编辑菜单' : '标题' // 标题
      if (this.type === 'edit') {
        this.fromData = { ...data.row }
      } else {
        this.fromData = {
          id: '', // 编辑id/新增子节点时的父级ID
          functionname: '', // 菜单名称
          functionUrl: '', // 前端地址
          functionType: 1, // 是否可用
          functionOrder: '', // 排序
          functionIconStyle: '', // icon图标
          functionLevel: 0 // 菜单等级
        }
        if (data.type === 'rowAdd') {
          this.fromData.id = data.row && data.row.id // 编辑id/新增子节点时的父级ID
          this.fromData.functionLevel = 1// 菜单等级
        }
      }
    },
    // 提交
    submit() {
      this.$refs['fromData'].validate(valid => {
        if (valid) {
          if (this.type === 'add') {
          // 新增时，为一级菜单清空id
            if (this.fromData.functionLevel === '0') this.fromData.id = ''
            // 新增
            this.createMenu()
          }
          if (this.type === 'rowAdd') {
            // 新增
            this.createMenu()
          }
          if (this.type === 'edit') {
            // 编辑
            this.updateMenu()
          }
        }
      })
    },
    // 新增接口
    createMenu() {
      createMenu(this.fromData).then(() => {
        this.dialog = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // 回调
        this.callBack()
      })
    },
    // 编辑接口
    updateMenu() {
      updateMenu(this.fromData).then(() => {
        this.dialog = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // 回调
        this.callBack()
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
.functionIconStyle_icon{
  color: @hyacinthine;
  margin-right: 10px;
}
.scrollbar {
  height: 80vh;
  margin-top: 10px;
}

.filter-container {
  margin: 30px 20px !important;
}
</style>
