<template>
  <view class="p-10">
    <button id="init-btn" class="uni-btn" @click="init">init</button>
    <button id="clear-btn" class="uni-btn" @click="clear">clear</button>
    <view
      class="uni-common-mt list-view-container"
      :class="{ ' p-10': list.length > 0 }"
    >
      <list-view>
        <template v-for="(item, index) in list">
          <list-item
						id="toggle-children-show-btn"
            :class="{ 'uni-common-mt': index > 0 }"
            @click="toggleChildrenShow(item.id)"
          >
            <text>toggle children isShow</text>
          </list-item>
          <template v-if="expandIds.includes(item.id)">
            <template v-for="child in item.children">
              <list-item id="list-item-child" class="mt-5">
                <text>{{ child.id }}</text>
              </list-item>
            </template>
          </template>
        </template>
      </list-view>
    </view>
  </view>
</template>

<script>
type Child = {
	id: string
}
type List = {
	id: string
	children: Child[]
}

export default {
	data(){
		return {
			list: [] as List[],
			expandIds: [] as string[],
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init(){
			this.list = [
				{id:'1', children: [{ id: '1-1'},{ id: '1-2'},{ id: '1-3'}]},
				{id:'2', children: [{ id: '2-1'},{ id: '2-2'},{ id: '2-3'}]},
				{id:'3', children: [{ id: '3-1'},{ id: '3-2'},{ id: '3-3'}]},
			] as List[]

			this.expandIds = [this.list[0].id]
		},
		clear(){
			this.list = [] as List[]
			this.expandIds = [] as string[]
		},
		toggleChildrenShow(id: string){
			const index = this.expandIds.findIndex((item) => item == id)
			if(index == -1) {
				this.expandIds.push(id)
			} else {
				this.expandIds.splice(index, 1)
			}
		},
	}
}
</script>

<style>
.p-10 {
  padding: 10px;
}
.list-view-container {
  background-color: #fff;
}
.mt-5 {
  margin-top: 5px;
}
</style>