<template>
  <view class="page">
    <view class="flex flex-row justify-between mb-10">
      <text>v-txt for text:</text>
      <text id="v-text-text" v-text="vTextForText"></text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>v-txt for view:</text>
      <view id="v-text-view" v-text="vTextForView"></view>
    </view>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      vTextForText: 'v-text for text',
      vTextForView: 'v-text for view',
    }
  }
}
</script>

<template>
  <view class="page">
    <view class="flex flex-row justify-between mb-10">
      <text>v-txt for text:</text>
      <text id="v-text-text" v-text="vTextForText"></text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>v-txt for view:</text>
      <view id="v-text-view" v-text="vTextForView"></view>
    </view>
  </view>
</template>

<script setup lang="uts">
const vTextForText = ref('v-text for text')
const vTextForView = ref('v-text for view')
</script>

<template>
  <view v-html="html" />
</template>

<script lang="uts">
export default {
  data() {
    return {
      html: '<p class="p" style="color: red;">hello world for options API!</p>'
    }
  }
}
</script>

<template>
  <view v-html="html" />
</template>

<script setup lang="uts">
const  html = '<p class="p" style="color: red;">hello world for composition API!</p>'
</script>

<template>
  <view class="page">
    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
    <Foo v-show="dataInfo.showDefaultFalse" />
  </view>
</template>

<script lang="uts">
  import Foo from './Foo.uvue'

  type DataInfo = {
    showDefaultTrue : boolean
    showDefaultFalse : boolean
  }

  export default {
    components: { Foo },
    data() {
      return {
        dataInfo: {
          showDefaultTrue: true,
          showDefaultFalse: false
        } as DataInfo
      }
    },
    methods: {
      toggleShow() {
        this.dataInfo.showDefaultTrue = !this.dataInfo.showDefaultTrue
        this.dataInfo.showDefaultFalse = !this.dataInfo.showDefaultFalse
      }
    }
  }
</script>

<style>
  .default-true,
  .default-false {
    display: flex;
    width: 100px;
    height: 50px;
  }

  .default-true {
    background-color: greenyellow;
  }

  .default-false {
    background-color: antiquewhite;
  }
</style>

<template>
  <view class="page">
    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
    <Foo v-show="dataInfo.showDefaultFalse" />
  </view>
</template>

<script setup lang="uts">
  import Foo from './Foo.uvue'

  type DataInfo = {
    showDefaultTrue : boolean
    showDefaultFalse : boolean
  }

  const dataInfo = reactive({
    showDefaultTrue: true,
    showDefaultFalse: false
  } as DataInfo)

  const toggleShow = () => {
    dataInfo.showDefaultTrue = !dataInfo.showDefaultTrue
    dataInfo.showDefaultFalse = !dataInfo.showDefaultFalse
  }

  defineExpose({
    dataInfo
  })
</script>

<style>
  .default-true,
  .default-false {
    display: flex;
    width: 100px;
    height: 50px;
  }

  .default-true {
    background-color: greenyellow;
  }

  .default-false {
    background-color: antiquewhite;
  }
</style>

<template>
  <view class="page">
    <view class="mb-10 flex justify-between flex-row">
      <text>v-if</text>
      <text id="v-if-show" v-if="show">show</text>
    </view>
    <button id="switch-v-if-btn" @click="show = !show">switch v-if</button>

    <view class="mt-10 mb-10 flex justify-between flex-row">
      <text>num:</text>
      <text id="num">{{ num }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>v-if v-else-if v-else</text>
      <text id="num-v-if" v-if="num == 1">v-if num = 1</text>
      <text id="num-v-else-if" v-else-if="num == 2">v-else-if num = 2</text>
      <text id="num-v-else" v-else>v-else</text>
    </view>
    <button id="change-num-btn" @click="changeNum">change num</button>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      show: true,
      num: 1
    }
  },
  methods: {
    changeNum() {
      if(this.num<3) {
        this.num++
      } else {
        this.num = 1
      }
    },
  }
}
</script>

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
      <view class="page">
        <view class="mb-10 flex justify-between flex-row">
          <text>v-if</text>
          <text id="v-if-show" v-if="show">show</text>
        </view>
        <button id="switch-v-if-btn" @click="show = !show">switch v-if</button>

        <view class="mt-10 mb-10 flex justify-between flex-row">
          <text>num:</text>
          <text id="num">{{ num }}</text>
        </view>
        <view class="mb-10 flex justify-between flex-row">
          <text>v-if v-else-if v-else</text>
          <text id="num-v-if" v-if="num == 1">v-if num = 1</text>
          <text id="num-v-else-if" v-else-if="num == 2">v-else-if num = 2</text>
          <text id="num-v-else" v-else>v-else</text>
        </view>
        <button id="change-num-btn" @click="changeNum">change num</button>

        <!-- 测试标题 -->
        <view class="mt-10">
          <text class="section-title">多层嵌套v-if测试</text>
        </view>

        <!-- view 普通版本 -->
        <view class="mt-10">
          <text class="test-label">1. view 普通版本 </text>
          <view class="test-item" v-if="viewNormalChild1">
            <view v-if="viewNormalChild1" id="view-normal-child1">
              <text>view二层嵌套内容</text>
              <view v-if="viewNormalChild2" id="view-normal-child2">
                <text>view三层嵌套内容</text>
              </view>
              <button id="toggle-view-normal-child2" @click="viewNormalChild2 = !viewNormalChild2">内层切换显示</button>
            </view>
          </view>
          <button id="toggle-view-normal-child1" @click="viewNormalChild1 = !viewNormalChild1">外层切换显示</button>
        </view>

        <!-- view 拍平版本 -->
        <view class="mt-10">
          <text class="test-label">2. view 拍平版本 </text>
          <view class="test-item" v-if="viewFlattenChild1">
            <view flatten v-if="viewFlattenChild1" id="view-flatten-child1">
              <view flatten v-if="viewFlattenChild1">
                <text>view拍平三层嵌套内容（应该能消失）</text>
              </view>
            </view>
          </view>
          <button id="toggle-view-flatten-child1" @click="viewFlattenChild1 = !viewFlattenChild1">
            切换显示
          </button>
        </view>

        <!-- text 普通版本 -->
        <view class="mt-10">
          <text class="test-label">3. text 普通版本 </text>
          <view class="test-item">
            <text v-if="textNormalChild1">
              <text v-if="textNormalChild1" id="text-normal-child1">text二层嵌套内容（应该能消失）</text>
            </text>
          </view>
          <button id="toggle-text-normal-child1" @click="textNormalChild1 = !textNormalChild1">
            切换显示
          </button>
        </view>

        <!-- text 拍平版本 -->
        <view class="mt-10">
          <text class="test-label">4. text 拍平版本 </text>
          <view flatten class="test-item">
            <text flatten v-if="textFlattenChild1">
              <text flatten v-if="textFlattenChild1" id="text-flatten-child1">text拍平二层嵌套内容（应该能消失）</text>
            </text>
          </view>
          <button id="toggle-text-flatten-child1" @click="textFlattenChild1 = !textFlattenChild1">
            切换显示
          </button>
        </view>

        <!-- image 普通版本 -->
        <view class="mt-10">
          <text class="test-label">5. image 普通版本 </text>
          <view class="test-item">
              <image v-if="imageNormalChild1" id="image-normal-child1" src="/static/logo.png" class="test-image"></image>
          </view>
          <button id="toggle-image-normal-child1" @click="imageNormalChild1 = !imageNormalChild1">
            切换显示
          </button>
        </view>

        <!-- image 拍平版本 -->
        <view class="mt-10">
          <text class="test-label">6. image 拍平版本（多层嵌套v-if）</text>
          <view flatten class="test-item">
              <image flatten v-if="imageFlattenChild1" id="image-flatten-child1" src="/static/logo.png" class="test-image"></image>
          </view>
          <button id="toggle-image-flatten-child1" @click="imageFlattenChild1 = !imageFlattenChild1">
            切换显示
          </button>
        </view>
        
        <!-- scroll-view：动态切换 -->
        <view class="mt-10">
          <text class="test-label">8. scroll-view（动态v-if）</text>
          <view class="test-item">
            <scroll-view v-if="scrollViewChild1" id="scroll-view-child1" class="scroll-view-test">
              <text>scroll-view内容1（应该能消失）</text>
              <view><text>scroll-view内容2（应该能消失）</text></view>
            </scroll-view>
            <button id="toggle-scroll-view-child1" @click="scrollViewChild1 = !scrollViewChild1">
              切换scroll-view显示
            </button>
          </view>
        </view>

        <!-- 自定义 child 组件 -->
        <view class="mt-10">
          <text class="test-label">9. child 组件（子child动态v-if普通版本➕拍平版本）</text>
          <view class="test-item">
            <child v-if="childComponent1" id="child-component1"></child>
            <view flatten>
                <child v-if="childComponent1" id="child-component2" flatten></child>
            </view>
            <button id="toggle-child-component1" @click="childComponent1 = !childComponent1">
              切换child组件显示
            </button>
          </view>
        </view>

      </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
import child from './child.uvue'

// 原有变量
const show = ref(true)
const num = ref(1)

// view 测试变量
const viewNormalChild1 = ref(true)
const viewNormalChild2 = ref(true)
const viewFlattenChild1 = ref(true)

// text 测试变量
const textNormalChild1 = ref(true)
const textFlattenChild1 = ref(true)

// image 测试变量
const imageNormalChild1 = ref(true)
const imageFlattenChild1 = ref(true)

// scroll-view 测试变量
const scrollViewChild1 = ref(true)

// child 组件测试变量
const childComponent1 = ref(true)

const changeNum = () => {
  if(num.value<3) {
    num.value++
  } else {
    num.value = 1
  }
}
</script>

<style>
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.test-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.test-item {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.test-image {
  width: 50px;
  height: 50px;
}

.scroll-view-test {
  height: 100px;
  background-color: #e0e0e0;
  padding: 10px;
}
</style>

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="page">
      <text class="bold mb-10">v-for number</text>
      <view class="mb-10" v-for="item in 3" :key="item">
        <text :id="`number-${item}`">{{ item }}</text>
      </view>
      
      <view class="mb-10" v-for="item in utsNumber" :key="item">
        <text :id="`uts-number-${item}`">{{ item }}</text>
      </view>

      <view class="bold mb-10">v-for object</view>
      <view
        v-for="(value, key) in object"
        :key="key"
        class="mb-10 flex justify-between flex-row">
        <text :id="key">{{ key }}</text>
        <text :id="value">{{ value }}</text>
      </view>

      <view class="bold mb-10">v-for & v-if list items</view>
      <view
        id="v-for-v-if-list-items"
        v-for="item in listItems"
        :key="item.name">
        <template v-if="item.show">
          <view class="mb-10 flex justify-between flex-row">
            <text :id="item.name">{{ item.name }}</text>
            <text @click="item.count++" :id="`v-if-${item.name}-count`">{{
              item.count
            }}</text>
          </view>
          <template v-for="child in item.items">
            <view
              v-if="child.show"
              :key="child.name"
              class="mb-10 flex justify-between flex-row">
              <text :id="child.name">{{ child.name }}</text>
              <text @click="child.count++" :id="`v-if-${child.name}-count`">{{
                child.count
              }}</text>
            </view>
          </template>
        </template>
      </view>

      <view class="bold mb-10">v-for & v-show list items</view>
      <view
        id="v-for-v-show-list-items"
        v-for="item in listItems"
        v-show="item.show"
        :key="item.name">
        <view class="mb-10 flex justify-between flex-row">
          <text :id="item.name">{{ item.name }}</text>
          <text @click="item.count++" :id="`v-show-${item.name}-count`">{{
            item.count
          }}</text>
        </view>
        <view
          v-for="child in item.items"
          v-show="child.show"
          :key="child.name"
          class="mb-10 flex justify-between flex-row">
          <text :id="child.name">{{ child.name }}</text>
          <text @click="child.count++" :id="`v-show-${child.name}-count`">{{
            child.count
          }}</text>
        </view>
      </view>

      <view
        class="mb-10 flex justify-between flex-row"
        v-for="item in mapList"
        :key="item[0]">
        <text>{{ item[0] }}</text>
        <text :id="item[0]">{{ item[1] }}</text>
      </view>

      <view class="mb-10" v-for="(item, index) in setList" :key="index">
        <text :id="`set-value-${index + 1}`">{{ item }}</text>
      </view>

      <view class="bold mb-10">v-for UTSJSONObject</view>
      <view
        v-for="(value, key) in utsJSONObject"
        :key="key"
        class="mb-10 flex justify-between flex-row">
        <text :id="key">{{ key }}</text>
        <text :id="value">{{ value }}</text>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts">
type VForObject = {
  key1 : string
  key2 : string
  key3 : string
}

type ListItem = {
  name: string
  count : number
  show: boolean
  items?: ListItem[]
}

// TODO: v-for map set deep array 动态增加删除
export default {
  data() {
    return {
      object: { key1: 'value1', key2: 'value2', key3: 'value3' } as VForObject,
      listItems: [
        { name: '1',
          count: 0,
          show: true,
          items:[
            { name: '1-1', count: 0, show: false },
            { name: '1-2', count: 0, show: true },
          ]
        },
        { name: '2',
          count: 0,
          show: true,
          items:[
            { name: '2-1', count: 0, show: true },
            { name: '2-2', count: 0, show: false },
          ]
        },
        { name: '3',
          count: 0,
          show: false,
          items:[
            { name: '3-1', count: 0, show: true },
            { name: '3-2', count: 0, show: true },
          ]
        },
      ] as ListItem[],
      mapList: new Map<string, string>([
        ['map-key-1', 'map value 1'],
        ['map-key-2', 'map value 2'],
        ['map-key-3', 'map value 3'],
      ]),
      setList: new Set<string>(['set value 1', 'set value 2', 'set value 3']),
      utsJSONObject: { utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' },
      utsNumber: JSON.parse("3") as number
    }
  }
}
</script>

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="page">
      <text class="bold mb-10">v-for number</text>
      <view class="mb-10" v-for="item in 3" :key="item">
        <text :id="`number-${item}`">{{ item }}</text>
      </view>
      
      <view class="mb-10" v-for="item in utsNumber" :key="item">
        <text :id="`uts-number-${item}`">{{ item }}</text>
      </view>

      <view class="bold mb-10">v-for object</view>
      <view
        v-for="(value, key) in object"
        :key="key"
        class="mb-10 flex justify-between flex-row">
        <text :id="key">{{ key }}</text>
        <text :id="value">{{ value }}</text>
      </view>

      <view class="bold mb-10">v-for & v-if list items</view>
      <view
        id="v-for-v-if-list-items"
        v-for="item in listItems"
        :key="item.name">
        <template v-if="item.show">
          <view class="mb-10 flex justify-between flex-row">
            <text :id="item.name">{{ item.name }}</text>
            <text @click="item.count++" :id="`v-if-${item.name}-count`">{{
              item.count
            }}</text>
          </view>
          <template v-for="child in item.items">
            <view
              v-if="child.show"
              :key="child.name"
              class="mb-10 flex justify-between flex-row">
              <text :id="child.name">{{ child.name }}</text>
              <text @click="child.count++" :id="`v-if-${child.name}-count`">{{
                child.count
              }}</text>
            </view>
          </template>
        </template>
      </view>

      <view class="bold mb-10">v-for & v-show list items</view>
      <view
        id="v-for-v-if-list-items"
        v-for="item in listItems"
        :key="item.name"
        v-show="item.show">
        <view class="mb-10 flex justify-between flex-row">
          <text :id="item.name">{{ item.name }}</text>
          <text @click="item.count++" :id="`v-show-${item.name}-count`">{{
            item.count
          }}</text>
        </view>
        <view
          v-for="child in item.items"
          v-show="child.show"
          :key="child.name"
          class="mb-10 flex justify-between flex-row">
          <text :id="child.name">{{ child.name }}</text>
          <text @click="child.count++" :id="`v-show-${child.name}-count`">{{
            child.count
          }}</text>
        </view>
      </view>

      <view
        class="mb-10 flex justify-between flex-row"
        v-for="item in mapList"
        :key="item[0]">
        <text>{{ item[0] }}</text>
        <text :id="item[0]">{{ item[1] }}</text>
      </view>

      <view class="mb-10" v-for="(item, index) in setList" :key="index">
        <text :id="`set-value-${index + 1}`">{{ item }}</text>
      </view>

      <view class="bold mb-10">v-for UTSJSONObject</view>
      <view
        v-for="(value, key) in utsJSONObject"
        :key="key"
        class="mb-10 flex justify-between flex-row">
        <text :id="key">{{ key }}</text>
        <text :id="value">{{ value }}</text>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
type VForObject = {
  key1 : string
  key2 : string
  key3 : string
}

type ListItem = {
  name: string
  count : number
  show: boolean
  items?: ListItem[]
}

// 可通过泛型指定类型
const object = reactive<VForObject>({ key1: 'value1', key2: 'value2', key3: 'value3' })
const listItems = ref<ListItem[]>([
  { name: '1',
    count: 0,
    show: true,
    items:[
      { name: '1-1', count: 0, show: false },
      { name: '1-2', count: 0, show: true },
    ]
  },
  { name: '2',
    count: 0,
    show: true,
    items:[
      { name: '2-1', count: 0, show: true },
      { name: '2-2', count: 0, show: false },
    ]
  },
  { name: '3',
    count: 0,
    show: false,
    items:[
      { name: '3-1', count: 0, show: true },
      { name: '3-2', count: 0, show: true },
    ]
  },
])

const mapList = new Map<string, string>([
  ['map-key-1', 'map value 1'],
  ['map-key-2', 'map value 2'],
  ['map-key-3', 'map value 3'],
])

const setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])

const utsJSONObject = reactive({ utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' })

const utsNumber = JSON.parse("3") as number
</script>

<template>
  <view class="page">
    <text class="bold mb-10">下方按钮点击累加 count</text>
    <view class="flex justify-between flex-row mb-10">
      <text>count:</text>
      <text id="count">{{ count }}</text>
    </view>
    <button class="mb-10 btn" @click="handleClick">@click="handleClick" 缩写</button>
    <button class="mb-10 btn" v-on:click="handleClick">
      v-on:click="handleClick" 方法处理函数
    </button>
    <button class="mb-10 btn" v-on:click="count++">
      v-on:click="count++" 内联事件
    </button>
    <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
      v-on:click="handleClick($event as MouseEvent)"
      内联声明，注意要显式声明$event的类型
    </button>
    <!-- #ifndef MP -->
    <button class="mb-10 btn" v-on:[event]="handleClick">
      v-on:[event]="handleClick" 动态事件
    </button>
    <button class="mb-10 btn" v-on="{ click: handleClick }">
      v-on="{ click: handleClick }" 对象语法
    </button>
    <!-- #endif -->
    <!-- TODO: ios 不支持 -->
    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->
    <button class="mb-10 btn" id="btn-once" @click.once="handleClick">@click once</button>
    <!-- #endif -->
    <view @click="handleClick">
      <button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button>
    </view>
    <button class="mb-10" id="btn-prevent" @touchstart.prevent="handleTouchstart" @click="handleClick">@touch prevent</button>
  </view>
</template>

<script lang="uts">
type BtnPreventRect = {
  value: DOMRect | null
}
  
export default {
  data() {
    return {
      count: 0,
      event: 'click',
      btnPreventRect: {
        value: null as DOMRect | null
      } as BtnPreventRect
    }
  },
	// #ifdef APP-ANDROID || APP-IOS
  onReady(){
    const btnPrevent = uni.getElementById("btn-prevent")
    console.log('btnPrevent', btnPrevent);
    this.btnPreventRect.value = btnPrevent?.getBoundingClientRect()
    console.log('btnPreventRect', this.btnPreventRect.value);
    this.btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44
  },
	// #endif
  methods: {
    handleTouchstart(){
      console.log('handleTouchstart')
    },
    handleClick(e : MouseEvent) {
      this.count++
      console.log('handleClick', e)
    }
  }
}
</script>

<template>
  <view class="page">
    <text class="bold mb-10">下方按钮点击累加 count</text>
    <view class="flex justify-between flex-row mb-10">
      <text>count:</text>
      <text id="count">{{ count }}</text>
    </view>
    <button class="mb-10 btn" @click="handleClick">
      @click="handleClick" 缩写
    </button>
    <button class="mb-10 btn" v-on:click="handleClick">
      v-on:click="handleClick" 方法处理函数
    </button>
    <button class="mb-10 btn" v-on:click="count++">
      v-on:click="count++" 内联事件
    </button>
    <button class="mb-10 btn" v-on:click="handleClick($event as MouseEvent)">
      v-on:click="handleClick($event as MouseEvent)"
      内联声明，注意要显式声明$event的类型
    </button>
    <!-- #ifndef MP -->
    <button class="mb-10 btn" v-on:[event]="handleClick">
      v-on:[event]="handleClick" 动态事件
    </button>
    <button class="mb-10 btn" v-on="{ click: handleClick }">
      v-on="{ click: handleClick }" 对象语法
    </button>
    <!-- #endif -->
    <!-- TODO: ios 不支持 -->
    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->
    <button class="mb-10 btn" id="btn-once" @click.once="handleClick">@click once</button>
    <!-- #endif -->
    <view @click="handleClick">
      <button class="mb-10 btn" id="btn-stop" @click.stop="handleClick">@click stop</button>
    </view>
    <button class="mb-10" id="btn-prevent" @touchstart.prevent="handleTouchstart" @click="handleClick">@touch prevent</button>
  </view>
</template>

<script setup lang="uts">
const count = ref(0)

const event = ref('click')

type BtnPreventRect = {
  value: DOMRect | null
}

let btnPreventRect = reactive({
  value: null
} as BtnPreventRect)
// #ifdef APP-ANDROID || APP-IOS
onReady(() => {
  const btnPrevent = uni.getElementById("btn-prevent")
  btnPreventRect.value = btnPrevent!.getBoundingClientRect()
  btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44
})
// #endif

const handleTouchstart = () => {
  console.log('handleTouchstart')
}

const handleClick = (e : MouseEvent) => {
  count.value++
  console.log('handleClick', e)
}

defineExpose({
  btnPreventRect
})
</script>

<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
  <!-- #endif -->
  <view class="page">
    <!-- v-bind attribute -->
    <button id="disabled-btn" class="mb-10" :disabled="true">:disabled true</button>
    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">v-bind:disabled false</button>

    <!-- v-bind style -->
    <view class="flex justify-between flex-row mb-10">
      <text>bind object style fontSize:</text>
      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
        {{ dataInfo.fontSize }}
      </text>
    </view>
    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
      <view>bind arr style</view>
      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
      <view>{{ dataInfo.border }}</view>
    </view>
    <view class="mb-10 p-10">
        <text id="bind-raw-object-style" :style="rawObjectStyle">rawObjectStyle</text>
    </view>
    <view class="mb-10 p-10">
        <text id="bind-raw-array-style" :style="rawArrayStyle">rawArrayStyle</text>
    </view>

    <!-- v-bind props -->
    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />

    <!-- v-bind props -->
    <Foo checked />
    
    <!-- #ifndef MP -->
    <!-- 绑定对象 -->
    <Foo v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" />
    <Foo v-bind="fooProps"/>
    <Foo id="bindObj1" v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" />
    <!-- 绑定对象合并 v-bind 在前 -->
    <Foo v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" id="bindObj2" :title="dataInfo.fooProps.title + ' override'" />
    <!-- 绑定对象合并 v-bind 在后 -->
    <Foo id="bindObj3" title="foo" v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" />
    <!-- 绑定对象合并 v-bind 在中间（UTSJSONObject）-->
    <Foo id="bindObj4" v-bind="fooProps" title="foo title(json) override" />
    <!-- 绑定对象合并（UTSJSONObject）-->
    <Foo id="bindObj5" title="foo" v-bind="fooProps" />
    <!-- #endif -->
    
    <!-- v-bind in style -->
    <!-- #ifdef WEB -->
    <view class="mb-10 v-bind-css"></view>
    <!-- #endif -->
  </view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>

<script lang="uts">
  import Foo from './Foo-options.uvue'
  import { FooProps, FooPropsObj } from './type.uts'

  type DataInfo = {
    fontSize : string
    backgroundColor : string
    border : string
    fooProps : FooProps
    vBindClassBackgroundColor : string
    vBindClassRpxHeight : string
  }

  export default {
    components: { Foo },
    data() {
      return {
        dataInfo: {
          fontSize: '20px',
          backgroundColor: 'background-color: green',
          border: 'border: 2px solid red',
          fooProps: {
            title: 'foo title',
            num: 1,
            obj: {
              name: 'foo obj name'
            } as FooPropsObj
          },
          vBindClassBackgroundColor: 'red',
          vBindClassRpxHeight: '300rpx'
        } as DataInfo,
        fooProps:{
            title: 'foo title(json)',
            num: 2,
        },
        rawObjectStyle: {
            width: '100%',
            height: '30px',
            'background-color': 'red'
        },
        rawArrayStyle: [
            {
              width: '100%',
              height: '30px'
            },
            {
              'background-color': 'red'
            }
        ]
      }
    }
  }
</script>

<style>
  /* #ifdef WEB */
  .v-bind-css {
    background-color: v-bind(dataInfo.vBindClassBackgroundColor);
    height: v-bind(dataInfo.vBindClassRpxHeight);
  }
  /* #endif */
</style>

<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
  <!-- #endif -->    
  <view class="page">
    <!-- v-bind attribute -->
    <button id="disabled-btn" class="mb-10" :disabled="true">
      :disabled true
    </button>
    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
      v-bind:disabled false
    </button>

    <!-- v-bind style -->
    <view class="flex justify-between flex-row mb-10">
      <text>bind object style fontSize:</text>
      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
        {{ dataInfo.fontSize }}
      </text>
    </view>
    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
      <view>bind arr style</view>
      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
      <view>{{ dataInfo.border }}</view>
    </view>
    <view class="mb-10 p-10">
        <text id="bind-raw-object-style" :style="rawObjectStyle">rawObjectStyle</text>
    </view>
    <!-- 目前仅android平台在内部重新调用了normalizeStyle，其他端暂时没有，这应该是vue的bug -->
    <view class="mb-10 p-10">
        <text id="bind-raw-array-style" :style="rawArrayStyle">rawArrayStyle</text>
    </view>

    <!-- v-bind props -->
    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />

    <!-- v-bind props -->
    <Foo checked />
    <!-- #ifndef MP -->
    <!-- 绑定对象 -->
    <Foo id="bindObj1" v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" />
    <!-- 绑定对象合并-->
    <Foo id="bindObj2" v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" title="foo title override" />
    <!-- 绑定对象合并-->
    <Foo id="bindObj3" title="foo" v-bind="{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }" />
    <!-- 绑定对象合并（UTSJSONObject）-->
    <Foo id="bindObj4" v-bind="fooProps" title="foo title(json) override" />
    <!-- 绑定对象合并（UTSJSONObject）-->
    <Foo id="bindObj5" title="foo" v-bind="fooProps" />
    <!-- #endif -->
    <!-- v-bind in style -->
    <!-- #ifdef WEB -->
    <view class="mb-10 v-bind-css"></view>
    <!-- #endif -->
  </view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->  
</template>

<script setup lang="uts">
  import Foo from './Foo-composition.uvue'
  import { FooProps, FooPropsObj } from './type.uts'

  type DataInfo = {
    fontSize : string
    backgroundColor : string
    border : string
    fooProps : FooProps
    vBindClassBackgroundColor : string,
    vBindClassRpxHeight : string,
  }

  const dataInfo = reactive({
    fontSize: '20px',
    backgroundColor: 'background-color: green',
    border: 'border: 2px solid red',
    fooProps: {
      title: 'foo title',
      num: 1,
      obj: {
        name: 'foo obj name',
      } as FooPropsObj
    },
    vBindClassBackgroundColor: 'red',
    vBindClassRpxHeight: '300rpx'
  } as DataInfo)
  
  const fooProps = reactive({
      title: 'foo title(json)',
      num: 2,
  })
  
  const rawObjectStyle = {
      width: '100%',
      height: '30px',
      'background-color': 'red'
  }
  
  const rawArrayStyle = [
      {
        width: '100%',
        height: '30px'
      },
      {
        'background-color': 'red'
      }
  ]

  defineExpose({
    dataInfo
  })
</script>

<style>
  /* #ifdef WEB */
  .v-bind-css {
    background-color: v-bind(dataInfo.vBindClassBackgroundColor);
    height: v-bind(dataInfo.vBindClassRpxHeight);
  }
  /* #endif */
</style>

<template>
  <view class="page">
    <view class="mb-10 flex justify-between flex-row">
      <text>str:</text>
      <text id="str">{{ str }}</text>
    </view>
    <input class="mb-10 input" id="model-str" v-model="str" @input="onInput" />
    <input class="mb-10 input" id="model-num" v-model.number="num" type="text" />
    <input class="mb-10 input" id="model-str-trim" v-model.trim="strForTrim" />
    <input class="mb-10 input" id="model-str-lazy" v-model.lazy="str" type="text" />
    <view class="mb-10 flex justify-between flex-row">
      <text>typeof num:</text>
      <text id="typeof-num">{{ typeof num }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>str for trim length:</text>
      <text id="str-length">{{ strForTrim.length }}</text>
    </view>
    <Parent v-model="value"></Parent>
    <Parent v-model="utsObj['modelValue']"></Parent>
    <Parent v-model="typeObj.modelValue"></Parent>
    <Parent v-model="typeObj.modelValue as string"></Parent>
  </view>
</template>

<script lang="uts">
import Parent from './Parent.uvue'
import { VModelObj } from './types.uts'
export default {
  data(){
    return {
      str: 'str',
      num: 1,
      strForTrim: ' abc ',
      value: 'nested',
      utsObj: {
        modelValue: 'utsObj.value'
      },
      typeObj: {
        modelValue: 'typeObj.value'
      } as VModelObj
    }
  },
  components: {
      Parent
  },
  methods: {
    onInput(){
      // noop
    }
  }
}
</script>

<style>
.input {
  padding: 0px 10px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

<template>
  <view class="page">
    <Foo
      v-model="str"
      v-model:msg="msg"
      v-model:strArr="strArr"
      v-model:numArr="numArr"
      v-model:utsObjModelValue="utsObj['modelValue']"
      v-model:typeObjModelValue="typeObj.modelValue"
      @update:modelValue="handleModelValueUpdate"
      @update:msg="handleModelMsgUpdate"
       />
    <input class="mb-10 input" id="model-value-input" v-model="str" @input="onInput" />
    <input class="mb-10 input" id="model-msg-input" v-model="msg" />
    <input class="mb-10 input" id="model-uts-obj-value-input" v-model="utsObj['modelValue']" />
    <input class="mb-10 input" id="model-type-obj-value-input" v-model="typeObj.modelValue" />
    <view class="mb-10 flex justify-between flex-row">
      <text>handle modelValue update res:</text>
      <text id="handle-model-value-update-res">{{ handleModelValueUpdateRes }}</text>
    </view>
    <view class="mb-10 flex justify-between flex-row">
      <text>handle model msg update res:</text>
      <text id="handle-model-msg-update-res">{{ handleModelMsgUpdateRes }}</text>
    </view>
    <Parent v-model="value"></Parent>
    <view class="mb-10 flex justify-between flex-row">
      <text>arrayValue:</text>
      <text id="array-value">{{ arrayValue.region }}</text>
    </view>
    <ArrayModelChild v-model="arrayValue.region"></ArrayModelChild>
  </view>
</template>

<script setup lang="uts">
import Foo from './Foo-composition.uvue'
import Parent from './Parent.uvue'
import ArrayModelChild from './ArrayModelChild.uvue'
import { VModelObj } from './types.uts'

const str = ref('str')
const msg = ref('msg')
const strArr = ref<string[]>(['0'])
const numArr = ref<number[]>([0])
const value = ref("nested");
const arrayValue = reactive({
	region: [] as string[]
});
const handleModelValueUpdateRes = ref('')
const handleModelValueUpdate = (val : string) => {
  handleModelValueUpdateRes.value = val
}
const handleModelMsgUpdateRes = ref('')
const handleModelMsgUpdate = (val : string) => {
  handleModelMsgUpdateRes.value = val
}

const utsObj = reactive({ modelValue: 'utsObj.value' })
const typeObj = reactive({ modelValue: 'typeObj.value' } as VModelObj)

function onInput(){
  // noop
}
</script>

<style>
.input {
  padding: 0px 10px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

<template>
  <view class="page">
    <text class="bold mb-10">v-pre 跳过该元素及其所有子元素的编译</text>
    <text class="mb-10 v-pre-text" v-pre>{{ this will not be compiled }}</text>
  </view>
</template>

<template>
  <view class="page">
    <!-- #ifndef MP -->
    <view class="flex flex-row justify-between mb-10" v-once>
      <text>This msg will never change:</text>
      <text id='v-once-msg'>{{ msg }}</text>
    </view>
    <!-- #endif -->
    <view class="flex flex-row justify-between mb-10">
      <text>msg:</text>
      <text id="msg">{{ msg }}</text>
    </view>
    <button id="btn" class="mb-10" type="primary" @click="changeMessage">
      change message
    </button>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      msg: 'hello world'
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'msg changed'
    }
  }
}
</script>

<template>
  <view class="page">
    <!-- #ifndef MP -->
    <view class="flex flex-row justify-between mb-10" v-once>
      <text>This msg will never change:</text>
      <text id='v-once-msg'>{{ msg }}</text>
    </view>
    <!-- #endif -->
    <view class="flex flex-row justify-between mb-10">
      <text>msg:</text>
      <text id="msg">{{ msg }}</text>
    </view>
    <button id="btn" class="mb-10" type="primary" @click="changeMessage">
      change message
    </button>
  </view>
</template>

<script setup lang="uts">
  const msg = ref('hello world')
  const changeMessage = () => {
    msg.value = 'msg changed'
  }
</script>

<template>
  <view class="page">
    <Foo>
      <template #header="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>header slot msg:</text>
          <text id="slot-header">{{ msg }}</text>
        </view>
      </template>
      <template #default="{ num }">
        <view class="mb-10 flex justify-between flex-row">
          <text>default slot num:</text>
          <text id="slot-default">{{ num }}</text>
        </view>
      </template>
      <!-- #ifndef MP -->
      <template v-for="item in 2" #[`num${item}`]="{ num }">
        <view class="mb-10 flex justify-between flex-row">
          <text>num{{ item }} slot:</text>
          <text :id="`slot-num${item}`">{{ num }}</text>
        </view>
      </template>
      <template v-if="msgTrue['isShow']" #[msgTrue['name']]="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>{{ msgTrue['name'] }} slot msg:</text>
          <text id="slot-msg-true">{{ msg }}</text>
        </view>
      </template>
      <template v-if="msgFalse['isShow']" #[msgFalse['name']]="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>{{ msgFalse['name'] }} slot msg:</text>
          <text id="slot-msg-false">{{ msg }}</text>
        </view>
      </template>
      <!-- #endif -->
      <template #footer="{ arr }">
        <view class="mb-10 flex justify-between flex-row">
          <text>footer slot arr:</text>
          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
        </view>
      </template>
    </Foo>
  </view>
</template>

<script lang="uts">
import Foo from './Foo-options.uvue'
export default {
  components: {Foo},
  data(){
    return {
      msgTrue: {
        isShow: true,
        name: 'msgTrue'
      },
      msgFalse: {
        isShow: false,
        name: 'msgFalse'
      }
    }
  }
}
</script>

<template>
  <view class="page">
    <Foo>
      <template #header="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>header slot msg:</text>
          <text id="slot-header">{{ msg }}</text>
        </view>
      </template>
      <template #default="{ num }">
        <view class="mb-10 flex justify-between flex-row">
          <text>default slot num:</text>
          <text id="slot-default">{{ num }}</text>
        </view>
      </template>
      <!-- #ifndef MP -->
      <template v-for="item in 2" #[`num${item}`]="{ num }">
        <view class="mb-10 flex justify-between flex-row">
          <text>num{{ item }} slot:</text>
          <text :id="`slot-num${item}`">{{ num }}</text>
        </view>
      </template>
      <template v-if="msgTrue['isShow']" #[msgTrue['name']]="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>{{ msgTrue['name'] }} slot msg:</text>
          <text id="slot-msg-true">{{ msg }}</text>
        </view>
      </template>
      <template v-if="msgFalse['isShow']" #[msgFalse['name']]="{ msg }">
        <view class="mb-10 flex justify-between flex-row">
          <text>{{ msgFalse['name'] }} slot msg:</text>
          <text id="slot-msg-false">{{ msg }}</text>
        </view>
      </template>
      <!-- #endif -->
      <template #footer="{ arr }">
        <view class="mb-10 flex justify-between flex-row">
          <text>footer slot arr:</text>
          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
        </view>
      </template>
    </Foo>
  </view>
</template>

<script setup lang="uts">
  import Foo from './Foo-composition.uvue'

  const msgTrue = ref({
    isShow: true,
    name: 'msgTrue'
  })
  const msgFalse = ref({
    isShow: false,
    name: 'msgFalse'
  })
</script>

<template>
  <view class="page">
    <view class="flex flex-row justify-between mb-10" v-memo="[]">
      <text>msg will never change:</text>
      <text id="v-memo-never-change-msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>msg:</text>
      <text id="msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10" v-memo="[num]">
      <text>msg will change when num chang:</text>
      <text id="v-memo-num-change-msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>num:</text>
      <text id="num">{{ num }}</text>
    </view>
    <button
      id="change-message-btn"
      class="mb-10"
      type="primary"
      @click="changeMessage">
      change message
    </button>
    <button
      id="increment-num-btn"
      class="mb-10"
      type="primary"
      @click="incrementNum">
      increment num
    </button>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      msg: 'hello world',
      num: 0
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'msg changed'
    },
    incrementNum(){
      this.num++
    }
  }
}
</script>

<template>
  <view class="page">
    <view class="flex flex-row justify-between mb-10" v-memo="[]">
      <text>msg will never change:</text>
      <text id="v-memo-never-change-msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>msg:</text>
      <text id="msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10" v-memo="[num]">
      <text>msg will change when num chang:</text>
      <text id="v-memo-num-change-msg">{{ msg }}</text>
    </view>
    <view class="flex flex-row justify-between mb-10">
      <text>num:</text>
      <text id="num">{{ num }}</text>
    </view>
    <button
      id="change-message-btn"
      class="mb-10"
      type="primary"
      @click="changeMessage">
      change message
    </button>
    <button
      id="increment-num-btn"
      class="mb-10"
      type="primary"
      @click="incrementNum">
      increment num
    </button>
  </view>
</template>

<script setup lang="uts">
const msg = ref('hello world')

const num = ref(0)

const changeMessage = () => {
  msg.value = 'msg changed'
}

const incrementNum = () =>{
  num.value++
}
</script>

<template>
  <view>
    <template v-if="isShow">
      <text>abc</text>
      <button>按钮</button>
    </template>
		<view></view>
  </view>
</template>

<script lang="uts">
  import Foo from '@/components/Foo.uvue'

  export default {
    components: { Foo },
    mounted() {
      // #ifdef APP
      (this.$refs['input'] as UniInputElement).setAttribute('value', 'input value');
      // #endif
      // #ifdef WEB
      (this.$refs['input'] as UniInputElement).value = 'input value';
      // #endif
      // 当在 v-for 中使用模板引用时，this.$refs 中对应的值是一个数组
      (this.$refs['textItems'] as UniTextElement[]).forEach((item : UniTextElement) => {
        item.style.setProperty('color', 'red')
      });
      // 调用自定义组件方法
      (this.$refs['foo'] as ComponentPublicInstance).$callMethod('updateTitle');
      // 获取自定义组件响应式数据
      console.log((this.$refs['foo'] as ComponentPublicInstance).$data['title']); // new title
    }
  }
</script>

<template>
  <view>
    <input ref="input" />
    <text v-for="item in 3" ref="textItems" :key="item">{{
      item
    }}</text>
    <Foo ref="foo" />
  </view>
</template>

<script setup lang="uts">
  import Foo from '@/components/Foo.uvue'

  // 声明一个 ref 来存放该元素的引用, 必须和模板里的 ref 同名
  const input = ref<UniInputElement | null>(null)
  // 当在 v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组
  const textItems = ref<UniTextElement[] | null>(null)
  // 声明一个 ref 来存放自定义组件的引用, 必须和模板里的 ref 同名
  const foo = ref<ComponentPublicInstance | null>(null)

  onMounted(() => {
    // #ifdef APP
    input.value!.setAttribute('value', 'input value')
    // #endif
    // #ifdef WEB
    input.value!.value = 'input value'
    // #endif
    textItems.value!.forEach((item: UniTextElement) => {
      item.style.setProperty('color', 'red')
    })
    // 调用自定义组件方法
    foo.value!.$callMethod('updateTitle')
    // 获取自定义组件响应式数据
    console.log(foo.value!.$data['title']) // new title
  })
</script>

<template>
  <view>
    <input ref="input" />
    <text v-for="item in 3" ref="textItems" :key="item">{{
      item
    }}</text>
    <Foo ref="foo" />
  </view>
</template>

<!-- components/Foo.uvue -->
<template>
  <view>
    <text>title: {{title}}</text>
  </view>
</template>

<script>
  export default {
    name:"Foo",
    data() {
      return {
        title: 'default title'
      }
    },
    methods: {
      updateTitle(){
        this.title = 'new title'
      }
    }
  }
</script>