import { postMessage } from '@/helpers/native-message'
import { browser } from '@/helpers/utils'
import { PullRefresh } from 'vant'
import { defineComponent, PropType, reactive, Teleport, watch } from 'vue'
import styles from './index.module.less'
import { Vue3Lottie } from 'vue3-lottie'
import AstronautJSON from './datas/data.json'
import 'vue3-lottie/dist/style.css'
export default defineComponent({
  name: 'o-full-refresh',
  props: {
    title: String,
    modelValue: {
      type: Boolean,
      default: false
    },
    onRefresh: {
      type: Function,
      default: () => {}
    }
  },

  setup(props, { emit, slots }) {
    const state = reactive({
      fullState: false
    })
    watch(
      () => props.modelValue,
      (val: boolean) => {
        state.fullState = val
        // console.log('刷新结束')
        // emit('update:modelValue', val)
      }
    )
    watch(
      () => state.fullState,
      (val: boolean) => {
        console.log('刷新结束')
        emit('update:modelValue', val)
      }
    )
    return () => (
      <PullRefresh v-model:modelValue={state.fullState} onRefresh={props.onRefresh}>
        {{
          pulling: () => (
            <div>
              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
            </div>
          ),
          loading: () => (
            <div>
              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
            </div>
          ),
          loosing: () => (
            <div>
              {<Vue3Lottie class={styles.animateWrap} animationData={AstronautJSON}></Vue3Lottie>}
            </div>
          ),
          default: () => <> {slots.default && slots.default()}</>
        }}
      </PullRefresh>
    )
  }
})