<!--
    我的标签列表分类面包屑组件,通过 tagLibName 参数不同,区分不同的标签列表,请求不同的标签库字段
    <tag-category-small :tagLibName="tagLibName"></tag-category-small>
    import tagCategorySmall from '@/components/tagCategorySmall.vue';
 -->
<template>
<div class="common-wrap__cateTags">
  <div class="common-wrap__temp flex">
    <div class="common-wrap__currentTag inline-block">
      <a class="common-wrap__currentTag__name" @click.stop="toRequestData">全部</a>
      <i class="el-icon-arrow-right m-l-8 m-r-8"></i>
      <template v-for="(item,index) in currentTagDatas">
        <a class="common-wrap__currentTag__name" @click.stop="toRequestData(item.id)">{{item.name}}</a>
        <i class="el-icon-arrow-right m-l-8 m-r-8" v-if="currentTagDatas.length-1 != index"></i>
      </template>
    </div>
    <div class="common-wrap__childTag inline-block">
      <template v-for="(item,index) in childTagDatas">
        <a class="common-wrap__childTag__name" @click.stop="toRequestData(item.id)">{{item.name}}</a>
      </template>
    </div>
    <div class="common-wrap__moreTag  p-l-20">
      <el-popover
        placement="bottom-end"
        trigger="click"
        width="500">
        <!-- 更多列表 -->
        <div class="common-wrap__moreTag__body">
          <template v-for="(item,index) in childTagDatas">
            <a class="common-wrap__childTag__name" @click.stop="toRequestData(item.id)">{{item.name}}</a>
          </template>
        </div>
        <i slot="reference" class="el-icon-more"></i>
      </el-popover>

    </div>
  </div>
</div>
</template>
<script>
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "tagCategory",
      props: {
        tagLibName: {
          type: String
        }
      },
      data() {
        return {
          // 子分类数据
          currentTagDatas: [
            {
              id: 1,
              name: '基本信息',
            },
            {
              id: 2,
              name: '地理信息',
            },
          ],
          childTagDatas: [
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
            {
              id: 1,
              name: '其他一',
              num: 12
            },
            {
              id: 2,
              name: '其他二',
              num: 12
            },
          ],
        }
      },
      methods: {
        /**
         * 点击分类
         */
        toRequestData(id) {
          var that = this
          console.log(id)
        }

      },
      watch:{

      },
      mounted() {
        var that = this
        console.log(that.tagLibName)
      },
      components: {

      }
    }
</script>
<style lang="scss" scoped>
  .common-wrap__cateTags {
    margin-bottom: 12px;
  }

  .common-wrap__temp {
    padding-right: 82px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .common-wrap__moreTag {
      position: relative;
      /*margin-left: 60px;*/
    }

    .el-icon-more {
      font-size: 14px;
      color: #909399;
      cursor: pointer;
    }

    .common-wrap__currentTag__name {
      cursor: pointer;
    }

    .common-wrap__childTag__name {
      cursor: pointer;
    }
  }
</style>
