<template>
  <a-form @submit="handleSubmit" :form="form">
    <a-form-item v-show="false" >
      <a-input v-decorator="['menuId']" type="hidden"/>
    </a-form-item>
    <a-form-item v-show="false" >
      <a-input v-decorator="['parentId']" type="hidden"/>
    </a-form-item>
    <a-form-item
      label="父菜单"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="['parentName']"
        disabled/>
    </a-form-item>
    <a-form-item
      label="标题"
      :required="true"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'title',
          {rules: [{ required: true, message: '请输标题' }]}
        ]" />
    </a-form-item>
    <a-form-item
      label="标识"
      v-show="!isButton"
      :required="true"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'name'
        ]" />
    </a-form-item>
    <a-form-item
      label="类型"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      :required="true"
    >
      <a-radio-group
        :defaultValue="1"
        @change="menuTypeChange"
        v-model="type">
        <a-radio :value="1">菜单</a-radio>
        <a-radio :value="2">按钮</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      v-show="!isButton"
      label="地址"
      :required="true"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'url'
        ]" />
    </a-form-item>
    <a-form-item
      label="组件"
      v-show="!isButton"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'component',
        ]" />
    </a-form-item>
    <a-form-item
      label="权限"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'permission',
        ]" />
    </a-form-item>
    <a-form-item
      v-show="!isButton"
      label="转发请求"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'redirect',
        ]" />
    </a-form-item>
    <a-form-item
      label="图标"
      v-show="!isButton"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'icon'
        ]" />
    </a-form-item>
    <a-form-item
      label="排序"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'sort'
        ]"
        type="number" />
    </a-form-item>
    <a-form-item
      label="是否显示"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-switch :checked="visible" @change="handleVisibleChange" />
    </a-form-item>
    <a-form-item
      v-show="!isButton"
      label="是否隐藏头部"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-switch :checked="hiddenHeaderContent" @change="handleHeaderChange" />
    </a-form-item>
    <a-form-item
      label="页签方式"
      v-show="!isButton"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
      <a-input
        v-decorator="[
          'target'
        ]" />
    </a-form-item>
    <a-form-item
      :wrapperCol="{ span: 24 }"
      style="text-align: center"
    >
      <a-button :loading="loading" htmlType="submit" type="primary">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'
import { addMenu, updateMenu } from '@/api/upms/menu'
export default {
  name: 'BaseMenu',
  data () {
    return {
      loading: false,
      disabled: true,
      visible: true,
      type: 1,
      isButton: false,
      hiddenHeaderContent: false,
      form: this.$form.createForm(this)
    }
  },
  props: {
    menu: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    menu (newV, oldV) { // watch监听props里status的变化，然后执行操作
      this.form.resetFields()
      Object.assign(this.menu, newV)
      if (this.menu.type === 1) {
        this.isButton = false
      } else {
        this.isButton = true
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.menu, ['menuId', 'parentId', 'parentName', 'title', 'name', 'type', 'url', 'component', 'permission', 'redirect', 'icon', 'sort', 'target']))
      })
      this.type = this.menu.type
      this.visible = this.menu.visible
      this.hiddenHeaderContent = this.menu.hiddenHeaderContent
    }
  },
  methods: {
    handleVisibleChange (visible) {
      this.visible = visible
    },
    handleHeaderChange (hiddenHeaderContent) {
      this.hiddenHeaderContent = hiddenHeaderContent
    },
    handleSubmit (e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.loading = true
          values = {
            ...values,
            visible: this.visible,
            type: this.type,
            clientId: this.menu.clientId,
            hiddenHeaderContent: this.hiddenHeaderContent
          }
          const menuId = values.menuId
          if (menuId) {
            updateMenu(values)
              .then(() => {
                setTimeout(() => {
                  this.loading = false
                  this.$message.info(`提示：修改成功 `)
                  this.$emit('ok', values)
                }, 1500)
              }).catch(() => {
                this.loading = false
              })
          } else {
            addMenu(values)
              .then(() => {
                setTimeout(() => {
                  this.loading = false
                  this.$message.info(`提示：添加成功 `)
                  this.$emit('ok')
                }, 1500)
              }).catch(() => {
                this.loading = false
              })
          }
        }
      })
    },
    menuTypeChange (type) {
      console.log(type)
      if (type.target.value === 2) {
        this.isButton = true
      } else {
        this.isButton = false
      }
    }
  }
}
</script>
