<!--
 * @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="!item.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-else-if="item.expanded && item.children && item.children.length > 0"
        >
          <u-icon size="56rpx" color="#ee252a" name="minus-circle"></u-icon>
        </view>
        <view class="arrow" v-else
          ><u-icon size="56rpx" color="#ee252a00" name="minus-circle"></u-icon
        ></view>
        <view class="fzbtn"
          ><u-button
            @click="copyText(item.splice)"
            class="thebtn"
            size="small"
            :text="$t('MY_CK_27')"
          ></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: "TreeItems",
  props: ["data"],

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

  methods: {
    copyText(text) {
      let self = this;
      uni.setClipboardData({
        data: text,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: self.$t("MY_CK_29"),
                icon: "none",
              });
            },
          });
        },
      });
    },
    toggleNode(index) {
      console.log(index);
      // return
      if (this.data[index].children && this.data[index].children.length > 0) {
        console.log(11);
        this.expanded = !this.expanded; // 切换展开和折叠状态
        this.$set(this.data[index], "isShow", !this.data[index].isShow);
        this.$set(this.data[index], "expanded", !this.data[index].expanded);
        console.log(22);
        // this.data[index].isShow = !this.data[index].isShow;
        // this.data[index].expanded = !this.data[index].expanded;
      }
    },
  },
};
</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>
