<template>
  <div>
    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :centered="true">
      <a-form :form="form" @submit="handleSubmit">
        <!-- 上级菜单 -->
        <a-form-item label="上级菜单" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <div >
            <span >{{ parentTitle }}</span>
          </div>

        </a-form-item>
        <!-- 类型 -->
        <a-form-item label="类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-select
            @change="selectChange"
            id="childModal-type"
            :disabled="disabled"
            v-decorator="[
              'formData.type',
              {
                initialValue: formData.type,
                rules: [{ required: true, message: '请选择状态!' }] },
            ]"
            style="width: 100%"
            placeholder="请选择菜单类型"
          >
            <a-select-option :value="0">页面类型</a-select-option>
            <a-select-option :value="1">按钮类型</a-select-option>
          </a-select>
        </a-form-item>

        <!-- 名称 -->
        <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入名称30个字以内"
            id="childModal-name"
            :maxLength="30"
            allowClear
            v-decorator="['formData.name', {
              initialValue: formData.name,getValueFromEvent: $filterEmpty,
              rules: [{ required: true, message: '请输入名称!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符，最多30个字符'}] }]"
          />
        </a-form-item>
        <!-- 路由英文名 -->
        <!-- <a-form-item v-if="!formData.type" label="路由英文名" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入路由英文名"
            v-decorator="['formData.routeName', {
              initialValue: formData.routeName,
              rules: [{ required: true, message: '请输入路由英文名!' }] }]"
          />
        </a-form-item> -->
        <!-- 路径 -->
        <!-- <a-form-item v-if="!formData.type" label="路径" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
             <a-input placeholder="请输入路径"
                      v-decorator="['formData.routePath', {
                        initialValue: formData.routePath,
                        rules: [{ required: true, message: '请输入路径!' }] }]"
             />
           </a-form-item> -->
        <!-- 请求路径 -->
        <!-- <a-form-item v-if="formData.type==1" label="请求路径" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
             <a-input placeholder="请输入请求路径"
                      v-decorator="['formData.urlPath', {
                        initialValue: formData.urlPath,
                        rules: [{ required: true, message: '请输入请求路径!' }] }]"
             />
           </a-form-item> -->
        <!-- 前端权限编码 -->
        <a-form-item label="前端权限编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入前端权限编码"
            id="childModal-code"
            allowClear
            v-decorator="[
              'formData.code',
              {
                initialValue: formData.code,getValueFromEvent: $filterEmpty,
                rules: [{ required: true, message: '请输入前端权限编码!' }] },
            ]"
          />

        </a-form-item>
        <!-- 后台权限编码 -->
        <a-form-item label="后台权限编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入后台权限编码"
            allowClear
            id="childModal-permission"
            v-decorator="[
              'formData.permission',
              {initialValue: formData.permission,},
            ]"
          />

        </a-form-item>

        <!-- 图标 -->
        <!-- <a-form-item v-if="!formData.type" label="图标" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入图标名称"
            v-decorator="['formData.icon', {
              initialValue: formData.icon,
              rules: [] }]"
          />
        </a-form-item> -->
        <!-- 前端组件 -->
        <!-- <a-form-item v-if="!formData.type" label="前端组件" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入前端组件路径"
            v-decorator="['formData.componentPath', {
              initialValue: formData.componentPath,
              rules: [{ required: true, message: '请输入前端组件路径!' }] }]"
          />
        </a-form-item> -->

        <!-- 第三方链接 -->
        <!-- <a-form-item v-if="!formData.type" label="第三方链接" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入第三方链接地址"
            v-decorator="['formData.urlPath', {
              initialValue: formData.urlPath,
              rules: [] }]"
          />
        </a-form-item> -->

        <!-- 排序值 -->
        <a-form-item label="排序值" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            type="number"
            oninput="if(value.length>6)value=value.slice(0,6);if(value<0)value=0"
            placeholder="请输入(0~999999)之间的排序值"
            allowClear
            id="childModal-sort"
            v-decorator="['formData.sort', {
              initialValue: formData.sort,getValueFromEvent: $filterEmpty,
              rules: [] }]"
          />
        </a-form-item>
        <!-- 状态 -->
        <a-form-item label="启用" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-radio-group
            name="radioGroup"
            id="childModal-status"
            v-decorator="[
              'formData.status',
              {
                initialValue: formData.status,
                rules: [{ required: true, message: '请选择状态!' }] },
            ]"
          >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="handleSubmit()" id="childModal-handleSubmit">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()" id="childModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { saveMenu } from '@/api/menu.js'
export default {
  name: 'ChildModal',
  components: {
    STable, VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      isshow: this.visible,
      titleText: '',
      disabled: false,
      parentTitle: '',
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'childModal' }),
      formData: {
        parentId: '',
        name: '',
        routePath: '',
        icon: '',
        routeName: '',
        code: '',
        permission: '',
        componentPath: '',
        urlPath: '',
        sort: '',
        type: undefined,
        status: 1 // 活动状态
      }
    }
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },

    selectChange (val) {
      this.formData.type = val
      console.log(val)
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values.formData, ' formData.type222222222')
          saveMenu(Object.assign(this.formData, values.formData)).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.warning(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      this.parentTitle = ''
      this.formData.parentId = ''
      this.formData.name = ''
      this.formData.routePath = ''
      this.formData.icon = ''
      this.formData.routeName = ''
      this.formData.componentPath = ''
      this.formData.urlPath = ''
      this.formData.sort = ''
      this.formData.type = ''
      this.formData.status = 1
      this.formData.code = ''
      this.formData.permission = ''
    }

  },
  mounted () {
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'childModal' })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.data.id) { // 添加子菜单
          this.titleText = '新增子菜单'
          this.disabled = false
          console.log(this.data, 'this.data')
          this.formData.parentId = this.data.id
          this.parentTitle = this.data.name
        } else { // 添加顶菜单
          this.titleText = '新增顶菜单'
          this.formData.type = 0
          this.disabled = true
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style >
  .ant-modal-footer {
    display: none;
  }
</style>
