<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
<#assign form_date = false>
<#assign form_select = false>
<#assign form_select_multi = false>
<#assign form_popup = false>
<#assign form_sel_depart = false>
<#assign form_sel_user = false>
<#assign form_file = false>

<#list columns as po>
<#assign form_field_dictCode="">
	<#if po.dictTable?default("")?trim?length gt 1>
		<#assign form_field_dictCode="${po.dictTable},${po.dictText},${po.dictField}">
	<#elseif po.dictField?default("")?trim?length gt 1>
		<#assign form_field_dictCode="${po.dictField}">
	</#if>
	<#if po.classType =='textarea'>
          <a-col :span="24">
            <a-form-item label="${po.filedComment}" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
	<#else>
          <a-col :span="12">
            <a-form-item label="${po.filedComment}" :labelCol="labelCol" :wrapperCol="wrapperCol">
	</#if>
	<#if po.classType =='date'>
		<#assign form_date=true>
              <j-date placeholder="请选择${po.filedComment}" v-decorator="[ '${po.fieldName}', validatorRules.${po.fieldName}]" :trigger-change="true" style="width: 100%"/>
	<#elseif po.classType =='datetime'>
		<#assign form_date=true>
              <j-date placeholder="请选择${po.filedComment}" v-decorator="[ '${po.fieldName}', validatorRules.${po.fieldName}]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
	<#elseif po.classType =='popup'>
		<#assign form_popup=true>
              <j-popup
                v-decorator="['${po.fieldName}']"
                :trigger-change="true"
                org-fields="${po.dictField}"
                dest-fields="${po.dictText}"
                code="${po.dictTable}"
                @callback="popupCallback"/>
	<#elseif po.classType =='sel_depart'>
		<#assign form_sel_depart=true>
              <j-select-depart v-decorator="['${po.fieldName}']" :trigger-change="true"/>
	<#elseif po.classType =='sel_user'>
		<#assign form_sel_user = true>
              <j-select-user-by-dep v-decorator="['${po.fieldName}']" :trigger-change="true"/>
	<#elseif po.classType =='textarea'>
              <a-textarea v-decorator="['${po.fieldName}']" rows="4" placeholder="请输入${po.filedComment}"/>
	<#elseif po.classType=='list' || po.classType=='radio'>
		<#assign form_select = true>
              <j-dict-select-tag type="${po.classType}" v-decorator="['${po.fieldName}']" :trigger-change="true" dictCode="${form_field_dictCode}" placeholder="请选择${po.filedComment}"/>
	<#elseif po.classType=='list_multi' || po.classType=='checkbox'>
		<#assign form_select_multi = true>
              <j-multi-select-tag type="${po.classType}" v-decorator="['${po.fieldName}']" :trigger-change="true" dictCode="${form_field_dictCode}" placeholder="请选择${po.filedComment}"/>
	<#elseif po.fieldDbType=='int' || po.fieldDbType=='double' || po.fieldDbType=='BigDecimal'>
              <a-input-number v-decorator="[ '${po.fieldName}', validatorRules.${po.fieldName}]" placeholder="请输入${po.filedComment}" style="width: 100%"/>
	<#elseif po.classType=='file' || po.classType=='image'>
		<#assign form_file = true>
              <j-upload v-decorator="['${po.fieldName}']" :trigger-change="true"></j-upload>
	<#else>
              <a-input v-decorator="[ '${po.fieldName}', validatorRules.${po.fieldName}]" placeholder="请输入${po.filedComment}"></a-input>
    </#if>
            </a-form-item>
          </a-col>
        
</#list> 
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
<#list subTables as sub><#rt/>
  <#if sub.foreignRelationType =='1'>
        <a-tab-pane tab="${sub.ftlDescription}" :key="refKeys[${sub_index}]" :forceRender="true">
          <${Format.humpToShortbar(sub.entityName)}-form ref="${sub.entityName?uncap_first}Form" @validateError="validateError"></${Format.humpToShortbar(sub.entityName)}-form>
        </a-tab-pane>
      
  <#else>
        <a-tab-pane tab="${sub.ftlDescription}" :key="refKeys[${sub_index}]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[${sub_index}]"
            :loading="${sub.entityName?uncap_first}Table.loading"
            :columns="${sub.entityName?uncap_first}Table.columns"
            :dataSource="${sub.entityName?uncap_first}Table.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
  </#if>
</#list>
      </a-tabs>

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

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  <#list subTables as sub>
  <#if sub.foreignRelationType =='1'>
  import ${sub.entityName}Form from './${sub.entityName}Form.vue'
  </#if>
  </#list>
  <#if form_date>
  import JDate from '@/components/jeecg/JDate'  
  </#if>
  <#if form_file>
  import JUpload from '@/components/jeecg/JUpload'
  </#if>
  <#if form_sel_depart>
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  </#if>
  <#if form_sel_user>
  import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
  </#if>
  <#if form_select>
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  </#if>
  <#if form_select_multi>
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"
  </#if>

  export default {
    name: '${entityName}Modal',
    mixins: [JEditableTableMixin],
    components: {
    <#list subTables as sub>
    <#if sub.foreignRelationType =='1'>
    ${sub.entityName}Form,
    </#if>
    </#list>
    <#if form_date>
      JDate,
    </#if>
    <#if form_file>
      JUpload,
    </#if>
    <#if form_sel_depart>
      JSelectDepart,
    </#if>
    <#if form_sel_user>
      JSelectUserByDep,
    </#if>
    <#if form_select>
      JDictSelectTag,
    </#if>
    <#if form_select_multi>
      JMultiSelectTag,
    </#if>
    },
    data() {
      return {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
<#list columns as po>
  <#if po.fieldName !='id'>
    <#if po.nullable =='N'>
          ${po.fieldName}: { rules: [{ required: true, message: '请输入${po.filedComment}!' }] },
          <#else>
          ${po.fieldName}:{},
    </#if>
  </#if>
</#list>
        },
        refKeys: [<#list subTables as sub>'${sub.entityName?uncap_first}', </#list>],
        tableKeys:[<#list subTables as sub><#if sub.foreignRelationType =='0'>'${sub.entityName?uncap_first}', </#if></#list>],
        activeKey: '${subTables[0].entityName?uncap_first}',
<#list subTables as sub><#rt/>
        // ${sub.ftlDescription}
        ${sub.entityName?uncap_first}Table: {
          loading: false,
          dataSource: [],
          columns: [
<#list sub.colums as col><#rt/>
<#if sub.foreignRelationType =='0'>
    <#if col.filedComment !='外键'>
            {
              title: '${col.filedComment}',
              key: '${col.fieldName}',
      <#if col.classType =='date'>
              type: FormTypes.date,
      <#elseif col.classType =='datetime'>
              type: FormTypes.datetime,
      <#elseif "int,decimal,double,"?contains(col.classType)>
              type: FormTypes.inputNumber,
      <#else>
              type: FormTypes.input,
      </#if>
              defaultValue: '',
              placeholder: '请输入${'$'}{title}',
      <#if col.nullable =='N'>
              validateRules: [{ required: true, message: '${'$'}{title}不能为空' }],
      </#if>
            },
    </#if>
</#if>
</#list>
          ]
        },
</#list>
        url: {
          add: "/${entityPackage}/${entityName?uncap_first}/add",
          edit: "/${entityPackage}/${entityName?uncap_first}/edit",
<#list subTables as sub><#rt/>
          ${sub.entityName?uncap_first}: {
            list: '/${entityPackage}/${entityName?uncap_first}/query${sub.entityName}ByMainId'
          },
</#list>
        }
      }
    },
    methods: {
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model<#list columns as po><#if po.fieldName !='id'>,'${po.fieldName}'</#if></#list>)
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
<#list subTables as sub><#rt/>
<#if sub.foreignRelationType =='1'>
          this.$refs.${sub.entityName?uncap_first}Form.initFormData(this.url.${sub.entityName?uncap_first}.list,this.model.id)
</#if>
</#list>         
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
<#list subTables as sub><#rt/>
<#if sub.foreignRelationType =='0'>
          this.requestSubTableData(this.url.${sub.entityName?uncap_first}.list, params, this.${sub.entityName?uncap_first}Table)
</#if>
</#list>
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
<#list subTables as sub><#rt/>
<#if sub.foreignRelationType =='0'>
          ${sub.entityName?uncap_first}List: allValues.tablesValue[${sub_index}].values,
<#else>
          ${sub.entityName?uncap_first}List: this.$refs.${sub.entityName?uncap_first}Form.getFormData(),
</#if>
</#list>
        }
      },
      validateError(msg){
        this.$message.error(msg)
      }
      
      
    }
  }
</script>

<style scoped>
</style>