<template>
  <view style="flex-grow: 1;">
    <scroll-view style="padding: 10px 0px; background-color: gray;justify-content: center;" direction="horizontal">
      <text class="text" :style="textStyle">{{multiLineText}}</text>
    </scroll-view>
    <scroll-view style="flex: 1">
      <view class="content">
        <enum-data :items="white_space" title="white-space" @change="radio_change"></enum-data>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import { ItemType } from '@/components/enum-data/enum-data-types'
  export default {
    data() {
      return {
        textStyle: "white-space: normal;",
        white_space: [
          { "value": 0, "name": "normal" },
          { "value": 1, "name": "nowrap" },
          { "value": 2, "name": "pre" },
          { "value": 3, "name": "pre-wrap" },
          { "value": 4, "name": "pre-line" },
          { "value": 5, "name": "break-spaces" }] as ItemType[],
        multiLineText: `HBuilderX，
	轻巧、
		极速，
			极客编辑器；
				uni-app x，
					终极跨平台方案；
				uts，
			大一统语言

HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言`
      }
    },
    methods: {
      radio_change(checked : number) {
        this.textStyle = `white-space: ${this.white_space[checked].name};`
      }
    },
  }
</script>

<style>
  .text {
    font-size: 20px;
    /* 需要设置 align-self text组件才会自适应宽度 */
    align-self: flex-start;
  }
</style>