<template>
  <div class="flex-box app-container part-container">
    
    <div class="tender-list" ref="zbggScroll" @scroll="scrollbottom()">
      <div class="common-title">招标公告</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <template v-if="zbggList.length>0&&!isSkeleton">
        <div class="tender-item"  v-for="(item, index) in zbggList" :key="index">
          <div class="flex-box tender-title"><div class="text-cl2" :title="item.projectName"><router-link :to="'/radar/Notice/details/'+item.bid" tag="a" class="a-link">{{item.projectName}}</router-link></div><span :class="item.projectCategory=='项目动态'?'style2':item.tag=='招投标'?'style4':'style1'" v-if="item.projectCategory">{{item.projectCategory}}</span></div>
          <span class="tender-time"><span @click="handleUrl(item.url)" style="cursor: pointer;">{{item.dataSource}}</span> {{item.issueTime}}</span>
        </div>
      </template>
      <div class="tender-no-data" v-if="zbggList.length==0&&!isSkeleton">
        <no-data />
      </div>
    </div>
    <div class="tender-list" ref="trendScroll" @scroll="scrollbottom(true)" >
      <div class="common-title">企业动态</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton1"></skeleton>
      <template v-if="trendList.length>0&&!isSkeleton1">
        <div class="tender-item" v-for="(item, index) in trendList" :key="index">
          <div class="flex-box tender-title"><div class="text-cl2" :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-if="trendList.length==0&&!isSkeleton1">
        <no-data />
      </div>
    </div>
  </div>
</template>

<script>
import {bidNoticePage, dynamicPage} from "@/api/detail/party-a/overview"
import NoData from '../../component/noData'
import skeleton from '@/views/project/projectList/component/skeleton'
export default {
  name: 'Tender',
  props: ['companyId'],
  components: {
    NoData,skeleton
  },
  data() {
    return {
      isSkeleton:true,
      isSkeleton1:true,
      zbggParams: {
        cid: this.companyId,
        sort: 3,
        pageNum: 1,
        pageSize: 6
      },
      //招标公告数据
      zbggList:[],
      zbggTotal:0,
      trendParams: {
        companyId: this.companyId,
        pageNum: 1,
        pageSize: 6
      },
      //企业动态数据
      trendList:[],
      trendTotal:0,

    }
  },
  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() {
      this.isSkeleton = true;
      this.isSkeleton1 = true;
      let [notice, namic] = await Promise.all([
        bidNoticePage(this.zbggParams),
        dynamicPage(this.trendParams)
      ])
      if(notice.code==200){
        this.isSkeleton = false; 
        this.zbggList = notice.rows;
        this.zbggTotal = notice.total;
      }
      if(namic.code==200){
        this.isSkeleton1 = false; 
        this.trendList = namic.rows;
        this.trendTotal = namic.total;
      }
    },
    handleUrl(url){
      if(url){
        window.open(url, "_blank")
      }
    },
    async getBidNotice(){
      let notice = await bidNoticePage(this.zbggParams)
      if(notice.code==200){
        this.zbggTotal = notice.total;
        this.zbggList = this.zbggList.concat(notice.rows)
      }
    },
    async getDynamic(){
      let dynamic = await dynamicPage(this.trendParams)
      if(dynamic.code==200){
        this.trendTotal = dynamic.total;
        this.trendList = this.trendList.concat(dynamic.rows)
      }
    },
    scrollbottom(type){
        let scrllEl = type ? this.$refs.trendScroll : this.$refs.zbggScroll
        let scrollHeight = scrllEl.scrollHeight
        let clientHeight = scrllEl.clientHeight
        let scrollTop = scrllEl.scrollTop
        if(scrollHeight - (scrollTop+clientHeight) <= 1 ){
          if(type){
            if(this.trendParams.pageNum*this.trendParams.pageSize>=this.trendTotal){
              return
            }
            this.trendParams.pageNum+=1;
            this.getDynamic()
          }else{
            if(this.zbggParams.pageNum*this.zbggParams.pageSize>=this.zbggTotal){
              return
            }
            this.zbggParams.pageNum+=1;
            this.getBidNotice()
          }
        }
      },
  }
}
</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-y:scroll ;
      border-radius: 4px;
      height: 512px;
      .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>
