<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-07-28 16:30:26
-->
<template>
  <view>
    <view v-for="(item, index) in data" :key="item.id">
      <view class="thetree">
        <view
          @click="toggleNode(index)"
          class="arrow"
          v-if="!expanded && item.children && item.children.length > 0"
        >
          <u-icon size="56rpx" color="#ee252a" name="plus-circle"></u-icon>
        </view>
        <view
          @click="toggleNode(index)"
          class="arrow"
          v-if="expanded && item.children && item.children.length > 0"
        >
          <u-icon size="56rpx" color="#ee252a" name="minus-circle"></u-icon>
        </view>
        <view class="fzbtn">
          <u-button
            @click="copyText(item.splice)"
            class="thebtn"
            size="small"
            :text="'复制'"
          ></u-button>
        </view>
        <view class="maintree">{{ item.splice }}</view>
      </view>
      <tree-item
        style="margin-left: 40rpx"
        v-if="item.isShow && item.children"
        :data="item.children"
      ></tree-item>
    </view>
  </view>
</template>

<script>
export default {
  name: "TreeItem",
  props: ["data"],

  data() {
    const newData = this.data;
    newData.forEach((item) => {
      item.isShow = false;
    });
    return {
      expanded: false, // 初始状态为折叠
    };
  },
  watch: {
    data(val) {
      this.data = val;
    },
  },

  methods: {
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title:  '复制成功',
            icon: "success",
          });
        },
      });

    },
    toggleNode(index) {
      if (this.data[index].children && this.data[index].children.length > 0) {
        this.expanded = !this.expanded; // 切换展开和折叠状态
        this.data[index].isShow = !this.data[index].isShow;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.thetree {
  display: flex;
  align-items: center;

  .fzbtn {
    .thebtn {
      color: #333333;
      background-color: #ffffff;
    }
  }

  .maintree {
    border: 2rpx solid #eeeeee;
    border-radius: 10rpx;
    font-size: 24rpx;
    background: #f3f3f3;
    margin-left: 20rpx;
    padding: 28rpx 25rpx;
    margin-top: 27rpx;
  }
}
</style>