Waterfall #

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import type {
  QTIWaterfall,
  QTPoster,
  QTWaterfall,
  QTWaterfallItem,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '基础用法',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      //1.初始化瀑布流
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //2.构造section数据
      const sectionList: Array<QTWaterfallSection> = []
      for (let i = 0; i < 2; i++) {
        const section: QTWaterfallSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
          title: `板块:${i}`,
          titleStyle: {
            width: 1920,
            height: 60,
            marginLeft: 90,
            marginTop: 40,
            marginBottom: 40,
            fontSize: 80,
          },
          //3.构造section中item列表数据
          itemList: buildPosterItemList(`${i}`),
          style: {
            width: 1920,
            height: -1,
          },
        }
        sectionList.push(section)
      }

      //4.给瀑布流设置板块列表数据
      waterfall.value?.setSectionList(sectionList)
    }

    function buildPosterItemList(sectionId: string): Array<QTWaterfallItem> {
      const data: Array<QTWaterfallItem> = []
      const imgURL =
        'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
      for (let i = 0; i < 15; i++) {
        const poster: QTPoster = {
          _id: `${sectionId}_${i}`,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          type: 10001,
          decoration: {
            left: 90,
            bottom: 90,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          shimmer: {
            enable: true,
          },
          ripple: {
            enable: true,
            style: {
              right: 0,
              bottom: 0,
              marginRight: -12,
            },
          },
          image: {
            src: imgURL,
            enable: true,
            style: {
              width: 260,
              height: 320,
            },
          },
          corner: {
            text: '角标',
            enable: true,
            style: {
              width: 260,
              height: 30,
            },
            background: {
              colors: ['#FE3824', '#F0051E'],
              cornerRadii4: [0, 8, 0, 8],
              orientation: 2,
            },
          },
          style: {
            width: 260,
            height: 400,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      return data
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 850px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall
      ref="waterfall"
      class="qt-waterfall-css"
      @onScroll="onScroll"
      @onItemClick="onItemClick"
      @onItemFocused="onItemFocused"
      @onItemBind="onItemBind"
      @onScrollStateChanged="onScrollStateChanged"
      @onItemAttached="onItemAttached"
    >
      <template #item>
        <text-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { useESLog } from '@extscreen/es3-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import textItem from './item/text-item.vue'
import type {
  QTIWaterfall,
  QTScrollState,
  QTWaterfall,
  QTWaterfallItem,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'QTWaterfallEvent'

export default defineComponent({
  name: '事件',
  components: {
    'text-item': textItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()
    const log = useESLog()

    function onScroll(offsetX: number, scrollY: number) {
      log.d(TAG, ` offsetX:${offsetX} scrollY:${scrollY}`)
    }

    function onItemClick(
      sectionIndex: number,
      position: number,
      item: QTWaterfallItem
    ) {
      log.d(
        TAG,
        ` sectionIndex:${sectionIndex} position:${position} item:`,
        item
      )
    }

    function onItemFocused(
      sectionIndex: number,
      position: number,
      isFocused: boolean,
      item: QTWaterfallItem
    ) {
      log.d(
        TAG,
        ` sectionIndex:${sectionIndex} position:${position} isFocused:${isFocused} item:`,
        item
      )
    }

    function onItemBind(position: number) {
      log.d(TAG, ` position:${position}`)
    }

    function onItemAttached(position: number) {
      log.d(TAG, ` position:${position}`)
    }

    function onScrollStateChanged(
      offsetX: number,
      scrollY: number,
      newState: QTScrollState
    ) {
      log.d(TAG, ` offsetX:${offsetX} scrollY:${scrollY} newState:${newState}`)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallSection> = []
      for (let i = 0; i < 2; i++) {
        const itemList: Array<QTWaterfallItem> = []
        for (let k = 0; k < 2; k++) {
          const item: QTWaterfallItem = {
            _id: `${i}_${k}`,
            type: 1,
            style: {
              width: 500,
              height: 200,
            },
          }
          itemList.push(item)
        }

        const section: QTWaterfallSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
          title: '板块',
          itemList,

          style: {
            width: 1920,
            height: 200,
          },
        }
        sectionList.push(section)
      }
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onScroll,
      onItemClick,
      onItemFocused,
      onItemBind,
      onItemAttached,
      onScrollStateChanged,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildPosterItemList } from '../__mocks__/poster'
import type { QTIWaterfall, QTWaterfallSection } from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'ListSection',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      waterfall.value?.init({
        width: 1920,
        height: 1080,
      })

      const section: QTWaterfallSection = {
        itemList: buildPosterItemList('1'),
        style: {
          width: 1920,
          height: 500,
          spacing: 20,
        },
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
      }
      waterfall.value?.setSectionList([section])
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildLinePosterItemList } from '../__mocks__/poster'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'EndSection',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //1.创建一个结束板块
      const sectionList: Array<QTWaterfallSection> = []
      const endSection: QTWaterfallSection = {
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_END,
        title: '已经到底啦，按【返回键】回到顶部',
        titleStyle: {
          width: 1920,
          height: 200,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        itemList: [],
        style: {
          width: 1920,
          height: 200,
        },
      }
      sectionList.push(endSection)

      //2.创建一个结束板块
      const section: QTWaterfallSection = {
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
        title: '底部板块',
        titleStyle: {
          width: 1920,
          height: 60,
          marginTop: 30,
          marginBottom: 30,
          marginLeft: 30,
        },
        itemList: buildLinePosterItemList(),
        style: {
          width: 1920,
          height: -1,
        },
      }
      sectionList.push(section)
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'BlankSection',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      const sectionList: Array<QTWaterfallSection> = []
      const sectionBlank: QTWaterfallSection = {
        _id: '2',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_BLANK,
        itemList: [],
        style: {
          width: 1920,
          height: 200,
        },
      }
      sectionList.push(sectionBlank)
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall
      ref="waterfall"
      class="qt-waterfall-css"
      @onItemClick="onItemClick"
      @onItemFocused="onItemFocused"
    />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { ESLogLevel, useESLog } from '@extscreen/es3-core'
import {
  QTWaterfallItemType,
  QTWaterfallSectionType,
} from '@quicktvui/quicktvui3'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallItem,
  QTWaterfallSection,
  QTWaterfallTabItem,
} from '@quicktvui/quicktvui3'

const TAG = 'TabSectionPage'

export default defineComponent({
  name: 'TabSection',
  setup() {
    const log = useESLog()
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      const tabItemList = []

      for (let i = 0; i < 15; i++) {
        const tabItem: QTWaterfallTabItem = {
          _id: `${i}`,
          style: {
            width: 200,
            height: 50,
            paddingLeft: 40,
            paddingRight: 40,
          },
          type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
          text: `Tab:${i}`,
        }
        tabItemList.push(tabItem)
      }

      const tabSection: QTWaterfallSection = {
        _id: '1',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
        title: 'Tab板块',
        titleStyle: {
          width: 1920,
          height: 60,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        style: {
          width: 1920,
          height: -1,
        },
        itemList: tabItemList,
      }

      const sectionList: Array<QTWaterfallSection> = [tabSection]

      waterfall.value?.setSectionList(sectionList)
    }

    //-----------------------------------------------------
    function onItemClick(
      sectionIndex: number,
      position: number,
      item: QTWaterfallItem
    ) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(
          TAG,
          item,
          `sectionIndex:${sectionIndex}  ` + `position:${position}  ` + `item:`,
          item
        )
      }
      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
        if (log.isLoggable(ESLogLevel.DEBUG)) {
          log.d(
            TAG,
            `  sectionIndex:${sectionIndex}  position:${position}  item:`,
            item
          )
        }
      }
    }

    function onItemFocused(
      sectionIndex: number,
      position: number,
      isFocused: boolean,
      item: QTWaterfallItem
    ) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(
          TAG,
          item,
          `sectionIndex:${sectionIndex}  ` +
            `position:${position}  ` +
            `isFocused:${isFocused}  `
        )
      }

      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
        if (isFocused) {
          //do sth
        }
      }
    }

    return {
      waterfall,
      onESCreate,
      onItemFocused,
      onItemClick,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall
      ref="waterfall"
      class="qt-waterfall-css"
      @onItemFocused="onItemFocused"
    />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { ESLogLevel, useESLog } from '@extscreen/es3-core'
import {
  QTWaterfallItemType,
  QTWaterfallSectionType,
} from '@quicktvui/quicktvui3'
import {
  buildPosterItemList,
  buildPosterTitleItemList,
} from '../__mocks__/poster'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallItem,
  QTWaterfallSection,
  QTWaterfallTabItem,
} from '@quicktvui/quicktvui3'

const TAG = 'TabListSectionPage'

export default defineComponent({
  name: 'TabListSection',
  setup() {
    const log = useESLog()
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      const tabItemList = []

      for (let i = 0; i < 15; i++) {
        const tabItem: QTWaterfallTabItem = {
          _id: `1_${i}`,
          style: {
            width: 100,
            height: 50,
          },
          decoration: {
            left: 90,
          },
          type: QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB,
          text: `Tab:${i}`,
        }
        tabItemList.push(tabItem)
      }

      const tabSection: QTWaterfallSection = {
        _id: '1',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_TAB,
        title: 'Tab板块',
        titleStyle: {
          width: 1920,
          height: 60,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        style: {
          width: 1920,
          height: -1,
        },
        itemList: tabItemList,
      }
      const listSection: QTWaterfallSection = {
        _id: '2',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_LIST,
        titleStyle: {
          width: 0,
          height: 0,
          fontSize: 50,
        },
        style: {
          width: 1920,
          height: 400,
        },
        itemList: buildPosterItemList('2'),
      }

      const sectionList: Array<QTWaterfallSection> = [tabSection, listSection]
      waterfall.value?.setSectionList(sectionList)
    }

    //-----------------------------------------------------
    function onItemFocused(
      sectionIndex: number,
      position: number,
      isFocused: boolean,
      item: QTWaterfallItem
    ) {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(
          TAG,
          item,
          `sectionIndex:${sectionIndex}  ` +
            `position:${position}  ` +
            `isFocused:${isFocused}  `
        )
      }

      if (item.type === QTWaterfallItemType.QT_WATERFALL_ITEM_TYPE_TAB) {
        if (isFocused) {
          const section = waterfall.value?.getSection(1)
          if (section) {
            section.itemList = buildPosterTitleItemList(`Tab:${position}`)
            waterfall.value?.updateSection(1, section)
          }
        }
      }
    }

    return {
      waterfall,
      onESCreate,
      onItemFocused,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css">
      <template #vue-section>
        <time-section />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'

import timeSection from './section/time-section.vue'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'VueSection',
  components: {
    'time-section': timeSection,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallSection> = []
      const section: QTWaterfallSection = {
        _id: '1',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_VUE,
        title: 'VueSection',
        titleStyle: {
          width: 1920,
          height: 200,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        itemList: [],
        style: {
          width: 1920,
          height: 400,
        },
      }
      sectionList.push(section)
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="time-section-css">
    <span class="time-section-text-css">18</span>
    <span v-show="show" class="time-section-text-css">:</span>
    <span class="time-section-text-css">24</span>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'

export default defineComponent({
  name: 'TimeSection',
  setup() {
    const show = ref<boolean>(true)

    setInterval(() => {
      show.value = !show.value
    }, 1000)

    return {
      show,
    }
  },
})
</script>

<style scoped>
.time-section-css {
  width: 1920px;
  height: 200px;
  background-color: red;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.time-section-text-css {
  color: white;
  font-size: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-align-vertical: center;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallCardSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'CardSection',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallCardSection> = []
      for (let i = 0; i < 2; i++) {
        const section: QTWaterfallCardSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_CARD,
          title: 'Card板块',
          titleStyle: {
            width: 1920,
            height: 60,
            marginLeft: 90,
            marginTop: 40,
            marginBottom: 40,
            fontSize: 50,
          },
          itemList: [],
          cardId: '1717748409857474561',
          cardStyle: {
            width: 1920,
            height: 400,
          },
          style: {
            width: 1920,
            height: 540,
          },
          decoration: {
            top: 40,
            bottom: 40,
          },
        }
        sectionList.push(section)
      }
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 850px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallCardSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'CardSectionPlaceholder',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallCardSection> = []
      for (let i = 0; i < 2; i++) {
        const section: QTWaterfallCardSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_CARD,
          title: 'Card板块',
          titleStyle: {
            width: 1920,
            height: 60,
            marginLeft: 90,
            marginTop: 40,
            marginBottom: 40,
            fontSize: 50,
          },
          itemList: [],
          cardId: '1717748409857474561',
          cardPlaceHolder: {
            enable: true, //是否可用
            radius: 100, //圆角
            rect: [100, 0, 100, 0],
            focusable: true,
            focusScale: 1.2,
          },
          cardStyle: {
            width: 1920,
            height: 400,
          },
          style: {
            width: 1920,
            height: 540,
          },
          decoration: {
            top: 40,
            bottom: 40,
          },
        }
        sectionList.push(section)
      }
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 850px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <s-text-button text="添加板块" @onButtonClicked="onAddButtonClicked" />
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { generatorAppWaterfallSection } from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '添加Section',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onAddButtonClicked() {
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onAddButtonClicked,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button text="查询板块" @onButtonClicked="onGetButtonClicked" />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { useESLog } from '@extscreen/es3-core'
import { generatorAppWaterfallSection } from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '查询Section',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()
    const log = useESLog()

    function onGetButtonClicked() {
      const section = waterfall.value?.getSection(0)
      log.d(TAG, 'section:', section)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onGetButtonClicked,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button text="添加板块" @onButtonClicked="onAddButtonClicked" />
      <s-text-button text="删除板块" @onButtonClicked="onDeleteButtonClicked" />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { generatorAppWaterfallSection } from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '删除Section',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onAddButtonClicked() {
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    function onDeleteButtonClicked() {
      waterfall.value?.deleteSection(0, 1)
    }

    //-------------------------------------------------------------
    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      //
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onAddButtonClicked,
      onDeleteButtonClicked,
    }
  },
})
</script>

<style>
.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button
        text="更新单个板块"
        @onButtonClicked="onUpdateButtonClicked"
      />
      <s-text-button
        text="更新高度变化板块"
        @onButtonClicked="onUpdateHeightButtonClicked"
      />
      <s-text-button
        text="更新多个板块"
        @onButtonClicked="onUpdateMultiButtonClicked"
      />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import {
  generatorAppChildrenWaterfallItemList,
  generatorAppQuestionWaterfallItemList,
  generatorAppWaterfallSection,
} from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '更新Section',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onUpdateButtonClicked() {
      const section = waterfall.value?.getSection(0)
      if (section) {
        section.title = `新：${section.title}`
        section.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 5)
        waterfall.value?.updateSection(0, section)
      }
    }

    function onUpdateHeightButtonClicked() {
      const section = waterfall.value?.getSection(0)
      if (section) {
        section.title = `新：${section.title}`
        section.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 9)
        waterfall.value?.updateSection(0, section)
      }
    }

    function onUpdateMultiButtonClicked() {
      const sectionList: Array<QTWaterfallSection> = []
      const sectionZero = waterfall.value?.getSection(0)
      if (sectionZero) {
        sectionZero.title = `新：${sectionZero.title}`
        sectionZero.itemList = generatorAppChildrenWaterfallItemList(`${0}`, 5)
        sectionList.push(sectionZero)
      }
      const sectionOne = waterfall.value?.getSection(1)
      if (sectionOne) {
        sectionOne.title = `新：${sectionOne.title}`
        sectionOne.itemList = generatorAppQuestionWaterfallItemList(`${1}`, 6)
        sectionList.push(sectionOne)
      }
      if (sectionList) {
        waterfall.value?.updateSectionList(0, 2, sectionList)
      }
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      //
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
        generatorAppWaterfallSection('1', `应用：${Date.now()}`),
        generatorAppWaterfallSection('2', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onUpdateButtonClicked,
      onUpdateMultiButtonClicked,
      onUpdateHeightButtonClicked,
    }
  },
})
</script>

<style>
.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css">
      <template #section>
        <text-section :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import textSection from './section/text-section'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '自定义ection',
  components: {
    'text-section': textSection,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      const section: QTWaterfallSection = {
        _id: '1',
        type: 1,
        itemList: [],
        style: {
          width: 1920,
          height: 320,
        },
      }
      const sectionList: Array<QTWaterfallSection> = [section]
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildPosterDecorationItemList } from '../__mocks__/poster'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'SectionDecoration',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallSection> = []
      for (let i = 0; i < 2; i++) {
        const section: QTWaterfallSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
          itemList: buildPosterDecorationItemList(),
          title: 'Section',
          titleStyle: {
            width: 1920,
            height: 60,
            marginLeft: 90,
            marginTop: 40,
            marginBottom: 40,
            fontSize: 50,
          },
          style: {
            width: 1920,
            height: -1,
          },
          //
          decoration: {
            top: 10,
            bottom: 300,
          },
        }
        sectionList.push(section)
      }
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.es-sdk-root-css {
  width: 1920px;
  height: 1080px;
  background-color: #26292f;
}

.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { ESGradientShape, ESGradientType } from '@extscreen/es3-component'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildLinePosterItemList } from '../__mocks__/poster'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'SectionBackground',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      const sectionList: Array<QTWaterfallSection> = []
      const endSection: QTWaterfallSection = {
        _id: '100',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_END,
        title: '已经到底啦，按【返回键】回到顶部',
        titleStyle: {
          width: 1920,
          height: 200,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        itemList: [],
        style: {
          width: 1920,
          height: 200,
          gradientBackground: {
            type: ESGradientType.ES_GRADIENT_TYPE_LINEAR_GRADIENT,
            shape: ESGradientShape.ES_GRADIENT_SHAPE_RECTANGLE,
            colors: ['#40b883', '#4068b8'],
            cornerRadii4: [0, 5, 20, 0],
          },
        },
      }
      sectionList.push(endSection)

      for (let i = 0; i < 1; i++) {
        const section: QTWaterfallSection = {
          _id: `${i}`,
          type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
          title: '板块',
          titleStyle: {
            width: 1920,
            height: 60,
            marginTop: 30,
            marginBottom: 30,
            marginLeft: 30,
            fontSize: 50,
          },
          itemList: buildLinePosterItemList(),
          style: {
            width: 1920,
            height: -1,
          },
        }
        sectionList.push(section)
      }
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.qt-waterfall-css {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildCardItemList } from '../__mocks__/card'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'CardItem',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      const sectionList: Array<QTWaterfallSection> = []
      const section: QTWaterfallSection = {
        _id: '1',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
        title: 'CardItem板块:',
        titleStyle: {
          width: 1920,
          height: 60,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        itemList: buildCardItemList(),
        style: {
          width: 1920,
          height: -1,
        },
      }
      sectionList.push(section)
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.qt-waterfall-css {
  width: 1920px;
  height: 850px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <qt-waterfall ref="waterfall" class="qt-waterfall-css" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { QTWaterfallSectionType } from '@quicktvui/quicktvui3'
import { buildCardItemPlaceHolderList } from '../__mocks__/card'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: 'CardItemPlaceHolder',
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)

      //
      const sectionList: Array<QTWaterfallSection> = []
      const section: QTWaterfallSection = {
        _id: '1',
        type: QTWaterfallSectionType.QT_WATERFALL_SECTION_TYPE_FLEX,
        title: 'CardItem板块:',
        titleStyle: {
          width: 1920,
          height: 60,
          marginLeft: 90,
          marginTop: 40,
          marginBottom: 40,
          fontSize: 50,
        },
        itemList: buildCardItemPlaceHolderList(),
        style: {
          width: 1920,
          height: -1,
        },
      }
      sectionList.push(section)
      waterfall.value?.setSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
    }
  },
})
</script>

<style>
.qt-waterfall-css {
  width: 1920px;
  height: 850px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button text="添加Item" @onButtonClicked="onAddButtonClicked" />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import {
  generatorAppChildrenWaterfallItemList,
  generatorAppQuestionWaterfallItemList,
  generatorAppWaterfallItemList,
  generatorWaterfallSection,
} from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '添加Item',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    //
    function onAddButtonClicked() {
      const itemList = generatorAppWaterfallItemList('0', 1)
      waterfall.value?.addItemList(0, itemList)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      //
      const sectionList: Array<QTWaterfallSection> = [
        generatorWaterfallSection(
          '0',
          `应用：${Date.now()}`,
          generatorAppQuestionWaterfallItemList('1', 5)
        ),
        generatorWaterfallSection(
          '2',
          `应用：${Date.now()}`,
          generatorAppChildrenWaterfallItemList('3', 5)
        ),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onAddButtonClicked,
    }
  },
})
</script>

<style>
.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button text="查询Item" @onButtonClicked="onGetButtonClicked" />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { useESLog } from '@extscreen/es3-core'
import { generatorAppWaterfallSection } from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '查询Item',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()
    const log = useESLog()

    function onGetButtonClicked() {
      const item = waterfall.value?.getItem(0, 2)
      log.d(TAG, '-------获取item信息-------->>>>', item)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      const sectionList: Array<QTWaterfallSection> = [
        generatorAppWaterfallSection('0', `应用：${Date.now()}`),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onGetButtonClicked,
    }
  },
})
</script>

<style>
.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <s-text-button
        text="删除第一个板块Item"
        @onButtonClicked="onDeleteButtonClicked"
      />
      <s-text-button
        text="删除第二个板块Item"
        @onButtonClicked="onDeleteButton2Clicked"
      />
    </div>
    <qt-waterfall ref="waterfall" class="qt-waterfall-op-css">
      <template #item>
        <app-list-item :type="1" />
      </template>
    </qt-waterfall>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import {
  generatorAppChildrenWaterfallItemList,
  generatorAppQuestionWaterfallItemList,
  generatorWaterfallSection,
} from '../__mocks__/app'
import appListItem from './item/app-list-item'
import type {
  QTIWaterfall,
  QTWaterfall,
  QTWaterfallSection,
} from '@quicktvui/quicktvui3'

const TAG = 'WaterfallTAG'

export default defineComponent({
  name: '删除Item',
  components: {
    'app-list-item': appListItem,
  },
  setup() {
    const waterfall = ref<QTIWaterfall>()

    function onDeleteButtonClicked() {
      waterfall.value?.deleteItem(0, 0, 1)
    }

    function onDeleteButton2Clicked() {
      waterfall.value?.deleteItem(1, 0, 2)
    }

    function onESCreate() {
      const waterfallData: QTWaterfall = {
        width: 1920,
        height: 1080,
      }
      waterfall.value?.init(waterfallData)
      const sectionList: Array<QTWaterfallSection> = [
        generatorWaterfallSection(
          '0',
          `应用：${Date.now()}`,
          generatorAppQuestionWaterfallItemList('1', 7)
        ),
        generatorWaterfallSection(
          '2',
          `应用：${Date.now()}`,
          generatorAppChildrenWaterfallItemList('3', 7)
        ),
      ]
      waterfall.value?.addSectionList(sectionList)
    }

    return {
      waterfall,
      onESCreate,
      onDeleteButton2Clicked,
      onDeleteButtonClicked,
    }
  },
})
</script>

<style>
.qt-waterfall-op-css {
  width: 1920px;
  height: 800px;
}
</style>