<template>
  <qinui-theme v-model="theInited">
    <div>
      <qinui-layout-tabbar
        v-model="theInited"
        :refresher-enabled="theInited"
        :refresher-triggered="theDetailRefeshLoading"
        :refresh="onRefresh"
      >
        <div>
          <qinui-button @click="onOpenKefu1">联系客服1</qinui-button>
          <div style="height: 2000px; background-color: aqua" />
          <div>底部了</div>
        </div>
      </qinui-layout-tabbar>
      <qinui-action-sheet-service
        ref="servicePanelBox1"
        :getData="getData1"
        webviewPageName="Webview"
        :extData="{
          shopId: 21,
        }"
        :zIndex="9999"
        @close="onClose"
      />
    </div>
  </qinui-theme>
</template>

<script lang="ts" setup>
  import { onReady } from '@fe6/qinjs-app';
  import { ref, shallowRef } from 'vue';
  import { theData1 } from './conf';

  const theInited = shallowRef(false);

  const onGetData = () => {
    setTimeout(() => {
      theInited.value = true;
      theBarStatus.value = true;
    }, 400);
  };

  // 客服相关 start
  const servicePanelBox1 = ref();
  const onOpenKefu1 = () => {
    const theKefuParams: any = { imType: '' };
    theKefuParams.imType = 'order';
    theKefuParams.imOrderId = 'ots73070904087885765219586';
    servicePanelBox1.value.onInit(theKefuParams);
    theBarStatus.value = false;
  };
  // 客服相关 end

  const theBarStatus = shallowRef(false);
  const onClose = () => {
    theBarStatus.value = true;
  };

  // 获取客服数据
  const getData1 = () => {
    return new Promise((resolve) => {
      resolve(theData1);
    });
  };

  const theDetailRefeshLoading = shallowRef(false);
  // 下拉刷新
  const onRefresh = async () => {
    if (theInited.value) {
      theDetailRefeshLoading.value = true;
      setTimeout(() => {
        theDetailRefeshLoading.value = false;
      }, 500);
    }
  };

  onReady(onGetData);
</script>