<template>
  <qinui-theme v-model="theInited">
    <!-- 全屏使用 -->
    <qinui-submit-service
      zIndex="2000"
      fixed
      phone=""
      :getData="getData1"
      :extData="{
        shopId: 21,
      }"
      minHeight="100vh"
      @click="onSave"
      @buttonInited="onBtnInited"
      ref="theService"
    >
      <!-- 部分使用 -->
      <qinui-submit-service phone="13011805800" @click="onSave" />
      <qinui-submit-service
        :getData="getData1"
        :extData="{
          shopId: 21,
        }"
        zIndex="3000"
      />
      <qinui-submit-service
        :getData="getData2"
        :extData="{
          shopId: 21,
        }"
        zIndex="3000"
      />
      <div>
        <div style="height: 2000rpx; background-color: aqua" />
        <div>底部了</div>
      </div>
      <template v-slot:button>
        <div :style="btnStyle" v-if="btnStyle" @click="onRefund">退款</div>
      </template>
    </qinui-submit-service>
  </qinui-theme>
</template>

<script>
  import { theData1, theData2 } from '../../demos/action-sheet-service/conf';
  import { onMounted, ref, shallowRef } from 'vue';

  export default {
    data() {
      return {};
    },
    onLoad() {},
    setup() {
      const theInited = shallowRef(false);
      const btnStyle = shallowRef('');
      const theService = ref();
      onMounted(() => {
        theInited.value = true;
      });
      return {
        theService,
        theInited,
        btnStyle,
      };
    },
    methods: {
      onSave: (theEv) => {
        console.log(theEv, 'theEv');
      },
      getData1() {
        return new Promise((resolve) => {
          resolve(theData1);
        });
      },
      onBtnInited(theBtnStyle) {
        console.log(theBtnStyle, '按钮样式');
        this.btnStyle = theBtnStyle;
      },
      getData2() {
        return new Promise((resolve) => {
          resolve(theData2);
        });
      },
      onRefund() {
        this.$refs.theService?.onShowKefu?.();
      },
    },
  };
</script>