<template>
    <view class="comp-form_input">
        <uni-forms :modelValue="props.data" ref="formRef">
            <template v-for="(control, field) in props.controls" :key="field">

                <!-- 分割符 -->
                <template v-if="control.type=='line'">
                    <view class="expand_btn" hover-class="hover" v-if="getExpandClass(field)">
                        <view v-if="expand_active[field]"@click="expand(field)">{{ translate('more') }}<iconfont icon="caret-down" /></view>
                        <view v-else  @click="expand(field)">{{ translate('expand') }}<iconfont icon="caret-up" /></view>
                    </view>
                    <view class="line">
                        <view class="dot"></view><text>{{ translate(control['alias'] || field) }}</text>
                    </view>
                </template>

                <!-- 控件 -->
                <template v-else>
                    <view :class="[control_class(control), 'control']">
                        <uni-form-item :name="field" :class="[control_class(control)]">
                            <view class="item" :class="[control_class(control)]" v-if="control.render" :data-key="field" :data-control="control.type">
                                <view class="title">{{ translate(control['alias'] || field) }}</view>
                                <view class="control">
                                    <template v-if="control.type == 'input'">
                                        <input-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'number'">
                                        <input-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'select'">
                                        <select-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'selectmultiple'">
                                        <selectmultiple-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'date'">
                                        <date-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'datetimerange'">
                                        <datetimerange-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'switch'">
                                        <switch-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'progress'">
                                        <progress-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else-if="control.type == 'dialog'">
                                        <dialog-form-input :KEY="field" :data="data" :controls="controls" @change:data="(e:any)=>changeData(field,e)"/>
                                    </template>
                                    <template v-else>
                                        <text>{{ data[field] }}</text>
                                    </template>
                                </view>
                            </view>
                        </uni-form-item>
                    </view>
                </template>
            </template>

            <view class="expand_btn end" v-if="getExpandClass('_End')">
                <view v-if="expand_active['_End']" @click="expand('_End')">{{ translate('expand') }}<iconfont icon="caret-up" /></view>
                <view v-else @click="expand('_End')">{{ translate('more') }}<iconfont icon="caret-down" /></view>
            </view>
        </uni-forms>
    </view>


    <view class="comp-buttons" >
        <view class="content">
            <template v-for="(btn, index) in buttons">
                <button 
                    v-if="btn.show && btn.render"
                    :class="['btn', btn.type]" 
                    hover-class="hover"
                    @click="btn['click']"
                >
                    {{ btn['label'] }}
                </button>
            </template>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import Storage from '@/common/utils/storage/index'
import EXEC from '@/common/utils/exec';
import { translate } from '@/common/utils/language/index'
import { setChildrens, clearChildrensData } from './js/index'
  
    
    const props = defineProps({
        menuID: <any>{ default: ''},  
        controls:  <any>{ type: Object, default: () => {}, }, // 表单控件 v-modal
        data: { type: Object, default: () => {}, }, // 表单数据 v-modal
        buttons: <any>{ type: Array, default: () => [], }, // 表单数据 v-modal
        module_info: {type:Object, default: () => {}, },  // 模块信息
    })


    const formRef = ref<any>(null);
    // gather 获取值
    const gather = () => {
        return new Promise((resolve, reject)=>{
            let obj = {}
            resolve(obj) 
        })
    }
    const sether = (data:any) => {
        return new Promise((resolve, reject)=>{
            let obj = {}
            resolve(obj) 
        })
    }

  
    defineExpose({
        gather, sether,
    })
    onBeforeMount(async() => {
        set_Group()
    })
    onMounted(()=>{
    })
    onUnmounted(() => {
    })
    const emit = defineEmits(['changeData'])

    const changeData = async (KEY:any, e:any) => { // 控件change事件
        props.data[KEY] = e
        await clearChildrensData(KEY, props.data, props.controls)
        setChildrens(props.data, props.controls)
    }
    const control_class = (item:any) => {
        let newClass:any = ''
        if(item.required){
            newClass = newClass + ' required'
        }
        if(!item.required && !item.show){
            newClass = newClass + ' hidden'
        }
        if(!item.required && item.expand){
            newClass = newClass + ' expand'
        }
        return newClass
    }
    const getExpandClass = (key:any) => {
        let hasExpand = false
        for(let field in props.controls){
            let control = props.controls[field]
            if(control.expand!=undefined && control.render && control.show){
                hasExpand = true
            }
            if(control.type == 'line' && control.field != key && key !='_End'){
                hasExpand = false
            }else if(control.type == 'line' && control.field == key){
                break
            }
        }
        return hasExpand ? 'hasExpand' : ''
    }
    const expand_active = <any>reactive({})
    const expand = (key:any) => {
        expand_active[key] = !expand_active[key]

        let arr = group.value[key]
        for(let field of arr){
            props.controls[field].expand = expand_active[key]
        }
    }


    const group = <any>ref({})
    const set_Group = () => {
        let g = []
        for(let field in props.controls){
            let control = props.controls[field]
            if(control.type == 'line'){
                Object.assign(expand_active, {
                    [control.field]: true
                })
                Object.assign(group.value,{
                    [control.field]: g
                })
                g = []
            }else{
                if(control.expand!=undefined && control.render){
                    g.push(field)
                }
            }
        }
        Object.assign(expand_active, {
            _End: true
        })
        Object.assign(group.value,{
            _End: g
        })
    }

    // 联动 
    watch( 
        ()=>props.data,
        (newData,oldData)=>{
            setChildrens(props.data, props.controls)
        },
        { immediate: true, deep: true, }
    )

</script>
  
<style lang="scss">
.comp-form_input{
    padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    >.listbottom{
        height: 95rpx;
        width: 100vw;
    }
    .expand_btn{
        width: 100vw;
        height: 50rpx;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 -40rpx;
        border-top: 5rpx solid #ddd;

        &.end{
            margin: 0 0 20rpx;
        }
        >view{
            border-radius: 0 0 0 25rpx;
            line-height: 45rpx;
            font-size: 13px;
            color: #999;
            background: #ddd;
            padding: 0 15rpx;
            display: flex;
            flex-grow: 0;
            width: 100rpx;
            text-align: center;
            justify-content: center;
            &.hover{
                opacity: 0.8;
            }
        }
    }
    .line{
        margin: 30rpx 0 10rpx;
        color: #666;
        display: flex;
        line-height: 70rpx;
        padding-left: 20rpx;
        >.dot{
            width: 20rpx;
            height: 50rpx;
            background: $primary-color;
            border-radius: 8rpx;
            margin-right: 20rpx;
            margin-top: 10rpx;
        }
    }
    .control{
        &.hidden{
            height: 0 !important;
            width: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
        }
    }

    .item{
        background: #fff;
        display: flex;
        padding: 10rpx 30rpx;
        border-bottom: 1px solid #ddd;

        &.hidden, &.expand{
            height: 0 !important;
            width: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        &.required{
            >.title{
                color: $primary-color !important;
            }
        }
        >.title{
            color: #999;
            font-size: 12px;
            width: 100px;
            height: 80rpx;
            line-height: 80rpx;
        }
        >.control{
            width: calc(100% - 100px);
            height: 80rpx;
            line-height: 80rpx;
        }
        
    }
}
.comp-buttons{
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding-bottom:env(safe-area-inset-bottom);
    border-top: 1rpx solid #eaf1f7;
    padding-left: 80rpx;
    >.content{
        padding: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        > .btn{
            width: auto;
            padding: 20rpx;
            flex-grow: 0;
            flex-shrink: 0;
            margin: 10rpx;
            font-size: 13px;
            line-height: 1;
            background: $primary-color;
            color: #fff;
            transition: 0.3;
            opacity: 1;
            &.hover, &:focus{
                opacity: 0.5;
            }

            &.danger{
                background: $danger-color;
            }
            &.warning{
                background: $warning-color;
            }
            &.success{
                background: $success-color;
            }
            &.info{
                background: $info-color;
            }
        }
        >.selectNum{
            position: absolute;
            left: 20rpx;
            top: 20rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #fff;
            color: $primary-color;
            border: 1px solid $primary-color;
            padding: 0 20rpx;
            border-radius: 20px;
            font-size: 12px;
        }
    }
}
</style>
  