<template>
  <view class="tree">
    <view class="tree-content" v-for="(item, index) in treeListData" :key="index">
      <view class="title">
        <uv-icon
          :name="item.show ? 'arrow-down-fill' : 'play-right-fill'"
          color="#c0c4cc"
          size="14"
          class="icon"
          @click="changeShow(index)"
        ></uv-icon>
        <view class="checkbox">
          <checkbox-group @change="fChange(index)">
            <label>
              <checkbox
                activeColor="#6eb657"
                activeBackgroundColor="#6eb657"
                :checked="item.checked"
                :disabled="item.disabled"
                style="transform: scale(0.7)"
              />
              {{ item.taskTypeName }}
            </label>
          </checkbox-group>
        </view>
      </view>
      <view class="children" v-show="item.show">
        <checkbox-group
          v-for="(iten, indey) in item.children"
          :key="iten.taskTypeId"
          @change="cChange(index, indey)"
        >
          <label>
            <checkbox
              activeColor="#6eb657"
              activeBackgroundColor="#6eb657"
              :disabled="iten.disabled"
              :checked="iten.checked"
              style="transform: scale(0.7)"
            />
            {{ iten.taskTypeName }}
          </label>
        </checkbox-group>
      </view>
    </view>
    <view class="border"></view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { treeList } from './treeList'

const treeListData = ref(treeList)
const changeShow = (index: number) => {
  treeListData.value[index].show = !treeListData.value[index].show
}

const fChange = (index: number) => {
  treeListData.value[index].checked = !treeListData.value[index].checked
  treeListData.value[index].children.forEach(
    (item: any) => (item.checked = treeListData.value[index].checked)
  )
}
const cChange = (index: number, indey: number) => {
  treeListData.value[index].children[indey].checked =
    !treeListData.value[index].children[indey].checked
  const arr = treeListData.value[index].children.filter((item: any) => item.checked)
  treeListData.value[index].checked = arr.length
}

const mapData = () => {
  const arr = treeListData.value.filter((item) => item.checked)
  arr.forEach((item) => {
    item.children = item.children.filter((item: any) => item.checked)
  })
  return arr
}

const initData = (arr: string[]) => {
  const treeListCopy = JSON.parse(JSON.stringify(treeList))
  // treeListCopy.forEach((item: any) => {
  //   item.disabled = true
  //   item.checked = arr.includes(item.taskTypeId)
  //   item.children.forEach((iten: any) => {
  //     iten.disabled = true
  //     iten.checked = arr.includes(item.taskTypeId)
  //   })
  // })
  treeListData.value = treeListCopy
}

const editData = (arr: string[]) => {
  const treeListCopy = JSON.parse(JSON.stringify(treeList))
  treeListCopy.forEach((item: any) => {
    item.checked = arr.includes(item.taskTypeId)
    item.children.forEach((iten: any) => {
      iten.checked = arr.includes(item.taskTypeId)
    })
  })
  treeListData.value = treeListCopy
}

defineExpose({ mapData, initData, editData })
</script>

<style lang="scss" scoped>
.tree-content {
  margin-top: 24rpx;
  .title {
    display: flex;
    align-items: center;
    height: 48rpx;
    margin-bottom: 12rpx;
  }
  .children {
    padding-left: 50rpx;
  }
  .checkbox {
    margin-left: 10rpx;
    display: flex;
    align-items: center;
    height: 48rpx;
    transition: all 1s ease-in;
  }
}
.border {
  width: 100%;
  height: 1px;
  background-color: #d6d7d9;
  margin-top: 20rpx;
  transform: scaleY(0.5);
}
</style>
