<template>
  <a-modal
    :title="modalTitle"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true">
    <a-spin :spinning="formLoading">
      <a-form :form="form">

        <a-form-item v-show="false">
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="菜单名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
              <a-input placeholder="请输入菜单名称" v-decorator="['name',{rules: [{required: true, min: 1, message: '请输入菜单名称！'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item style="width: 100%" :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单编号" hasFeedback>
              <a-input placeholder="请输入菜单编号" v-decorator="['code', {rules: [{required: true, min: 1, message: '请输入菜单编号！'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="菜单层级">
              <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择菜单层级！' }]}]">
                <a-radio value="0" @click="meneTypeFunc(0)">目录</a-radio>
                <a-radio value="1" @click="meneTypeFunc(1)">菜单</a-radio>
                <a-radio value="2" @click="meneTypeFunc(2)">按钮</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <div v-show="pidShow">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="父级菜单" has-feedback>
                <a-tree-select
                  v-decorator="['pid', {initialValue: treeSelDefaultValue},{rules: [{ required: true, message: '请选择父级菜单！' }]}]"
                  style="width: 100%"
                  :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                  :treeData="menuTreeData"
                  placeholder="请选择父级菜单"
                  :replaceFields="{
                    children:'children',
                    title:'name',
                    key:'id',
                    value:'id'
                  }">
                  <span slot="title" slot-scope="{ id }">{{ id }}
                  </span>
                </a-tree-select>
              </a-form-item>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <div v-show="componentShow">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                <span slot="label">
                  <a-tooltip title="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe">
                    <a-icon type="question-circle-o" />
                  </a-tooltip>&nbsp;
                  前端组件
                </span>
                <a-input placeholder="请输入前端组件" :disabled="componentDisabled" prop="component" v-decorator="['component',{rules: [{required: componentRequired, message: '请输入前端组件'}]}]" /><!-- ,{rules: [{required: componentRequired, min: 1, message: '请输入前端组件！'}]}  -->
              </a-form-item>
            </div>
          </a-col>
          <a-col :md="12" :sm="24">
            <div v-show="routerShow">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                <span slot="label">
                  <a-tooltip title="浏览器显示的URL，例：/menu，对应打开页面为菜单页面">
                    <a-icon type="question-circle-o" />
                  </a-tooltip>&nbsp;
                  路由地址
                </span>
                <a-input placeholder="请输入路由" v-decorator="['router', {rules: [{required: routerRequired, message: '请输入路由！'}]}]" />
              </a-form-item>
            </div>
            <div v-show="permissionShow">
              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限标识" hasFeedback>
                <a-input placeholder="请输入权限标识" v-decorator="['permission', {rules: [{required: permissionRequired, message: '请输入权限标识！'}]}]" />
              </a-form-item>
            </div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否可见">
              <a-switch id="visible" checkedChildren="是" unCheckedChildren="否" v-decorator="['visible', { valuePropName: 'checked' }]" /><!-- defaultChecked -->
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
              <a-input-number style="width: 100%" v-decorator="['intCode', { initialValue: 100 }]" :min="1" :max="1000" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">

          <a-col :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" hasFeedback>
              <a-input placeholder="请输入备注" v-decorator="['remark']"></a-input>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { menuTree, menuAdd, menuEdit } from '@/api/security/menu'
export default {

  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      modalTitle: '新增菜单',
      visible: false,
      confirmLoading: false,
      menuTreeData: [],
      componentShow: true,
      componentDisabled: false,
      componentRequired: true,
      routerRequired: true,
      routerShow: true,
      pidShow: true,
      permissionShow: true,
      permissionRequired: true,
      formLoading: true,
      type: '',
      form: this.$form.createForm(this),
      treeSelDefaultValue: 1
    }
  },

  methods: {
    // 新增打开页面初始化
    add (type) {
      this.modalTitle = '新增菜单'
      this.visible = true

      // 默认选中菜单项，并初始化
      this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: '1' })
      this.meneTypeFunc('1')

      // 默认选中的单选框
      this.form.getFieldDecorator('visible', { initialValue: true })
      this.treeSelDefaultValue = type

      // 默认加载菜单树
      this.getMenuTree()

      this.formLoading = false
    },
    // 编辑打开页面初始化
    edit (record) {
      this.modalTitle = '编辑菜单'
      this.visible = true

      // 默认选中菜单项，并初始化
      this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: record.type.toString() })
      this.meneTypeFunc(record.type.toString())

      // 默认选中的单选框
      const visibleDef = false
      if (record.visible == 1) {
        this.visibleDef = true
      }
      this.form.getFieldDecorator('visible', { valuePropName: 'checked', initialValue: this.visibleDef })
      this.treeSelDefaultValue = record.id

      setTimeout(() => {
        this.setMenuItem(record)
        // 默认加载菜单树
        this.getMenuTree()
      }, 100)

      this.formLoading = false
    },
    getMenuTree () {
      menuTree().then((res) => {
        if (res.code == 200) {
          this.form.resetFields(`pid`, [])
          this.menuTreeData = [{
            'id': '-1',
            'parentId': '0',
            'name': '顶级',
            'value': '0',
            'pid': '0',
            'children': res.data
          }]
          console.log(this.menuTreeData)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    /**
     * 选择菜单类型执行初始化表单变量
     */
    meneTypeFunc (type) {
      this.type = type
      // eslint-disable-next-line eqeqeq
      if (type == '0' || type == '1') {
        // 路由必填，设置空值，并显示
        this.routerRequired = true
        this.form.getFieldDecorator('router', { initialValue: '' })
        this.routerShow = true
        // 权限标识框隐藏，选填，给空值
        this.permissionShow = false
        this.permissionRequired = false
        this.form.getFieldDecorator('permission', { initialValue: '' })
      }
      // eslint-disable-next-line eqeqeq
      if (type == '0') {
        console.log(type)
        // 组件默认为显示，设置可输入，给默认组件 PageView，验证必填
        this.componentShow = true
        this.componentDisabled = false
        this.form.getFieldDecorator('component', { initialValue: 'PageView' })
        this.componentRequired = true
        // 父级初始化顶级，并将其隐藏
        this.form.getFieldDecorator('pid', { initialValue: '0' })
        this.treeSelDefaultValue = 0
        this.pidShow = false
      } else {
        // eslint-disable-next-line eqeqeq
        if (type == '1') {
          // 组件可以手输，取消值
          this.componentDisabled = false
          this.form.getFieldDecorator('component', { initialValue: '' })
        }
        // 父级选择放开
        this.pidShow = true
      }
      // eslint-disable-next-line eqeqeq
      if (type == '2') {
        // 组件设置不填，不可输入，并给空（手输的跟设置的）
        this.componentRequired = false
        this.componentDisabled = true
        this.form.resetFields(`component`, [])
        this.form.getFieldDecorator('component', { initialValue: '' })
        // 路由选填，设置空值，并隐藏
        this.routerRequired = false
        this.form.getFieldDecorator('router', { initialValue: '' })
        this.routerShow = false
        // 权限标识框显示，必填，给空值
        this.permissionShow = true
        this.permissionRequired = true
        this.form.getFieldDecorator('permission', { initialValue: '' })
      }
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          if (values.visible) {
            values.visible = 1
          } else {
            values.visible = 0
          }
          console.log(values)
          if (values.id) {
            menuEdit(values).then((res) => {
              this.confirmLoading = false
              if (res.code == 200) {
                this.$message.success('编辑成功')
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('编辑失败：' + res.msg)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            menuAdd(values).then((res) => {
              this.confirmLoading = false
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('新增失败：' + res.msg)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.confirmLoading = false
      this.visible = false
    },
    setMenuItem (record) {
      console.log(record)
      this.form.setFieldsValue(
        {
          id: record.id,
          name: record.name,
          code: record.code,
          component: record.component,
          permission: record.permission,
          router: record.router,
          intCode: record.intCode,
          remark: record.remark
        }
      )
      this.form.getFieldDecorator('pid', { initialValue: record.pid })
      this.pid = record.pid
    }
  }

}
</script>
