<template>
  <div>
    <!-- 整屏使用 -->
    <qinui-submit-action
      zIndex="2000"
      fixed
      okText="提交"
      cancelText="添加"
      cancelIcon="icon-yuyue"
      @ok="onOks"
      minHeight="100vh"
      @cancel="() => onSave('取消')"
      @inited="onInited"
    >
      <scroll-view
        :style="{ height: theHeight }"
        :scroll-y="true"
        :upperThreshold="100"
        @scrolltolower="onLoadList"
      >
        <!-- 局部使用 -->
        <qinui-submit-action
          okText="打开弹框"
          @ok="onOks"
          @cancel="() => onSave('取消')"
        />
        <div style="height: 2000rpx; background-color: aqua" />
        <div>底部了</div>
      </scroll-view>
    </qinui-submit-action>
    <qinui-popup title="标题" zIndex="2001" ref="thePopup">
      <qinui-submit-action
        fixed
        okText="1提交"
        cancelText="2添加"
        style="height: 300rpx"
        @ok="() => onSave('ok')"
        @cancel="() => onSave('取消')"
      >
        <div style="height: 300rpx; overflow: auto">
          <div style="height: 1500rpx; background-color: #f5f6fa">11</div>
          <div>底部了</div>
        </div>
      </qinui-submit-action>
    </qinui-popup>
  </div>
</template>

<script lang="ts" setup>
  import { ref, shallowRef } from 'vue';

  const onOks = () => {
    onOpenPopup();
    onSave('ok');
  };

  const onSave = (theEv: any) => {
    console.log(theEv, 'theEv');
  };

  const thePopup = ref();
  const onOpenPopup = () => {
    thePopup.value.open();
  };
  const theHeight = shallowRef('');
  const onInited = (theNewHeight: string) => {
    theHeight.value = theNewHeight;
    console.log(theNewHeight, 'theNewHeight');
  };
  const onLoadList = () => {
    console.log('滚到底部');
  };
</script>