<!--
  @description:招标-邀请函-投标人资格要求-标段(包)切换tabs
  @Modifier: 肖文龙
  @routerPath:
  @date: 2019/12/31-16:13
-->
<template>
  <div>
    <div class="makePackList">
      <ul>
        <li
          v-for="(item,index) in packList"
          v-if="!is_show||index<1"
          :key="index"
        >
          <!--已制作-->
          <div
            v-if="item.markStatus==='01'"
            :class="{'active':item.packId===packInfo.packId}"
            class="accomplish"
            @click="packChange(item)"
          >
            <i class="iconfont icon-yizhizuo" />
            <span class="makePackName">
              【{{ item.packName }}】{{ item.packNo }}
            </span>
          </div>
          <!--未制作-->
          <div
            v-else
            :class="{'disable':true,'active':item.packId===packInfo.packId,}"
            @click="packChange(item)"
          >
            <i class="iconfont icon-weizhizuo" />
            <span class="makePackName">
              【{{ item.packName }}】{{ item.packNo }}
            </span>
          </div>
        </li>
      </ul>
      <!--展开收起-->
      <div class="more">
        <span v-if="is_show" class="pointer" @click="is_show=false">
          展开更多（{{ packList.length>1?packList.length-1:0 }}）
          <i class="el-icon-arrow-down" />
        </span>
        <span v-else class="pointer" @click="is_show=true">
          收起更多（0）
          <i class="el-icon-arrow-up" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { listQualificationPackage } from '@/api/bidding/bidInvitation'
export default {
  name: 'TenderQualificationtabsVue',
  data() {
    return {
      is_show: false, // 是否展开
      tenderId: this.$route.query.id, // 项目Id
      invitationId: this.$route.query.invitationId, // 邀请函Id
      packList: [], // 标段（包）列表
      packInfo: {} // 当前选中的标段(包）信息
    }
  },
  created() {
    this.initPackId()// 邀请函已制作的标段（包）
  },
  methods: {
    // 邀请函已制作的标段（包）
    initPackId() {
      if (!this.invitationId) return
      listQualificationPackage(this.invitationId).then(res => {
        this.packList = res.data
        this.packChange(this.packList[0])// 标段 索引
      })
    },
    // 标段 索引
    packChange(item) {
      this.packInfo = item
      this.$emit('packChange', item)
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  @LH:40px;//高度
  @accomplish:#24B761;//已完成节点
  /*标段（包）切换sideBar*/
  .makePackList{
    height:100%;
    border-right: 1px solid #E2E7EE;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: calc(100% - 210px);
    ul{
      padding:24px 0;
      li div{
        position: relative;
        min-height: @LH;
        box-sizing: border-box;
        padding: 4px 12px;
        width: 100%;
        cursor: pointer;
        font-size: 12px;
        i{
          vertical-align: sub;
        }
        i:before{
          font-size: 20px;
          width: 20px;
          height: 20px;
          /*position: absolute;
          left: 0;
          top: 50%;
          transform: translate( 0,-10px);*/
        }
        .makePackName{
          display:inline-block;
          width: calc(100% - 30px);
          vertical-align: sub;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      /*已制作节点*/
      li div.accomplish {
        i{
          color: @accomplish;
        }
      }
      /*当前节点*/
      li div.active{
        background: @hyacinthine;
        color: @white;
        i{
          color: @white !important;
        }
      }
      /*未制作节点*/
      li div.disable {
        i{
          color: @hyacinthine;
        }
      }
    }
    /*
    展开收起
    */
.more{
  border: none;
  border-top: 1px dashed @gray;
  width: 90%;
  margin: 0 auto;
}
  }
</style>

