<template>
    <div>
    <!-- <van-form ref="generateForm" validate-first @submit="onSubmit" :scroll-to-error="true" :show-error="false"> -->
        <template v-if="formData && formData.list">
            <div v-for="(item, index) in formData.list" :key="index">
                <template v-if="item.type == 'input' && !item.hidden">
                    <o-input :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'textarea' && !item.hidden">
                    <o-textarea :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'number' && !item.hidden">
                    <o-number :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'radio' && !item.hidden">
                    <o-radio :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'checkbox' && !item.hidden">
                    <o-checkbox :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'date' && !item.hidden">
                    <o-date :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'rate' && !item.hidden">
                    <o-rate :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'select' && !item.hidden">
                    <o-select :widget="item" @relationFormChange="relationFormChange" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'organ' && !item.hidden">
                    <o-organ :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'school' && !item.hidden">
                    <o-school :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'text' && !item.hidden">
                    <o-text :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'imgupload' && !item.hidden">
                    <o-img-upload :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'file' && !item.hidden">
                    <o-file-upload :widget="item" @fileCheckRequired="fileCheckRequired" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'divider' && !item.hidden">
                    <o-divider :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'cascader' && !item.hidden">
                    <o-cascader :widget="item" :preview="preview" :value="value" />
                </template>
                <template v-if="item.type == 'subform'">
                    <div v-show="!item.hidden">
                        <o-subform ref="subform" :widget="item" :fileCheck="fileCheck" @relationFormChange="relationFormChange"  @fileCheckRequired="fileCheckRequired" :preview="preview" :value="value" />
                    </div>
                </template>
            </div>
        </template>
        <!-- <van-button round block type="info" native-type="submit">提交</van-button> -->
    <!-- </van-form> -->
    </div>
</template>
<script>
import OInput from '../control/input'
import OTextarea from '../control/textarea'
import ONumber from '../control/number'
import ORadio from '../control/radio'
import OCheckbox from '../control/checkbox'
import ODate from '../control/date'
import ORate from '../control/rate'
import OSelect from '../control/select'
import OOrgan from '../control/organ'
import OSchool from '../control/school'
import OText from '../control/text'
import OImgUpload from '../control/imgFile'
import OFileUpload from '../control/fileUpload'
import ODivider from '../control/divider'
import OCascader from '../control/cascader'
import OSubform from '../control/subform'
export default {
    name: 'formModal',
    components: { OInput, OTextarea, ONumber, ORadio, OCheckbox, ODate, ORate, OSelect, OOrgan, OSchool, OText, OImgUpload, OFileUpload, ODivider, OCascader, OSubform },
    props: {
        value: {
            type: Object,
            default() {
                return {}
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        },
        preview: { // 是否是预览
            type: Boolean,
            default() {
                return false
            }
        }
    },
    data() {
        return {
            formStatus: false,
            // 如果是乐团退费且上传文件，则子表单不做校验（true 为已上传文件，且是退费模板）
            fileCheck: false
        }
    },
    mounted() {
        if(!this.preview) {
            let tempData = this.formData
            // 获取对应模板中，需要隐藏的字段
            let hiddenFormList = this.getSelectValueObject(tempData)
            this.formStatus = hiddenFormList
            this.relationFormChange()
        }
    },
    methods: {
        getSelectValueObject(tpls) {
            let tempList = tpls.list || []
            let status = false
            tempList.forEach(list => {
                if(list.type == 'select' && list.options.relationStatus) {
                   status = true
                }
                if(list.type == 'subform') {
                    let childList = list.columns || []
                    childList.forEach(child => {
                        let childList = child.list || []
                        childList.forEach(c => {
                            if(c.type == 'select' && list.options.relationStatus) {
                                status = true
                            }
                        })
                    });
                }
            })
            return status
        },
        relationFormChange(value) {
            // false 为显示，true 为隐藏
            let temp = value || []
            this.formData.list?.forEach(item => {
                // console.log(!item.options.relationStatus, 'relationStatus')
                if(this.formStatus) {
                    if(item.type != 'text' && item.type != 'subform' && !item.options.relationStatus) {
                        item.hidden = true
                    } else {
                        item.hidden = false
                    }
                    if(temp.includes(item.model)) {
                        item.hidden = false
                    }
                } else {
                    item.hidden = false
                }
                // 子表单  不支持子表单，根据不同的类型显示不同
                if(item.type == 'subform') {
                    let childList = item.columns || []
                    childList.forEach(child => {
                        if(child.list?.length > 0) {
                            child.list.forEach(c => {
                                // c.hidden = true
                                if(this.formStatus) {
                                    if(c.type != 'text' && c.type != 'subform' && !c.options.relationStatus) {
                                        c.hidden = true
                                    } else {
                                        c.hidden = false
                                    }
                                    if(temp.includes(c.originModel)) {
                                        c.hidden = false
                                    }
                                } else {
                                    c.hidden = false
                                }
                            })
                        }
                    });
                    // 重置数据
                    let subForm = this.$refs.subform
                    subForm.forEach(item => {
                        item.reSetFormData()
                    })
                    let subFormStatus = true
                    childList.forEach(child => {
                        if(child.list?.length > 0) {
                            child.list.forEach(c => {
                                if(!c.hidden) {
                                    subFormStatus = false
                                }
                            })
                        }
                    })
                    item.hidden = subFormStatus
                }
            })
            this.$forceUpdate()
        },
        // 处理是否需要校验
        fileCheckRequired(state) {
            this.fileCheck = state
            this.$forceUpdate()
        }
    }
}
</script>