<template>
  <view class="dynamic_container container" :class="getContainerClass()">
    <component-form_query 
      ref="FormRef"
      v-model:controls="container.controls"
      v-model:data="container.data"
      v-model:buttons="container.buttons"
      v-model:search="container.search"
      v-model:sort="container.sort"
      v-model:quickSelect="container.quickSelect"

      :container="container"
      :menu_id="container.menu_id"
      :module_code="container.container_code"

      @submit="submit"
      
    />
  </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick,  } from 'vue'
import { onPullDownRefresh, onLoad, onBackPress, onShow  } from '@dcloudio/uni-app'
import { ConfigStore } from '../../stores/ConfigStore'
import { DataStore } from '../../stores/DataStore'
import { ParamsStore } from '../../stores/ParamsStore'
import { getDefaultData } from '../../js/events'
import { translate } from '@/common/utils/language/index'
  

// store
const store_config = ConfigStore()
const store_data = DataStore()
const store_params = ParamsStore()

// config
const page_code = <any>computed(()=>props.container.page_code)
const container_code = <any>computed(()=>props.container.container_code)

// props
const props = defineProps({
  container: { type: Object, required: true, }
})

// ref
const FormRef = <any>ref()



const submit = (data:any) => {
  props.container.data = data
  setTimeout(()=>{
    for(let btn of props.container.buttons){
      if(btn.field == 'query'){
        if(btn.click){
          for(let key in props.container.controls){
            if(props.container.controls[key].required && !data[key]){
                uni.showToast({
                    icon: 'error',
                    title: props.container.controls[key].label+' '+translate('is required'),
                })
                return
            }
          }
            btn.click() 
          break
        }
      }
    }
  },200)
}

const getContainerClass = () => {
  let class_name = ''
  if(Object.keys(props.container.quickSelect).length >0){
    class_name = class_name + ' has-quickSelect'
  }
  if(Object.keys(props.container.search).length >0){
    class_name = class_name + ' has-search'
  }
  return class_name
}


const isMounted = ref(false)
onBeforeMount(async() => {
})
onMounted(()=>{
  getDefaultData(props.container.controls,props.container.data)
  isMounted.value = true

  let timer = setTimeout(()=>{
    for(let btn of props.container.buttons){
      if(btn.field == 'query' && btn.auto_run){
          FormRef.value.submit()
          clearTimeout(timer)
        break
      }
    }
  }, 400)
})
onUnmounted(() => {
})
onShow(()=>{
})


watch(
  ()=>props.container.data,
  ()=>{
    store_data.set({
      page_code:props.container.page_code, 
      container_code:props.container.container_code, 
      data:props.container.data, 
    })
  },
  { deep: true , immediate: true }
)


</script>

<style lang="scss">
</style>
  