<template>
  <div class="flex-box app-container part-container">
    <div class="bid-zbph">
      <div class="common-title">招标偏好</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <template v-if="(dataAll.totalCount||dataAll.lastYearCount||dataAll.bidAmount||this.dtdata.length>0)&& !isSkeleton">
        <div class="flex-box zbph-item">
          <div>历史招标总数
            <el-popover
              placement="top-start"
              trigger="hover"
              content="统计企业历年来公开招标总数">
              <img src="@/assets/images/detail/overview/zbph_question.png" style="width: 12px; height: 12px;" slot="reference">
            </el-popover>
            <span class="zbph-item-num">{{dataAll.totalCount || '--'}}</span></div>
          <div>近一年招标总数
            <el-popover
              placement="top-start"
              trigger="hover"
              content="统计企业近一年公开招标总数">
              <img src="@/assets/images/detail/overview/zbph_question.png" style="width: 12px; height: 12px;" slot="reference">
            </el-popover>
            <span class="zbph-item-num">{{dataAll.lastYearCount || '--'}}</span></div>
          <div>历史招标总额（万元）
            <el-popover
              placement="top-start"
              trigger="hover"
              content="统计企业历年来公开招标项目总金额">
              <img src="@/assets/images/detail/overview/zbph_question.png" style="width: 12px; height: 12px;" slot="reference">
            </el-popover>
            <span class="zbph-item-num">{{dataAll.bidAmount?parseFloat(dataAll.bidAmount.toFixed(6)):'--'}}</span></div>
        </div>
        <div class="zbph-account">招标动态
          <div class="labels"  v-if="dataAll.totalCount">
            <div :class="{'on':datatype==3}" @click="getDT(3)">近7天</div>
            <div :class="{'on':datatype==2}" @click="getDT(2)">近30天</div>
            <div :class="{'on':datatype==1}" @click="getDT(1)">近5年</div>
          </div>
        </div>
        <div v-if="dataAll.totalCount" id="myEcharts" style="height:250px; margin: 0 auto;"></div>
        <div class="bid-no-data" v-else>
          <no-data />
        </div>
      </template>

    </div>
    <div class="bid-ywwl">
      <div class="common-title">业务往来供应商TOP5</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton1"></skeleton>
      <div class="table-item">
        <el-table
          v-if="tableData.length>0&& !isSkeleton1"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="ico"
            width="55"
            label="排行">
            <template slot-scope="scope">
              <img class="ywwl-ico" :src="scope.row.ico">
            </template>
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="公司名称">
            <template slot-scope="scope">
              <router-link :to="`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link">{{ scope.row.companyName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            align="right"
            label="合作次数">
            <template slot-scope="scope">
              <span>{{ scope.row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            align="right"
            label="合作总金额（万元）">
            <template slot-scope="scope">
              <span style="padding-right: 28px;">{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="bid-no-data" style="margin-top: 100px;" v-else>
          <no-data />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {encodeStr} from "@/assets/js/common"
import {bidDataGroup, supplierPage} from '@/api/detail/party-a/overview'
import * as echarts from 'echarts'
import NoData from '../../component/noData'
import skeleton from '@/views/project/projectList/component/skeleton'
export default {
  name: 'Bidding',
  props: ['companyId'],
  components: {
    NoData,skeleton
  },
  data() {
    return {
      encodeStr,
      isSkeleton:true,
      isSkeleton1:true,
      datatype:'1',//切换类型
      dataAll: {},
      dtdata:[],//数据
      dttime:[],//坐标
      //表格数据
      tableData:[]
    }
  },
  created() {
    this.handleBid()
    this.handleSupplier()
  },
  mounted() {
  },
  methods: {
    async handleBid(){
      this.isSkeleton = true;
      let res = await bidDataGroup({cid: this.companyId, spanId: this.datatype})
      if(res.code==200 && res.data){
        this.isSkeleton = false;
        let {totalCount, lastYearCount, bidAmount} = res.data
        this.dataAll = {totalCount, lastYearCount, bidAmount}
        this.dtdata=res.data.groupCount.map(item=>{
          return item.count
        })
        this.dttime=res.data.groupCount.map(item=>{
          return item.span
        })
        if(this.dtdata.length>0&&this.dttime.length>0){
          this.$nextTick(() => {
            this.initDT(this.dtdata,this.dttime)
          })
        }
      }
    },
    async handleSupplier() {
      this.isSkeleton1 = true;
      let res = await supplierPage({cid: this.companyId, sort: 1, pageNum: 1, pageSize: 5})
      if(res.code==200){
        this.isSkeleton1 = false;
        this.tableData = res.rows
        this.tableData.forEach((item, index) => {
          item.amount = item.amount?parseFloat(item.amount.toFixed(6)):0
          item.ico = require(`@/assets/images/detail/overview/ywwl_top${index+1}.png`)
        })
      }
    },
    initDT(datas,labels){
      let myChart = echarts.init(document.getElementById("myEcharts"))
      let option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: labels
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          splitLine : { //网格线
            lineStyle: {
              type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
            },
          }
        },
        grid:{
          left:'5%',
          top:'8%',
          right:'8%',
          bottom:'8%',
          containLabel: true
        },
        tooltip:{
          trigger: 'axis',
          borderWidth:0,
          backgroundColor:"rgba(255, 255, 255, 0.8)",
          formatter: '{a}<br/>{c}',
          extraCssText:'width:100px!important;',
        },
        series: [
          {
            name: '招标数',
            data: datas,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal:{
                color:'#0081FF'
              }
            },
            label:{
              normal:{
                show:false
              }
            },
            symbolSize:8,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 129, 255, 0.5)'
                }, {
                  offset: 1, color: 'rgba(0, 129, 255, 0)'
                } ],
                global: false
              }
            },
          }
        ]
      }
      myChart.setOption(option)
    },
    getDT(type){
      this.datatype = type
      this.handleBid()
    }
  }
}
</script>

<style lang="scss" scoped>
  .part-container{
    margin: 0;
    padding: 0;
    justify-content: space-between;
    align-items: normal;
    .bid-zbph{
      width: calc(50% - 8px);
      padding: 24px 16px;
      background: #FFFFFF;
      overflow: hidden;
      border-radius: 4px;
      .zbph-item{
        justify-content: space-around;
        padding-top: 26px;
        >div{
          width: 33%;
          font-size: 12px;
          color: #3D3D3D;
          text-align: center;
          border-left: 1px solid #EEEEEE;
          &:first-child{
            border-left: 0;
          }
          img{
            display: inline;
            vertical-align: text-top;
          }
          .zbph-item-num{
            font-size: 16px;
            font-weight: bold;
            display: block;
            padding-top: 10px;
          }
        }
      }
      .bid-no-data{
        margin-top: 16px;
      }
      .zbph-account{
        position: relative;
        font-weight: bold;
        margin-top: 35px;
        font-size: 14px;
        .labels{
          height: 22px;
          position: absolute;
          border-radius: 2px;
          right: 0;
          top: 2px;
          >div{
            height: 100%;
            padding: 0 12px;
            text-align: center;
            line-height: 22px;
            float: left;
            border: 1px solid #EFEFEF;
            margin-left: -1px;
            font-weight: 400;
            font-size: 12px;
            color: rgba(35, 35, 35, 0.80);
            cursor: pointer;
            &.on{
              background: #0081FF;
              color: #FFFFFF;
              border-color: #0081FF;
            }
            &:first-child{
              border-radius: 2px 0px 0px 2px;
            }
            &:last-child{
              border-radius: 0px 2px 2px 0px;
            }
          }
        }
      }
    }
    .bid-ywwl{
      width: calc(50% - 8px);
      padding: 24px 16px;
      background: #FFFFFF;
      border-radius: 4px;
      .table-item{
        margin-top:15px;
        .ywwl-ico{
          width: 36px;
          height: 36px;
          margin-left: -6px;
        }
        ::v-deep .el-table .el-table__body-wrapper tr:nth-child(2n){
          background: #FFFFFF;
        }
        ::v-deep .el-table .el-table__body-wrapper tr:nth-child(5) .el-table__cell{
          border: none;
        }
        ::v-deep .el-table::before{
          display: none;
        }
      }
    }
  }
  ::deep .el-table::before{
    display: none;
  }

</style>
