
<!--
  @description: 桌面-采购单组件
  @Modifier：wxy
  @routerPath:/procurement/procurementDesktop
  @date： 2020-09-01 11:42:39
-->
<template>
  <div class="contentFram clearfix">
    <div class="item">
      <p class="title p0-16">
        <i class="iconfonts iconfont icon-xunjia" />询价
      </p>
      <div class="p16 itemList">
        <ul v-if="tableData[0]!=null &&tableData[0].length!=0">
          <li>可参与（<span :class="tableData[0].galleryCanJoinNum !== '0' ? 'cols' : ''">{{ tableData[0].galleryCanJoinNum }}</span>）</li>
          <li>正参与（<span :class="tableData[0].galleryJoiningNum !== '0' ? 'cols' : ''">{{ tableData[0].galleryJoiningNum }}</span>）</li>
          <li>已完成（<span :class="tableData[0].galleryFinishedNum !== '0' ? 'cols' : ''">{{ tableData[0].galleryFinishedNum }}</span>）</li>
          <li>已中标（<span :class="tableData[0].galleryBiddedNum !== '0' ? 'cols' : ''">{{ tableData[0].galleryBiddedNum }}</span>）</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <p class="title p0-16">
        <i class="iconfonts iconfont icon-danyilaiyuan" />单一来源
      </p>
      <div class="p16 itemList">
        <ul v-if="tableData[1]!=null &&tableData[1].length!=0">
          <li>可参与（<span :class="tableData[1].galleryCanJoinNum !== '0' ? 'cols' : ''">{{ tableData[1].galleryCanJoinNum }}</span>）</li>
          <li>正参与（<span :class="tableData[1].galleryJoiningNum !== '0' ? 'cols' : ''">{{ tableData[1].galleryJoiningNum }}</span>）</li>
          <li>已完成（<span :class="tableData[1].galleryFinishedNum !== '0' ? 'cols' : ''">{{ tableData[1].galleryFinishedNum }}</span>）</li>
          <li>已中标（<span :class="tableData[1].galleryBiddedNum !== '0' ? 'cols' : ''">{{ tableData[1].galleryBiddedNum }}</span>）</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <p class="title p0-16">
        <i class="iconfonts iconfont icon-jingzhengxingtanpan" />竞争性谈判
      </p>
      <div class="p16 itemList">
        <ul v-if="tableData[2]!=null &&tableData[2].length!=0">
          <li>可参与（<span :class="tableData[2].galleryCanJoinNum !== '0' ? 'cols' : ''">{{ tableData[2].galleryCanJoinNum }}</span>）</li>
          <li>正参与（<span :class="tableData[2].galleryJoiningNum !== '0' ? 'cols' : ''">{{ tableData[2].galleryJoiningNum }}</span>）</li>
          <li>已完成（<span :class="tableData[2].galleryFinishedNum !== '0' ? 'cols' : ''">{{ tableData[2].galleryFinishedNum }}</span>）</li>
          <li>已中标（<span :class="tableData[2].galleryBiddedNum !== '0' ? 'cols' : ''">{{ tableData[2].galleryBiddedNum }}</span>）</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 采购单数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    }
  }
}
</script>

<style lang='less' scoped>
  @import '~@assets/style/common/public.less';
  .item{
    background: #fff;
    width: 32.3%;
    float: left;
    border-left: 1px solid @cut-off;
    border-right: 1px solid @cut-off;
    border-bottom:1px solid @cut-off ;
    &:nth-child(1){
      border-top: 1px solid #F3893D;
    }
    &:nth-child(2){
      margin: 0 1.5%;
      border-top: 1px solid @hyacinthine;
    }
    &:nth-child(3){
      border-top: 1px solid @green;
    }
    .itemList{
      min-height: 201px;
    }
    p{
      border-bottom: 1px solid @cut-off;
      .iconfonts{
        color:@hyacinthine;
        margin-right:8px;
      }
    }
    ul{
      li{
        padding: 0 10px;
        // list-style: disc;
        line-height: 40px;
        .cols{
          color: red;
        }
        span{
          color: #b4b3b3;
        }
      }

    }
  }
</style>
