<template>
    <div class="el-tree">
      <div v-for="(item, index) in list" :key="index">
        <div class="title">
          <span
            class="arrow"  @click="showAction(index)"
            v-if="!showSearch && item.child && item.child.length > 0"
          ></span>
          <span
            class="arrow2"  @click="showAction(index)"
            v-if="showSearch && item.child && item.child.length > 0"
          ></span>
  
          <div class="contentbox">
            <p>{{ $t("my.UserNameXm") }}：{{ item.nickName }}</p>
            <p>{{ $t("my.UserNumber") }}：{{ item.userName }}</p>
            <p>{{ $t("wode.Directpushnumber") }}：{{ item.totalNum }}</p>
            <p>{{ $t("wode.Directpushnumber") }}：{{ item.totalNum }}</p>
            <p>
              {{ $t("wode.Directpushnewperformance") }}：{{ item.registerPv }}
            </p>
            <p>
              {{ $t("wode.Cumulativenumberofteammembers") }}：{{
                item.teamTotalNum
              }}
            </p>
            <p>
              {{ $t("wode.Newperformanceoftheteam") }}：{{
                item.totalTeamDayAddPv
              }}
            </p>
            <p>
              {{ $t("wode.TeamCumulativePerformance") }}：{{
                item.totalRegisterPv
              }}
            </p>
            <p>{{ $t("my.PaymentTime") }}：{{ item.payTime }}</p>
          </div>
        </div>
        <div class="children">
          <el-tree v-if="item.isShow && item.child" :data="item.child" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "el-tree",
    props: {
      data: Array,
    },
    data() {
      const newData = JSON.parse(JSON.stringify(this.data));
      newData.forEach((item) => {
        item.isShow = false;
      });
      return {
        list: newData,
        showSearch: false,
      };
    },
    methods: {
      showAction(index) {
        if (this.list[index].child && this.list[index].child.length > 0) {
          this.list[index].isShow = !this.list[index].isShow;
          this.showSearch = !this.showSearch;
        }
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .title {
    font-size: 12px;
    font-weight: normal;
    display: flex;
    align-items: center;
  }
  .arrow {
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-left: 11px solid #999999;
    display: block;
    margin-right: 20px;
  }
  .arrow2 {
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top: 11px solid #1890FF;
    display: block;
    margin-right: 20px;
  }
  /* .text {
    display: block;
  } */
  .children {
        width: 1450px;
    padding: 0 20px;
    margin-left: 40px;
  }
  .contentbox {
    width: 1450px;
    padding: 18px;
    font-size: 18px;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    margin-bottom: 10px;
    box-shadow: 0px 0px 12px rgba(24, 144, 255, 0.3);
    p {
      margin-left: 5px;
    }
  }
  </style>
  