<template>
  <div class="flex-box app-container part-container">
    <div class="bid-zbph">
      <div class="common-title">招标偏好</div>
      <div class="flex-box zbph-item">
        <div>历史招标总数
          <el-popover
            placement="top-start"
            trigger="hover"
            content="历史招标总数">
            <img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
          </el-popover>
          <span class="zbph-item-num">356</span></div>
        <div>近一年招标总数
          <el-popover
            placement="top-start"
            trigger="hover"
            content="近一年招标总数">
            <img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
          </el-popover>
          <span class="zbph-item-num">356</span></div>
        <div>历史招标总额
          <el-popover
            placement="top-start"
            trigger="hover"
            content="历史招标总额">
            <img src="@/assets/images/detail/overview/zbph_question.png" slot="reference">
          </el-popover>
          <span class="zbph-item-num">356</span></div>
      </div>
      <div class="zbph-account">招标动态
        <div class="labels">
          <div :class="{'on':datatype==1}" @click="getDT(1)">周</div>
          <div :class="{'on':datatype==2}" @click="getDT(2)">月</div>
          <div :class="{'on':datatype==3}" @click="getDT(3)">年</div>
        </div>
      </div>
      <div id="myEcharts" style="width: 100%;height:250px; margin: 0 auto;"></div>
    </div>
    <div class="bid-ywwl">
      <div class="common-title">业务往来供应商TOP5</div>
      <div class="table-item">
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <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="name"
            label="公司名称">
            <template slot-scope="scope">
              <router-link to="" tag="a" class="a-link">{{ scope.row.name }}</router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            width="160"
            label="合作次数">
          </el-table-column>
          <el-table-column
            prop="amount"
            width="160"
            label="合作总金额（万元）">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Bidding',
  data() {
    return {
      datatype:'1',//切换类型
      dtdata:[],//数据
      dttime:[],//坐标
      //表格数据
      tableData:[
        {name: '中国建筑第八工程局有限公司', companyId: '6034', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top1.png")},
        {name: '中建三局集团有限公司', companyId: '3068', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top2.png")},
        {name: '中国建筑一局（集团）有限公司', companyId: '428280', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top3.png")},
        {name: '上海宝冶集团有限公司', companyId: '7759', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top4.png")},
        {name: '中国五冶集团有限公司', companyId: '10951', number: '11%', amount: '2134', ico: require("@/assets/images/detail/overview/ywwl_top5.png")},
      ]
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(()=>{
      this.getDT(1)
    })
  },
  methods: {
    initDT(datas,labels){
      let myChart = echarts.init(document.getElementById("myEcharts"))
      let option = {
        xAxis: {
          type: 'category',
          data: labels
        },
        yAxis: {
          type: 'value'
        },
        grid:{
          left:'6%',
          top:'8%',
          right:'2%',
          bottom:'8%',
        },
        tooltip:{
          axisPointer:{ //悬浮于圆点展示标签
            type:'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
              }
            },
            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
      let time = new Date()
      let week = ['周一','周二','周三','周四','周五','周六','周日']
      let weekdata = [200,150,300,240,400,380,460]
      let monthdata = [400,200,350,170,190,280,260,308,406,387,458,695,125,360,512,546,298,365,458,536,345,200,150,300,240,400,380,460,472,365,547]
      let yeardata = [1908,1500,2300,1456,2354,2564,1254,1236,4561,4521,1236,4561,3521]
      let datas = []
      let labels = []
      switch (type) {
        case 1:
          time = time.getDay()
          // week.length = time
          weekdata.length = time
          for(var i=0;i<7;i++){
            if(i > time){
              weekdata.push('')
            }
          }
          labels = week
          datas = weekdata
          break;
        case 2:
          let days = new Date(time.getFullYear(),time.getMonth()+1,0).getDate()//获取到本月天数
          time = time.getDate()
          monthdata.length = time
          for(var i=1;i<days;i++){
            labels.push(i+'日')
            if(i > time){
              monthdata.push("")
            }
          }
          datas = monthdata
          break;
        case 3:
          time = time.getMonth()+1
          yeardata.length = time
          for(var i=1;i<12;i++){
            labels.push(i+'月')
            if(i>time){
              yeardata.push('')
            }
          }
          datas = yeardata
          break;
        default:
          break;
      }
      this.dtdata = datas
      this.dttime = labels
      this.initDT(datas,labels)
    }
  }
}
</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-weight: bold;
            display: block;
            padding-top: 8px;
          }
        }
      }
      .zbph-account{
        position: relative;
        font-weight: bold;
        margin-top: 35px;
        font-size: 14px;
        .labels{
          width: 120px;
          height: 22px;
          position: absolute;
          border-radius: 2px;
          right: 0;
          top: 2px;
          >div{
            width: 40px;
            height: 100%;
            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;
            }
            &: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{
          margin-left: -6px;
        }
        ::v-deep .el-table .el-table__body-wrapper tr:nth-child(2n){
          background: #FFFFFF;
        }
      }
    }
  }
</style>
