<template>
    <view class="dynamic_container container">
      <component-list 
        ref="listRef"
        v-model:data="container.data"
        v-model:fields="container.columns"
        v-model:buttons="container.buttons"
        :select_box="container.selectType"
        :menu_id="container.menu_id"
        :module_code="container.container_code"
        :loading="loading_api"
        :reachBottomText="reachBottomText"
        :total="total"
        @row_click="(e:any)=>rowClick(e)"
        @select="(e:any)=>select(e)"
        @onReach="ReachBottom"
      />
    </view>
  </template>
    
  <script setup lang="ts">
  import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
  import { onPullDownRefresh, onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
  import { ConfigStore } from '../../stores/ConfigStore'
  import { DataStore } from '../../stores/DataStore'
  import { ParamsStore } from '../../stores/ParamsStore'
  import { http } from '@/common/utils/request'
    
  
  // 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 listRef = <any>ref()
  
  // query
  const start = <any>ref(1)
  const total = <any>ref(0)
  const loading_api = <any>ref(false)
  const query = ({requery}:any) => {
    if(requery) start.value = 1
    let event = props.container['queryEvent'] || ''
    if(event){
      let run =  event['run']
      let api = run['to_API']
      if(api['request_uri'] && api['request_method']){
        let params = {
          ...store_params.container[props.container.page_code][props.container.container_code],// 传参
          ...api['params'], // access事件固定参数
          start: start.value,
          limit: 10,
        }
        // 存储过程
        if(api['program']){
          Object.assign(params, {
            "[ProcedureName]": api['program']
          })
        }
        // 处理表头 query_header_field
        let header = []
        for(let col of props.container.columns){
          header.push(col.field)
        }
        Object.assign(params, {
            'query_header_field': header.toString(),
        })
  
        // 处理 udf_param_json
        let udf_param_json = {
            "container_id": props.container['container_id'],
            "run_id": run['run_id'],
        }
        if(api['cross_container_to_table']){
            Object.assign(udf_param_json, {cross_container_to_table: api['cross_container_to_table']})
        }
        if(api['order_by']){
            Object.assign(udf_param_json, {order_by: api['order_by']})
        }
        if(api['auth']){
            Object.assign(udf_param_json, {auth: api['auth']})
        }
        Object.assign(params, {
            'udf_param_json': JSON.stringify(udf_param_json)
        })
        loading_api.value = true
        http[api['request_method'].toLowerCase()](api['request_uri'],params).then(async (result:any) => {
          let data = result['result']
          total.value = result['total']
          if(start.value==1){
            props.container.data = data
          }else{
            props.container.data = props.container.data.concat(data)
          }
          loading_api.value = false
        }).catch((err:any) => {
          loading_api.value = false
        })
      }
    }
  
  }
  const reachBottomText = ref('...')
  
  const rowClick = (row:any) => {
    props.container.clickEvent.click(row)
  }
  const select = (rows:any) => {
    props.container.select_data = rows
  }
  
  
  onBeforeMount(async() => {
  })
  onMounted(()=>{
    isMounted.value = true
    uni.startPullDownRefresh()
  })
  onUnmounted(() => {
  })
  const isMounted = ref(false)
  onShow(()=>{
    if(isMounted.value){
      query({requery: true})
    }
  })
  const ReachBottom = () =>{
    let pageNum = total.value / 10
    if(start.value < pageNum){
      start.value = start.value + 1
      reachBottomText.value = '加载更多'
      query({requery: false})
    }else{
      reachBottomText.value = '我是底线'
    }
    
  }
  onPullDownRefresh(()=>{
    start.value = 1
    let timer = setTimeout(()=>{
      query({requery: true})
      uni.stopPullDownRefresh()
      clearTimeout(timer)
    }, 1000)
  
  })
  
  
  watch(
    ()=>props.container.select_data,
    ()=>{
      store_data.set({
        page_code:props.container.page_code, 
        container_code:props.container.container_code, 
        data: props.container.select_data,
      })
    },
    { deep: true , immediate: true }
  )
  
  const container_params = <any>computed(()=>store_params.container[props.container.page_code][props.container.container_code])
  watch(
    ()=>store_params.container[props.container.page_code][props.container.container_code],
    ()=>{
      let timer = setTimeout(()=>{
        query({requery: true})
        clearTimeout(timer)
      },100)
    },
    { deep: true , immediate: false }
  )
  </script>
  
  <style lang="scss">
  .reachBottom{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  </style>
    