<template>
  <div class="list">
    <div class="first-tag">
      <div v-if="isOtherTag" class="mb16">
      <svg class="menu-icon" :class="[ { 'icon-tag-light': list.name === tagRealName }]" aria-hidden="true">
          <use :xlink:href="`#${list.icon}`"></use>
      </svg>
      <span class="tag-name" :class="{ 'icon-tag-light': list.name === tagRealName }" @click="handleFirstTag">{{ list.name }}</span>
      </div>
      <el-collapseTransition>
        <div class="second-tag">
          <second-tag :type="activeTag" :list="item" :tag-name="tagName" v-for="(item, i) in list.children" :key="i"></second-tag>
        </div>
      </el-collapseTransition>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { CollapseTransition } from 'element-ui';
import SecondTag from './second-tag';
import { mapState } from 'vuex';

Vue.component(CollapseTransition.name, CollapseTransition);

export default {
  name: 'tag-type',

  components: {
    SecondTag
  },

  props: {
    // 会员标签的数据
    tagList: Object,
    activeTag: String
  },

  data() {
    return {
      list: {},
      typeName: '',
      editData: []
    };
  },

  computed: {
    ...mapState(['tagRealName']),
    tagName() {
      const { activeTag } = this;
      return activeTag == 'system' ? '系统标签' : activeTag == 'manual' ? '手工标签' : '活动标签';
    },
    isOtherTag() {
      return !['手工标签', '活动标签'].includes(this.list.name);
    }
  },

  methods: {
    // 处理一级标签
    handleFirstTag() {
      localStorage.setItem('jumpTag', '');
      // 手工标签和其他标签
      this.$emit('handleFristTag', this.list);
    }
  },

  watch: {
    tagList: {
      immediate: true,
      handler(newval) {
        this.list = newval;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  margin-top: 22px;
  overflow: hidden;
  &:last-child {
    border-bottom: none;
  }
  &:first-child {
    margin-top: 24px;
  }
  .expends-txt {
    position: absolute;
    right: 20px;
    font-size: 14px;
    color: #2f54eb;
    cursor: pointer;
  }
  .tag-name {
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    cursor: pointer;
    line-height: 22px;
    &:hover {
      color: #2f54eb;
    }
  }
  .second-tag {
    margin: 0 1px;
    font-size: 14px;
    color: #303133;
    cursor: pointer;
  }
  .icon-tag-light {
    color: #2f54eb;
    font-weight: bold;
  }
}
.list:last-child .second-tag {
  border-bottom: none;
}
.mb16 {
  margin-bottom: 16px;
}
.menu-icon {
    width: 16px; height: 16px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
