<template>
    <view>
        <view v-if="video_url" @click="video_url = ''" class="dialog dir-top-nowrap main-center cross-center">
            <video autoplay @click.stop="" style="width: 100%;" :src="video_url"></video>
        </view>
        <view v-for="(item,index) in formList" :key="index">
            <template v-if="item.id === 'image-text'">
                <view style="padding: 0 24rpx;"  :style="{backgroundColor: item.data.bg || 'inherit'}">
                    <app-rich :content='item.data.content'></app-rich>
                </view>
            </template>
            <template v-else-if="item.id === 'banner'">
                <template v-if="item.data.banners.length > 0">
                    <view v-if="item.data.effect == 1 || !item.data.effect"
                          style="overflow: hidden;"
                          :style="{backgroundColor: item.data.bg_padding, padding: `${item.data.c_padding_top}rpx ${item.data.c_padding_lr}rpx ${item.data.c_padding_bottom}rpx`}">
                        <app-swiper
                            :style="{height: item.data.height + 'rpx'}"
                            :list="item.data.banners"
                            :autoplay="item.data.autoplay === 0 ? true : false"
                            name="picUrl"
                            :effect3d="item.data.style === 2 ? true : false"
                            :height="item.data.height"
                            :effect3dPreviousMargin="50"
                            :imgMode="item.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                            :interval="item.data.interval ? item.data.interval : 3000"
                            :duration="item.data.duration ? item.data.duration : 500"
                            :mode="item.data.mode"
                            :c-border-bottom="item.data.c_border_bottom"
                            :c-border-top="item.data.c_border_top"
                        ></app-swiper>
                    </view>
                    <view
                        :style="{backgroundColor: item.data.bg_padding, padding: `${item.data.c_border_top}rpx ${item.data.c_padding_lr}rpx ${item.data.c_padding_bottom}rpx`}"
                        style="overflow: hidden;"
                        v-if="item.data.effect == 2">
                        <app-swiper
                            :style="{height: item.data.height + 'rpx'}"
                            :list="item.data.banners"
                            name="picUrl"
                            :height="item.data.height"
                            :interval="item.data.interval ? item.data.interval : 3000"
                            :duration="item.data.duration ? item.data.duration : 500"
                            :mode="item.data.mode"
                            :imgMode="item.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                            :autoplay="item.data.autoplay === 0 ? true : false"
                            :c-border-bottom="item.data.c_border_bottom"
                            :c-border-top="item.data.c_border_top"
                        >
                        </app-swiper>
                    </view>
                </template>
            </template>
            <template v-else-if="item.id === 'link'">
                <app-associated-link
                    :arrows-switch="item.data.arrowsSwitch"
                    :background="item.data.background"
                    :color="item.data.color"
                    :position="item.data.position"
                    :style-color="item.data.styleColor"
                    :link="item.data.link"
                    :styleNum="item.data.style"
                    :pic-switch="item.data.picSwitch"
                    :pic-url="item.data.picUrl"
                    :font-size="item.data.fontSize"
                    :title="item.data.title"
                ></app-associated-link>
            </template>
            <template v-else-if="item.id === 'copyright'">
                <app-copyright
                    :background-color="item.data.backgroundColor"
                    :text="item.data.text"
                    :pic-url="item.data.picUrl"
                    :link="item.data.link"
                ></app-copyright>
            </template>
            <template v-else-if="item.id === 'rubik'">
                <view style="position: relative">
                    <app-image-ad
                        :image-style="item.data.style"
                        :list="item.data.list"
                        :height="item.data.height"
                    ></app-image-ad>
                    <block v-for="(hotspot, hotspot_index) in item.data.hotspot" :key="hotspot_index">
                        <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                    </block>
                </view>
            </template>
            <template v-else-if="item.id === 'video'">
                <app-video
                    :pic-url="item.data.pic_url"
                    :url="item.data.url"
                    :has-auto="item.data.hasAuto"
                    :has-cycle="item.data.hasCycle"
                    :bg-padding="item.data.bg_padding"
                    :c-border-bottom="item.data.c_border_bottom"
                    :c-border-top="item.data.c_border_top"
                    :c-padding-top="item.data.c_padding_top"
                    :c-padding-lr="item.data.c_padding_lr"
                    :c-padding-bottom="item.data.c_padding_bottom"
                ></app-video>
            </template>
            <template v-else-if="item.id === 'empty'">
                <app-empty
                    :height="item.data.height"
                    :background-color="item.data.background"
                ></app-empty>
            </template>
            <diy-form-uimage v-else-if="item.id === 'uimage'" :index="index" :value="item.data" @updateValue="updateValue"></diy-form-uimage>
            <diy-form-uvideo @show="play" v-else-if="item.id === 'uvideo'" :index="index" :value="item.data" @updateValue="updateValue"></diy-form-uvideo>
            <diy-form-phone v-else-if="item.id === 'phone'" :form-id="value.form_id" :index="index" :value="item.data"
                            @updateValue="updateValue"></diy-form-phone>
            <diy-form-menu v-else-if="item.id === 'menu'" :index="index" :value="item.data" @updateValue="updateValue"></diy-form-menu>
            <diy-form-calendar v-else-if="item.id === 'calendar'" :index="index" :value="item.data"
                               @updateValue="updateValue"></diy-form-calendar>
            <diy-form-switch v-else-if="item.id === 'switch'" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-switch>
            <diy-form-agreement v-else-if="item.id === 'agreement'" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-agreement>
            <diy-form-time v-else-if="item.id === 'time'" :value="item.data" :index="index"></diy-form-time>
            <diy-form-radio v-else-if="item.id === 'radio'" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-radio>
            <diy-form-radio v-else-if="item.id === 'select'" mode="select" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-radio>
            <diy-form-input v-else-if="item.id === 'input'" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-input>
            <diy-form-input v-else-if="item.id === 'text'" mode="text" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-input>
            <diy-form-input v-else-if="item.id === 'position'" mode="position" :value="item.data" :index="index" @updateValue="updateValue"></diy-form-input>
            <diy-form-button @click="reset" v-else-if="item.id === 'button'" :template_message_list="template_message_list" :value="item.data" :page-id="pageId" :form-id="value.form_id" :error="error" :other-form="otherForm"></diy-form-button>
        </view>
    </view>
</template>

<script>
import diyFormButton from "./diy-form-button";
import diyFormCalendar from "./diy-form-calendar";
import diyFormMenu from "./diy-form-menu";
import diyFormPhone from "./diy-form-phone";
import diyFormUimage from "./diy-form-uimage";
import diyFormUvideo from "./diy-form-uvideo";
import diyFormRadio from "./diy-form-radio";
import diyFormInput from "./diy-form-input";
import diyFormSwitch from "./diy-form-switch";
import diyFormAgreement from "./diy-form-agreement";
import diyFormTime from "./diy-form-time";
import formValue from "./formValue";
import appRich from '../../basic-component/app-rich/parse.vue';
import appSwiper from '../../page-component/app-swiper/app-swiper.vue';
import appAssociatedLink from '../../page-component/app-associated-link/app-associated-link.vue';
import appCopyright from '../../page-component/app-copyright/app-copyright.vue';
import appImageAd from '../../page-component/app-image-ad/app-image-ad.vue';
import appHotspot from '../../basic-component/app-hotspot/app-hotspot.vue';
import appVideo from '../../page-component/app-video/app-video.vue';
import appEmpty from '../../basic-component/app-empty/app-empty.vue';

export default {
    name: 'diy-form',
    components: {
        'app-rich': appRich,
        appEmpty,
        appImageAd,
        appHotspot,
        appVideo,
        appCopyright,
        appAssociatedLink,
        appSwiper,
        diyFormRadio,
        diyFormInput,
        diyFormButton,
        diyFormCalendar,
        diyFormMenu,
        diyFormPhone,
        diyFormTime,
        diyFormUimage,
        diyFormUvideo,
        diyFormSwitch,
        diyFormAgreement,
    },
    data() {
        return {
            video_url: '',
            error: '',
            formList: [],
            otherForm: []
        }
    },
    props: {
        pageId: [Number, String],
        template_message_list: Array,
        value: {
            type: Object
        }
    },
    watch: {
        formList: {
            handler(newVal) {
                this.otherForm = [];
                this.error = '';
                for(let formItem of newVal) {
                    if(formItem.id != 'button' && formItem.data.title && formItem.id != 'link') {
                        let form = new formValue({
                            key: formItem.id,
                            label: formItem.data.title,
                            value: formItem.value || null,
                            required: formItem.data.is_required
                        });
                        this.otherForm.push(form.getObject());
                        if (form.key === 'input' && !formItem.data.is_disabled) {
                            if (form.value && form.value.text && form.value.text.length < formItem.data.min) {
                                this.error = form.label + '最少输入' + formItem.data.min + '个字符';
                                break;
                            }
                        }
                        if (form.key === 'text' && !formItem.data.is_disabled) {
                            if (form.value && form.value.length < formItem.data.min) {
                                this.error = form.label + '最少输入' + formItem.data.min + '个字符';
                                break;
                            }
                        }
                        if (form.key === 'select') {
                            if (form.value && form.value.length > 0 && form.value.length < formItem.data.min) {
                                this.error = form.label + '最少选择' + formItem.data.min + '项';
                                break;
                            }
                            if (form.value && form.value.length > 0 && form.value.length > formItem.data.max) {
                                this.error = form.label + '最多选择' + formItem.data.max + '项';
                                break;
                            }
                        }
                        if (form.key === 'uvideo') {
                            if (form.value && form.value.length > 0 && form.value.length < formItem.data.min_num) {
                                this.error = form.label + '最少上传' + formItem.data.min_num + '个';
                                break;
                            }
                            if (form.value && form.value.length > 0 && form.value.length > formItem.data.max_num) {
                                this.error = form.label + '最多上传' + formItem.data.max_num + '个';
                                break;
                            }
                        }
                        if (form.key === 'uimage' && formItem.data.type === 'ordinary') {
                            if (form.value && form.value.length > 0 && form.value.length < formItem.data.min_num) {
                                this.error = form.label + '最少上传' + formItem.data.min_num + '张';
                                break;
                            }
                            if (form.value && form.value.length > 0 && form.value.length > formItem.data.max_num) {
                                this.error = form.label + '最多上传' + formItem.data.max_num + '张';
                                break;
                            }
                        }
                        if (form.required == 1) {
                            if (form.value == null) {
                                if (form.key !== 'input' && form.key !== 'text' && form.key !== 'phone') {
                                    this.error = '请选择' + form.label;
                                } else {
                                    this.error = '请填写' + form.label;
                                }
                                break;
                            } else {
                                if (form.key === 'menu') {
                                    if (formItem.data.type === 'date' && form.value) {
                                        if (formItem.data.data_type && formItem.data.data_type.is_now == 1) {
                                            if (!form.value.fulldate) {
                                                this.error = '请填写' + form.label
                                            }
                                        } else {
                                            if (!(form.value.alone_at || (form.value.begin_at && form.value.end_at))) {
                                                this.error = '请将' + form.label + '填写完整';
                                            }
                                        }
                                    }
                                } else if (form.key === 'uimage') {
                                    if (formItem.data.type === 'ordinary') {
                                        if (form.value && form.value.length == 0) {
                                            this.error = '请选择' + form.label;
                                            break;
                                        }
                                    } else {
                                        let num = formItem.data.type === 'license' ? 1 : 2;
                                        if (!form.value || form.value.filter(item => !!item).length < num) {
                                            this.error = '请将' + form.label + '填写完整';
                                            break;
                                        }
                                    }
                                } else if (form.key === 'uvideo') {
                                    if (form.value && form.value.length == 0) {
                                        this.error = '请选择' + form.label;
                                        break;
                                    }
                                } else if (form.key === 'calendar') {
                                    if (!(form.value.fulldate || (form.value.before && form.value.after))) {
                                        this.error = '请将' + form.label + '填写完整';
                                        break;
                                    }
                                } else if (form.key === 'agreement') {
                                    if (!form.value.is_check) {
                                        this.error = '请阅读并勾选' + form.label;
                                        break;
                                    }
                                } else if (form.key === 'select') {
                                    if (form.value && form.value.length == 0) {
                                        this.error = '请选择' + form.label;
                                    }
                                } else if (form.key === 'input') {
                                    if (!form.value.text) {
                                        this.error = '请填写' + form.label;
                                    }
                                }
                            }
                        }
                    }
                }
            },
            immediate: true,
            deep: true
        },
    },
    created() {
        this.formList = JSON.parse(JSON.stringify(this.value.list))
    },
    methods: {
        rubikHotspot(hotspot) {
            if (hotspot && hotspot.link) {
                hotspot.link.url = hotspot.link.value;
                hotspot.link.openType = hotspot.link.open_type;
            }
            return hotspot;
        },
        play(e) {
            console.log(e)
            this.video_url = e.video;
        },
        reset(e) {
            this.formList = [];
            this.$nextTick(()=>{
                this.formList = JSON.parse(JSON.stringify(this.value.list))
                this.$forceUpdate();
            })
        },
        updateValue({index, value}) {
            let obj = this.formList[index];
            obj.value = value;
            this.formList.splice(index,1,obj)
            this.$forceUpdate();
        },
        imageEvent(e) {
            console.log(e);
        }
    }
}
</script>

<style scoped lang="scss">
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        z-index: 100;
    }
</style>
