<template>
  <div class="flex-box app-container part-container">
    <div class="tender-list">
      <div class="common-title">招标公告</div>
      <div class="tender-item" v-for="(item, index) in zbggList" :key="index">
        <div class="flex-box tender-title">{{item.projectName}}<span :class="item.tenderStage=='项目动态'?'style2':item.tag=='招投标'?'style4':'style1'">{{item.tenderStage}}</span></div>
        <span class="tender-time">{{item.contact}} {{item.issueTime}}</span>
      </div>
    </div>
    <div class="tender-list">
      <div class="common-title">企业动态</div>
      <div class="tender-item" v-for="(item, index) in trendList" :key="index">
        <div class="flex-box tender-title">{{item.xxx}}<span :class="item.tag=='新增分支机构'?'style2':item.tag=='新增施工工法'?'style3':'style1'">{{item.tag}}</span></div>
        <span class="tender-time">{{item.createTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {bidNoticePage, dynamicPage} from "@/api/detail/party-a/overview"

export default {
  name: 'Tender',
  props: ['companyId'],
  data() {
    return {
      zbggParams: {
        cid: this.companyId,
        sort: 3,
        pageNum: 1,
        pageSize: 5
      },
      //招标公告数据
      zbggList:[],
      trendParams: {
        companyId: this.companyId,
        pageNum: 1,
        pageSize: 5
      },
      //企业动态数据
      trendList:[
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '对外投资变更', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增分支机构', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增分支机构', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增施工工法', time: '03-21'},
        {name: '深圳北站片区正建超大型商场，预计2026年建成', tag: '新增施工工法', time: '03-21'}
      ]
    }
  },
  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;
          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{
          display: block;
          padding-top: 8px;
          color: rgba(35,35,35,0.4);
        }
      }
    }
  }
</style>
