<template>
  <enum-data title="android-nested-scroll（默认值为all）" :items="types" @change="onTypeChange"></enum-data>
  <scroll-view style="flex:1;">
    <view v-for="item in 5" class="scroll-item">
      <text class="scroll-item-title">item{{item}}</text>
    </view>
    <web-view class="web-view" src="/hybrid/html/local.html" :android-nested-scroll="type"></web-view>
    <view v-for="item in 5" class="scroll-item">
      <text class="scroll-item-title">item{{item}}</text>
    </view>
    <web-view class="web-view" src="/hybrid/html/simple.html" :android-nested-scroll="type"></web-view>
    <view v-for="item in 5" class="scroll-item">
      <text class="scroll-item-title">item{{item}}</text>
    </view>
    <text style="color: coral;text-align: center;margin-top: 6px;">下面是测试嵌套横向滚动scroll-view的场景</text>
    <scroll-view style="flex-direction: row;" direction="horizontal">
      <view v-for="item in 5" class="scroll-item2">
        <text class="scroll-item-title2">item{{item}}</text>
      </view>
      <web-view class="web-view" src="/hybrid/html/local.html" :android-nested-scroll="type"></web-view>
      <view v-for="item in 5" class="scroll-item2">
        <text class="scroll-item-title2">item{{item}}</text>
      </view>
      <web-view class="web-view" src="/hybrid/html/simple.html" :android-nested-scroll="type"></web-view>
      <view v-for="item in 5" class="scroll-item2">
        <text class="scroll-item-title2">item{{item}}</text>
      </view>
    </scroll-view>
    <view v-for="item in 5" class="scroll-item">
      <text class="scroll-item-title">item{{item}}</text>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ItemType } from '@/components/enum-data/enum-data-types';

  const types : ItemType[] = [{ "value": 0, "name": "all" }, { "value": 1, "name": "vertical" }, { "value": 2, "name": "horizontal" }, { "value": 3, "name": "none" }];
  const type = ref("all");

  const onTypeChange = (value : number) => {
    type.value = types[value].name;
  };
</script>

<style>
  .web-view {
    width: 300px;
    height: 300px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    border: black 1px solid;
    align-self: center;
  }

  .scroll-item {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    background-color: #fff;
  }

  .scroll-item2 {
    width: 80px;
    justify-content: center;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    background-color: #fff;
  }

  .scroll-item-title {
    line-height: 60px;
    text-align: center;
    color: #555;
  }

  .scroll-item-title2 {
    text-align: center;
    color: #555;
  }
</style>