<!--
    公共标签列表分类面包屑组件,通过 tagLibName 参数不同,区分不同的标签列表,请求不同的标签库字段
 -->
<template>
  <div class="common-wrap__temp flex">
    <div class="common-wrap__currentTag inline-block">
      <a :href="'#/'+tagLibName+'List?tagLevelGroupId=0'" class="common-wrap__currentTag__name">全部</a>
      <i class="el-icon-arrow-right m-l-8 m-r-8"></i>
      <template v-for="(item,index) in currentTagDatas">
        <a :href="'#/'+tagLibName+'List?tagLevelGroupId='+item.tagLevelGroupId" class="common-wrap__currentTag__name">{{item.levelName}}</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" v-if="!!childTagDatas.length">
      <template v-for="(item,index) in childTagDatas">
        <a :href="'#/'+tagLibName+'List?tagLevelGroupId='+item.tagLevelGroupId" class="common-wrap__childTag__name">{{item.levelName}} ({{ item.count }})</a>
      </template>
    </div>
    <div class="common-wrap__moreTag  p-l-20" v-if="childTagDatas.length >6">
      <el-popover
        placement="bottom-end"
        trigger="click"
        width="1049">
        <!-- 更多列表 -->
        <div class="common-wrap__moreTag__body">
          <template v-for="(item,index) in childTagDatas">
            <a :href="'#/'+tagLibName+'List?tagLevelGroupId='+item.tagLevelGroupId" class="common-wrap__childTag__name">{{item.levelName}}({{ item.count }})</a>
          </template>
        </div>
        <i slot="reference" class="el-icon-more"></i>
      </el-popover>


    </div>
  </div>
</template>
<script>
  import strLength from '@/common/js/strlen';
  import showMsg from '@/common/js/showmsg';
  import errMsg  from '@/common/js/error';
  import { _debounce } from "@/common/js/public";
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "tagCategory",
      props: {
        // 当前标签库名
        tagLibName: {
          type: String
        },
        // 当前标签库 id
        // tagCateId: {
        //   type: String
        // },
      },
      data() {
        return {
          // 子分类数据
          tagLevelGroupId: '',
          currentTagDatas: [
            // {
            //   tagLevelGroupId: 1,
            //   levelName: '基本信息',
            // },
            // {
            //   tagLevelGroupId: 2,
            //   levelName: '地理信息',
            // },
          ],
          childTagDatas: [
            // {
            //   tagLevelGroupId: 1,
            //   levelName: '其他一',
            //   count: 12
            // },
            // {
            //   tagLevelGroupId: 2,
            //   levelName: '其他二',
            //   count: 12
            // },
            // {
            //   tagLevelGroupId: 1,
            //   levelName: '其他一',
            //   count: 12
            // },
            // {
            //   tagLevelGroupId: 2,
            //   levelName: '其他二',
            //   count: 12
            // },

          ],
        }
      },
      methods: {
        /**
         * 获取当前分类数据
         */
        getCateData(url) {
          const that = this
          const para = {
            tagLevelGroupId: that.tagLevelGroupId
          }

          postRequest(url,para)
          .then((res) => {
            // console.log(res,res.data,res.data.errorCode)
            const resData = res.data
            if (resData.errorCode == 1) {
              // showMsg.showmsg('成功','success')
              that.currentTagDatas = resData.result.currentNode; // 当前分类数据
              that.childTagDatas = resData.result.dataList; // 子类数据
              return;
            }

            errMsg.errorMsg(resData)

          })
          .catch(function (error) {
            console.log(error);

            that.$message.error({
              duration: 1000,
              message: error.message
            })
          });
        },

        /**
         * 根据当前传递参数判断获取不同的分类数据
         */
        checkGetData(tagLibName) {
          const that = this
          // 平台
          if (tagLibName == 'platformTag') {
            that.getCateData('/memberTag/platformTagLevel')
          }
          // 手工
          if (tagLibName == 'manualTag') {
            that.getCateData('/memberTag/handTagLevel')
          }
          // 我的
          if (tagLibName == 'myTag') {
            that.getCateData('/enterpriseMemberTag/enterpriseTagLevel')
          }
        },

        /**
         * 手工标签用---添加三级分类后要更新分类
         */
        refreshData(){
          const that = this
          that.checkGetData(that.tagLibName);
        }

      },
      watch:{
        // tagCateId: function(newData,oldData) {
        //   this.tagLevelGroupId = newData
        //   this.checkGetData(this.tagLibName)
        // }
        $route: {
          handler: function(val, oldVal){
            console.log("获取当前路由:",val);
            const that = this

            // 获取标签库传递过来的分类 id
            that.tagLevelGroupId = !!that.$route.query.tagLevelGroupId? that.$route.query.tagLevelGroupId : 0;
            that.checkGetData(that.tagLibName)
          },
          // 深度观察监听
          deep: true
        },
      },
      mounted() {
        const that = this
        console.log(that.tagLibName)
        // 获取当前类别 id
        // that.tagLevelGroupId = that.tagCateId;
        that.tagLevelGroupId = !!that.$route.query.tagLevelGroupId? that.$route.query.tagLevelGroupId : 0;

        that.checkGetData(that.tagLibName)
      },
      components: {

      }
    }
</script>
<style lang="scss" scoped>
  .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;*/
    }

    .common-wrap__currentTag__name {

      &:last-child {
        color: #909399;
      }
    }

    .common-wrap__childTag__name {
      &:hover {
        background: #e6e8ed;
        color: #303133;
      }
    }
    .el-icon-more {
      font-size: 14px;
      color: #909399;
      cursor: pointer;
    }
  }
</style>
