<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="text-box">
        <text class="text">{{ text }}</text>
      </view>
      <view class="uni-btn-v">
        <button class="uni-btn" type="primary" :disabled="!canAdd" @click="add">
          add line
        </button>
        <button class="uni-btn" type="warn" :disabled="!canRemove" @click="remove">
          remove line
        </button>
        <button class="uni-btn" type="primary" @click="textProps">
          更多属性示例
        </button>
        <!-- #ifdef APP-ANDROID -->
        <button class="uni-btn" type="primary" @click="textLayout">
          文本测量
        </button>
        <!-- #endif -->
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  const title = ref('text')
  const texts = ref([
    'HBuilderX，轻巧、极速，极客编辑器',
    'uni-app x，终极跨平台方案',
    'uniCloud，js serverless云服务',
    'uts，大一统语言',
    'uniMPSdk，让你的App具备小程序能力',
    'uni-admin，开源、现成的全端管理后台',
    'uni-id，开源、全端的账户中心',
    'uni-pay，开源、云端一体、全平台的支付',
    'uni-ai，聚合ai能力',
    'uni-cms，开源、云端一体、全平台的内容管理平台',
    'uni-im，开源、云端一体、全平台的im即时消息',
    'uni统计，开源、完善、全平台的统计报表',
    '......'
  ] as string[])
  const text = ref('')
  const canAdd = ref(true)
  const canRemove = ref(false)
  const extraLine = ref([] as string[])
  
  const add = () => {
    extraLine.value.push(texts.value[extraLine.value.length % 12])
    text.value = extraLine.value.join('\n')
    canAdd.value = extraLine.value.length < 12
    canRemove.value = extraLine.value.length > 0
  }
  
  const remove = () => {
    if (extraLine.value.length > 0) {
      extraLine.value.pop()
      text.value = extraLine.value.join('\n')
      canAdd.value = extraLine.value.length < 12
      canRemove.value = extraLine.value.length > 0
    }
  }
  
  const textProps = () => {
    uni.navigateTo({
      url: '/pages/component/text/text-props'
    })
  }
  
  const textLayout = () => {
    uni.navigateTo({
      url: '/pages/component/text/text-layout'
    })
  }
</script>

<style>
  .text-box {
    margin-bottom: 20px;
    padding: 20px 0;
    display: flex;
    min-height: 150px;
    background-color: #ffffff;
    justify-content: center;
    align-items: center;
  }

  .text {
    font-size: 15px;
    color: #353535;
    line-height: 27px;
    text-align: center;
  }
</style>