<template>
  <a-modal
    :title="modalTitle"
    v-model="visible"
    @ok="handleOk"
    :maskClosable="false"
    :width="modalWidth"
    class="cust-modal"
    okText="保存"
  >
    <a-form :form="form" ref="form">
      <a-row>
        <a-col :span="12">
          <a-form-item v-if="isChildBusiness" label='父业务' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input v-decorator="['parentName', {initialValue: parentName}]" disabled/>
          </a-form-item>
          <a-form-item v-else label='业务图标' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input v-decorator="['icon', {initialValue: sysBusiness.icon}]" placeholder="请输入业务图标，例如：setting"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label='业务名称'  :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input
              placeholder="请输入业务名称，例如：业务管理"
              v-decorator="['name', {initialValue: sysBusiness.name , rules: [{ required: true, message: '请输入业务名称' }]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label='业务编码' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input
              placeholder="请输入业务编码，例如：SYS000001"
              v-decorator="['code', {initialValue: sysBusiness.code , rules: [{ required: true, message: '请输入业务编码' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label='组件名称' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input
              placeholder="请输入组件名称，例如：syscodelist"
              v-decorator="['vrName', {initialValue: sysBusiness.vrName , rules: [{ required: true, message: '请输入组件名称' }]}]"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label='访问路由' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input
              placeholder="请输入访问路由，例如：/system/code"
              v-decorator="['vrPath', {initialValue: sysBusiness.vrPath , rules: [{ required: true, message: '请输入访问路由' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label='重定向路由' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input  v-decorator="['vrRedirect', {initialValue: sysBusiness.vrRedirect}]" placeholder="请输入访问路由，例如：/system/code"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label='页面路径' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input
              placeholder="请输入页面路径，例如：views/sysList"
              v-decorator="['vrComponentPath', {initialValue: sysBusiness.vrComponentPath , rules: [{ required: true, message: '请输入页面路径' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label='排序' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-input v-decorator="['showOrder', {initialValue: sysBusiness.showOrder}]" placeholder="请输入排序数字，数字越大越靠后"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-item label='菜单显示' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-radio-group  v-decorator="['showInMenu', {initialValue: sysBusiness.showInMenu}]" >
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label='保留状态' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
            <a-radio-group  v-decorator="['isCache', {initialValue: sysBusiness.isCache}]" >
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'

  let initData = {
    parentName:'',
    icon:'',
    name: '',
    code: '',
    vrName:'',
    vrPath:'',
    vrRedirect:'',
    vrComponentPath:'',
    showOrder:'',
    showInMenu:true,
    isCache:true,
  }
  let propertyList = mapKeyToList(initData);

  export default {
    name: 'SysBusinessDetail',
    beforeCreate() {
      this.form = this.$form.createForm(this)
      for (let property of propertyList) {
        this.form.getFieldDecorator(property)
      }
    },
    data() {
      return {
        parentName:"",//父业务名称
        optType: 0,
        sysBusiness:{},
        isChildBusiness: false,
        visible: false,
        modalTitle: "新建业务",
        modalWidth:800,
      }
    },
    methods: {
      show(optType, isChildBusiness, data) {
        if (data) {
          if(optType == SYS_CONST.OPT_TYPE.MODIFY){
            this.modalTitle = "编辑业务"
            this.form.setFieldsValue(pick(data, propertyList))
          }else{
            initData.parentName = data.name;
            this.form.setFieldsValue(initData)
          }
        } else {
          this.form.setFieldsValue(initData)
        }
        this.isChildBusiness = isChildBusiness
        this.visible = true
      },
      handleOk() {
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            this.visible = false
            this.$valueCopy(this.sysBusiness, values)
            this.$emit('modifyItem',this.sysBusiness)
          }
        })
      }
    }
  }
</script>