<template>
  <div>
    <div class="asset_list">
      <ul>
        <li
          v-for="(item, index) in treeData"
          :key="index"
          :class="{ active: currentIndex1 === index }"
          @click="setCurrentIndex(index, item, 1)"
        >
          {{ item.text }}
          <a v-if="item.children">></a>
        </li>
      </ul>
    </div>
    <div class="asset_list">
      <ul>
        <li
          v-for="(item, index) in menu1"
          :key="index"
          :class="{ active: currentIndex2 === index }"
          @click="setCurrentIndex(index, item, 2)"
        >
          {{ item.text }}
          <a v-if="item.children">></a>
        </li>
      </ul>
    </div>
    <div class="asset_list">
      <ul>
        <li
          v-for="(item, index) in menu2"
          :key="index"
          :class="{ active: currentIndex3 === index }"
          @click="setCurrentIndex(index, item, 3)"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue';

const emits = defineEmits(['getAssetName']);
const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});
const currentIndex1 = ref(null);
const currentIndex2 = ref(null);
const currentIndex3 = ref(null);
const menu1 = ref([]);
const menu2 = ref([]);

const assetName1 = ref('');
const assetName2 = ref('');
const assetName3 = ref('');

const setCurrentIndex = (index, record, flag) => {
  if (flag === 1) {
    currentIndex2.value = null;
    currentIndex3.value = null;
    currentIndex1.value = index;
    menu1.value = record.children;
    assetName1.value = record.text;
    assetName2.value = '';
    assetName3.value = '';
  } else if (flag === 2) {
    currentIndex3.value = null;
    currentIndex2.value = index;
    menu2.value = record.children;
    assetName2.value = record.text;
    assetName3.value = '';
  } else {
    currentIndex3.value = index;
    assetName3.value = record.text;
  }
  let name = '';
  if (!assetName2.value) {
    name = `${assetName1.value}`;
  }
  if (assetName2.value && !assetName3.value) {
    name = `${assetName1.value}->${assetName2.value}`;
  }
  if (assetName2.value && assetName3.value) {
    name = `${assetName1.value}->${assetName2.value}->${assetName3.value}`;
  }
  emits('getAssetName', name);
};
const clearData = () => {
  menu1.value = [];
  menu2.value = [];
  assetName1.value = '';
  assetName2.value = '';
  assetName3.value = '';
  currentIndex1.value = null;
  currentIndex2.value = null;
  currentIndex3.value = null;
};
watch(
  () => props.treeData,
  (newVal, oldVal) => {
    if (newVal !== oldVal || newVal.length === 0) {
      clearData();
    }
  },
);
</script>

<style scoped>
.asset_list {
  width: 33.3%;
  height: 91%;
  float: left;
  border-right: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
}
.asset_list > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.asset_list li {
  color: #333;
  height: 30px;
  line-height: 30px;
  padding-left: 16px;
  background-color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.asset_list li:hover {
  background-color: #c6e0f8;
}
li.active {
  color: #fff;
  background-color: #3e9aef;
  border-radius: 2px;
}
.asset_list li a {
  width: 18px;
  height: 18px;
  float: right;
  margin-right: 8px;
  /* display: inline-block; */
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
</style>