<template>
  <div :style="{'width':width}" style="font-size: 0;">

    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height">{{label}}
    </al-label>
    <div :class="{'autoWidth':label,'oh':showMore&&hide}"
         style="display: inline-block;vertical-align: top;font-size: 0;text-align: left;position: relative;"
         :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+' - '+(showMore?'53px':'0px')+')':'100%','line-height':height}">
      <el-tag
        v-for="(item,index) in tags"
        :key="item.label"
        :type="'text'"
        :effect="'plain'"
        :ref="index==(tags.length-1)?'lastone':''"
        :size="size"
        :class="{'tags_active':value==index,'tags_active_un':value!=index,'isSplit':item.isSplit}"
        style="box-sizing: border-box;margin-right: 15px;vertical-align: middle;cursor:pointer;min-width: 80px;text-align: center;border: 1px solid transparent;font-size: 14px;line-height: 27px;"
        @click="activeTagsFun(item,index)">
        <i class="iconfont icon-auro-popular" style="color:red;vertical-align: -1px;" v-if="item.isHot"></i>
        {{item.label}}
      </el-tag>
    </div>
    {{showMore+'|'+overflow}}
    <al-button type="text" style="display: inline-block;margin-top: 8px;" v-if="showMore&&overflow" @click="hide=!hide">
      更多
      <i class="iconfont" :class="hide?'icon-arrow-down':'icon-arrow-up'" style="vertical-align: -1px"></i>
    </al-button>
  </div>

</template>

<script>
    export default {
        name: "Tags",
        props: {
            showMore:{
                type:Boolean,
                default:false
            },
            value: {
                type: Number,
                defalut: 0
            },
            tags: Array,//tags标签组 为一个数组
            size: {
                type: String,
                default: 'medium',
            },
            selectedValue: {
                type: String,
                default: '全网'
            },
            selectedType: {
                type: String,
                default: 'success'
            },
            //宽度
            width: {
                type: String,
                default: '100%'
            },
            //高度
            height: {
                type: String,
                default: '36px'
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            labelActiveIndex: {
                type: Number,
                default: 0
            },
            label: {
                type: String,
                default: ""
            },
            labelWidth: {
                type: String,
                default: "100px"
            },
        },
        data() {
            return {
                hide:true,
                overflow:false,
            }
        },
        watch:{
            tags:{
                deep:true,
                handler(){
                    setTimeout(()=>{
                        this.resizeWatch();
                    },0)
                }
            }
        },
        methods: {
            labelChange(v) {
                this.$emit('labelChange', v)
            },
            //切换标签样式
            activeTagsFun: function (data, index) {
                //把当前选中的tag值传出去
                this.$emit('change', data);
                this.$emit('input', index);
            },
            resizeWatch(){
                if(this.$refs.lastone&&this.$refs.lastone[0]&&this.$refs.lastone[0].$el&&this.$refs.lastone[0].$el.offsetTop>30){
                    console.log(this.$refs.lastone)
                    !this.overflow&&(this.overflow=true);
                }else{
                    this.overflow&&(this.overflow=false);
                }
            }
        },
        mounted(){
            if(this.showMore){
                this.resizeWatch();
                window.addEventListener("resize",this.resizeWatch)
            }
        },
        beforeDestroy(){
            window.removeEventListener("resize",this.resizeWatch)
        }
    }
</script>

<style scoped lang="scss">
  .oh{
    overflow: hidden;
    height: 36px;
    /*white-space: nowrap;*/
    /*word-break: keep-all;*/
  }
  .filter-tags {
    text-align: left;
  }

  .tags_active {
    color: #1890FF;
    border: 1px solid #1890FF!important;
    background: #ECF5FF!important;
    border-radius: 4px;
    padding-top: 0!important;
    box-sizing: border-box;
  }
  .tags_active_un {
    color: #606266;
    padding-top: 0!important;
    box-sizing: border-box;
  }
  .isSplit{
    position: relative;
    margin-right: 55px!important;
      &:after{
        content: '';
        display: block;
        width: 1px;
        height: 13px;
        background: #EBEEF5;
        font-size: 20px;
        position: absolute;
        top: 7px;
        right: -30px;
      }
  }
  .label {
    display: inline-block;
    font-size: 14px;
    text-align: right;
  }
</style>
