<template>
  <div class="flex-box app-container part-container">
    <div class="tender-list">
      <div class="common-title">招标公告</div>
      <template v-if="zbggList.length>0">
        <div class="tender-item" v-for="(item, index) in zbggList" :key="index">
          <div class="flex-box tender-title"><div class="text-cl1" :title="item.projectName"><router-link :to="'/radar/Bidding/details/'+item.bid" tag="a" class="a-link">{{item.projectName}}</router-link></div><span :class="item.tenderStage=='项目动态'?'style2':item.tag=='招投标'?'style4':'style1'">{{item.tenderStage}}</span></div>
          <span class="tender-time">{{item.issueTime}}</span>
        </div>
      </template>
      <div class="tender-no-data" v-else>
        <no-data />
      </div>
    </div>
    <div class="tender-list">
      <div class="common-title">企业动态</div>
      <template v-if="trendList.length>0">
        <div class="tender-item" v-for="(item, index) in trendList" :key="index">
          <div class="flex-box tender-title"><div class="text-cl1" :title="tendTitle(item.details)">{{tendTitle(item.details)}}</div><span :class="item.parentDimension=='新增分支机构'?'style2':item.parentDimension=='新增施工工法'?'style3':'style1'">{{item.parentDimension}}</span></div>
          <span class="tender-time">{{item.createTime}}</span>
        </div>
      </template>
      <div class="tender-no-data" v-else>
        <no-data />
      </div>
    </div>
  </div>
</template>

<script>
import {bidNoticePage, dynamicPage} from "@/api/detail/party-a/overview"
import NoData from '../../component/noData'
export default {
  name: 'Tender',
  props: ['companyId'],
  components: {
    NoData
  },
  data() {
    return {
      zbggParams: {
        cid: this.companyId,
        sort: 3,
        pageNum: 1,
        pageSize: 5
      },
      //招标公告数据
      zbggList:[],
      trendParams: {
        companyId: this.companyId,
        pageNum: 1,
        pageSize: 5
      },
      //企业动态数据
      trendList:[]
    }
  },
  computed: {
    tendTitle() {
      return function(val) {
        let str = ''
        if(val){
          for(let key in val){
            str += key+'：'+ val[key]+'；'
          }
          str = str.substring(0, str.lastIndexOf('；'))
        }else{
          str = '--'
        }
        return str
      }
    }
  },
  created() {
    this.handleQuery()
  },
  mounted() {
  },
  methods: {
    async handleQuery() {
      let [notice, namic] = await Promise.all([
        bidNoticePage(this.zbggParams),
        dynamicPage(this.trendParams)
      ])
      if(notice.code==200){
        this.zbggList = notice.rows
      }
      if(namic.code==200){
        this.trendList = namic.rows
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .part-container{
    margin: 0;
    padding: 0;
    justify-content: space-between;
    align-items: normal;
    .tender-list{
      width: calc(50% - 8px);
      padding: 24px 16px;
      background: #FFFFFF;
      overflow: hidden;
      border-radius: 4px;
      .common-title{
        margin-bottom: 10px;
      }
      .tender-item{
        padding: 16px 0;
        border-bottom: 1px solid #EEEEEE;
        .tender-title{
          color: #232323;
          justify-content: space-between;
          align-items: normal;
          div{
            width: calc(100% - 120px);
          }
          span{
            height: 22px;
            line-height: 22px;
            padding: 1px 7px;
            border-radius: 2px;
            flex-shrink: 0;
            margin-left: 20px;
            margin-top: 3px;
            &.style1{
              background: #E4F3FD;
              font-size: 12px;
              color: #41A1FD;
            }
            &.style2{
              background: #F3F3FF;
              font-size: 12px;
              color: #8491E8;
            }
            &.style3{
              background: #ECF6E7;
              font-size: 12px;
              color: #54BC7E;
            }
            &.style4{
              background: #E5EEFC;
              font-size: 12px;
              color: #006EE4;
            }
          }
        }
        .tender-time{
          height: 28px;
          display: block;
          padding-top: 8px;
          color: rgba(35,35,35,0.4);
        }
      }
    }
    .tender-no-data{
      height: 420px;
      margin-top: 20px;
    }
  }
</style>
