<!--
  @description: 代理机构-项目管理-未制作标包/关联标包渲染组件
                定标-中标候选人公示 定标-中标人公示
  @author: 肖文龙
  @date：  2019-11-20 14:46:41
-->
<template>
  <div v-show="packList.length>0" class="package">
    <div ref="content_selected" class="selected content_selected clearfix">
      <div ref="content_selected_show" :class="{ content_selected_show:!is_show }">
        <!--标包列表-->
        <el-tag
          v-for="(tag, index) in packList"
          :key="index"
          size="medium"
        >
          【{{ tag.packNo }}】{{ tag.packName }}
        </el-tag>
      </div>
      <p v-if="is_tags" class="unfold" @click="is_show=!is_show">
        展开所有<span class="tableColor">{{ packList.length }}</span>个标包
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PackDetail',
  props: {
    packList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      ele: null, // 标包元素
      is_tags: false, // 判断展开按钮是否显示
      is_show: false// 判断是否显示所有标包
    }
  },
  watch: {
    packList() {
      // 监听标包的长度判断是否显示边框线和展开按钮
      this.$nextTick(() => {
        let width = 17// 初始值
        // 得到标包元素的总宽
        if (!this.ele) return
        const len = this.ele.length
        for (let i = 0; i < len; i++) {
          width += (this.ele[i].offsetWidth + 16)// 16 margin的值
        }
        // 得到的宽度大于父元素的宽度的时候显示展开按钮和边框
        if (width > this.$refs.content_selected.offsetWidth) {
          this.is_tags = true
        } else {
          this.is_tags = false
        }
      })
    }
  },
  mounted() {
    // 获取到标包元素
    if (this.$refs.content_selected_show) {
      this.ele = this.$refs.content_selected_show.children
    }
  },
  methods: {
    show() {
      this.is_show = !this.is_show
    }
  }
}
</script>

<style scoped lang="less">
</style>
