<template>
  <div class="treelist scroll">
    <div class="treelistitem" v-for="(item,index) in list" :key="index">
      <div class="treelistitem1 cur" :class="{active2:item.show}" @click="getdata(index,item.id)">
        <img class="down1" src="../../assets/icon_daosanjiao.png" alt="">
        <img class="home1" src="../../assets/icon_home2.png" alt="">
        <span>{{ item.name }}</span>
      </div>
      <div class="treelistitemchild1 cur">
        <div class="treelistitemchild" :class="{active:active===item2.id}" @click="getid(item2)"
             v-for="(item2,index2) in item.children"
             :key="index2">
          <img src="../../assets/icon_copy2.png" alt=""> {{ item2.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gateway, gatewayInfo, getProject} from "@/api/api/user";

export default {
  name: 'Brand',
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      show: false,
      status: 0,
      active: 0,
      list: [],
    }
  },
  watch: {},
  mounted() {
    this.getprduct()
  },
  methods: {
    getshow() {
      this.status = 0
      this.show = true
    },

    getprduct() {
      var that = this;
      getProject({}).then(function (res) {
        that.list = res.data
      })
    },
    getid(item) {
      this.active = item.id
      this.$emit('getid', item)
    },
    getdata(index, id) {
      var that = this;
      gateway(id).then(function (res) {
        that.list[index].children = res.data
        that.$emit('getlist', res.data)
        that.$forceUpdate()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.treelistitemchild1 {
  margin-left: 67px;

}

.treelistitemchild {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 156px;
  color: #8299BF;
  margin-bottom: 5px;
  margin-top: 5px;

  img {
    margin-left: 34px;
  }
}

.treelistitemchild.active {
  background: url("../../assets/celanbg.png") center center no-repeat;
  background-size: 100% 100%;
  width: 156px;
  height: 30px;
  color: #E4A254;
}

.treelist {
  width: calc(100% - 20px);
  margin-right: 20px;
  position: relative;
  height: calc(100% - 200px);
  overflow-y: scroll;

  .treelistitem {
  }

  .treelistitem1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 40px;
    margin-left: 50px;

    .down1 {
      width: 8px;
      margin-right: 2px;
    }

    .home1 {
      margin-right: 0px;
      width: 29px;
    }

    span {
      font-size: 14px;
      font-family: PingFang;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  .treelistitem1.active2 {
    .down1 {
      width: 8px;
      margin-right: 2px;
      transform: rotateZ(180deg);
    }
  }
}

</style>