<template>
  <div class="zhaobiao">
    <div class="zb-content content1">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国招标数量分析</span>
        </div>
      </div>
      <div class="text">{{value}}全国项目招标数量达到{{totalCount}}万个，招标数量前五的地区分别是
        {{tableData[0].type}}（{{tableData[0].count}}个）、{{tableData[1].type}}（{{tableData[1].count}}个）、{{tableData[2].type}}（{{tableData[2].count}}个）、{{tableData[3].type}}（{{tableData[3].count}}个）、{{tableData[4].type}}（{{tableData[4].count}}个）。</div>
      <div class="main1">
        <div id="zb-echarts" style="height: 250px"></div>
        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{value}}全国公开的招标项目，未公开的不含在内</p>
      </div>
      <div class="main2">
        <div class="flex-box query-box head">
          <span>{{value}}全国招标总数<span class="number"> {{totalCount}} </span>万个</span>
          <div class="select-popper" style="position: relative;">
            <el-dropdown
              @command="handleDate"
              trigger="click"
              ref="punishDateShowPopper"
              :hide-on-click="false"
            >
              <span class="el-dropdown-link" :class="punishDateValue ? 'color_text' : ''">{{punishDateValue}}<i class="el-icon-caret-bottom"></i></span>
              <div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, i) in yearOptions"
                    :class=" punishDateValue && punishDateValue == item.value? 'color_text': ''"
                    :key="i"
                    :command="item.value"
                  >
                    <div @mouseenter="hidePoper">{{ item.label }}</div>
                  </el-dropdown-item>
                  <el-dropdown-item command="自定义" style="padding: 0; text-indent: 20px">
                    <div @mouseenter="mouseenter">
                      <span :class="punishDateValue == '自定义' ? 'color_text' : ''">自定义<i class="el-icon-arrow-right"></i></span>
                      <el-date-picker
                        v-if="punishDateShowPopper"
                        @change="changepunishDate"
                        class="land_date_picker"
                        v-model="punishDate"
                        ref="datePicker"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </div>
        </div>
        <div class="table-item">
          <el-table
            :data="tableData"
            border
            height="430"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="type" label="地区"/>
            <el-table-column prop="count" sortable label="招标数量" align="right"/>
            <el-table-column prop="rate" sortable label="占比（%）" align="right"/>
          </el-table>
        </div>
      </div>
    </div>
    <div class="zb-content content2">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国招标项目概览</span>
        </div>
      </div>
      <div class="text">通过对{{year}}年全国招标数据进行分析，发现主要集中在{{dataSort[0].label}}（{{dataSort[0].count}}个）、{{dataSort[1].label}}（{{dataSort[1].count}}个）进行招标。</div>
      <div class="main1">
        <div id="gl-echarts" style="height: 250px"></div>
        <p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{year}}年全国公开的招标项目，未公开的不含在内</p>
      </div>
      <div class="main2">
        <div class="selectYear">
          <el-select v-model="year" filterable class="form-content-width" placeholder="请选择" @change="changeValue()">
            <el-option v-for="(item, index) in yearData" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
        <div class="table-item">
          <el-table
            :data="tableData1"
            border
            height="430"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="label" label="月份"/>
            <el-table-column prop="count" sortable label="招标数量" align="right"/>
            <el-table-column prop="rate" sortable label="占比（%）" align="right"/>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { countGroupByMonth,countGroupByProvince,getYear } from '@/api/macro/macro'
export default {
  name: 'NationalEconomies',
  data() {
    return {
      year:'2023',
      yearOptions: [
        { label: '近五年', value: '近五年' },
        { label: '近三年', value: '近三年' },
        { label: '近一年', value: '近一年' },
      ],
      tableData:[
        {
          type:'',
          count:'',
        },
        {
          type:'',
          count:'',
        },
        {
          type:'',
          count:'',
        },
        {
          type:'',
          count:'',
        },
        {
          type:'',
          count:'',
        },
      ],
      tableData1:[],
      dataSort:[
        {
          label:'',
          count:''
        },
        {
          label:'',
          count:''
        },
      ],
      totalCount:'',
      punishDateValue: "请选择",
      value:'近五年',
      punishDateShowPopper: false,
      punishDate: "",
      yearData:[],
      myChart:'',
      myChart1:'',
    }
  },
  created() {
    let params={}
    this.getDataByProvince(params)
    this.getDataByMonth(params)
    this.$nextTick(()=>{
      // this.initChart()
      // this.initChart1()
    })
    getYear().then(res => {
      this.yearData=res.rows;
    })
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeEcharts);
  },
  activated() {
    this.resizeEcharts()
  },
  methods: {
    resizeEcharts (){
      const self = this
      setTimeout(function(){ //图表跟随页面大小变化宽度
        self.myChart.resize()
        self.myChart1.resize()
      }, 10)
    },
    getDataByProvince(params){
      countGroupByProvince(params).then(res => {
        this.tableData=res.data.provinceDate;
        this.totalCount=res.data.totalCount;
        this.initChart()
      })
    },
    getDataByMonth(params){
      countGroupByMonth(params).then(res => {
        this.tableData1=res.data;
        let companyValue1 = JSON.parse(JSON.stringify(this.tableData1))
        let arr = this.tableData1.sort((a, b) => {
          return b.count - a.count
        })
        this.tableData1 = JSON.parse(JSON.stringify(companyValue1))
        this.dataSort=arr;
        this.initChart1()
      })
    },
    initChart() {
      this.myChart = echarts.init(document.getElementById("zb-echarts"))
      let option = {
        tooltip: {
          trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5',
          right: '5',
          top: '15',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.tableData.map(item => item.type),
          axisLabel: {
            show: true,
            // "interval": 0,
            "rotate": 40 //X轴倾斜度
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.tableData.map(item => item.count),
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: '#165DFF',
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#165DFF',
                    fontSize: 16
                  }
                }
              },
              // 移入当前的柱状图时改变颜色
              emphasis: {
                color: '#3384FF',
              }
            }
          }
        ]
      };
      this.myChart.setOption(option);
    },
    initChart1() {
      this.myChart1 = echarts.init(document.getElementById("gl-echarts"))
      let dataList=this.tableData1;
      let option = {
        tooltip: {
          trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {// 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '5',
          right: '5',
          top: '20',
          bottom: '10',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.tableData1.map(item => item.label),
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.tableData1.map(item => item.count),
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                // color: '#2ECFCF',
                color: function (params) {
                  var colorList = []  //定义一个存储颜色的数组
                  //更改前二位柱形颜色
                  //定义一个变量 保存柱形图数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
                  let dataArr = JSON.parse(JSON.stringify(dataList))
                  let arr = dataList.sort((a, b) => {
                    return b.count - a.count
                  })
                  //将原数组数据赋值回去  保持数据不变
                  dataList = JSON.parse(JSON.stringify(dataArr))
                  //遍历数据 将原数组和排序后的数组比较
                  dataList.map(i => {
                    if (i.count == arr[0].count) {
                      colorList.push('#F39F35')
                    } else if (i.count == arr[1].count) {
                      colorList.push('#6675A5')
                    }else{
                      colorList.push('#2ECFCF')
                    }
                  })
                  //返回一个存储着颜色的数组根据数据index顺序渲染到页面
                  return colorList[params.dataIndex]
                },
              },
            }
          }
        ]
      };
      this.myChart1.setOption(option);
    },
    handleDate(command) {
      if (command && command != "自定义") {
        this.punishDateValue = command;
        this.$refs.punishDateShowPopper.hide();
        this.value = command;
        let mydate=new Date();
        var startTime, endTime, Year, Month, Day,startyear
        Year = mydate.getFullYear();
        Month = mydate.getMonth() + 1;
        Day = mydate.getDate();

        Month = Month < 10 ? '0' + Month : Month
        Day = Day < 10 ? '0' + Day : Day
        switch (command) {
          case "近五年":
            startyear=mydate.getFullYear()-5;
            startTime = startyear + "-" + Month + "-" + Day;
            endTime = Year + "-" + Month + "-" + Day;
            break;
          case "近三年":
            startyear=mydate.getFullYear()-3;
            startTime = startyear + "-" + Month + "-" + Day;
            endTime = Year + "-" + Month + "-" + Day;
            break;
          case "近一年":
            startyear=mydate.getFullYear()-1;
            startTime = startyear + "-" + Month + "-" + Day;
            endTime = Year + "-" + Month + "-" + Day;
            break;
        }
        let params={
          startDate:startTime,
          endDate:endTime
        }
        this.getDataByProvince(params)
      } else if (command == "自定义") {
        this.$refs.datePicker.pickerVisible = true;
      } else {
        this.$refs.punishDateShowPopper.hide();
        this.punishDateValue = "";
        this.punishDate = "";
      }
    },
    changepunishDate() {
      if (this.punishDate) {
        this.punishDateValue = "自定义";
        this.value = this.punishDate[0] +' - '+this.punishDate[1];
        let params={
          startDate:this.punishDate[0],
          endDate:this.punishDate[1]
        }
        this.getDataByProvince(params)
      }
    },
    hidePoper() {
      if (this.$refs.datePicker) {
        this.$refs.datePicker.pickerVisible = false;
      }
    },
    mouseenter() {
      this.punishDateShowPopper = true;
      if(this.punishDateValue=='自定义'){
        this.$nextTick(() => {
          // this.$refs.datePicker.focus()
          this.$refs.datePicker.pickerVisible = true;
        });
      }
    },
    changeValue(){
      this.getDataByMonth({year:this.year})
    }

  }
}
</script>

<style lang="scss" scoped>
  .land_date_picker{
    position: absolute!important;
    visibility: hidden;
    left: -645px;
    top: 145px;
  }
  ::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
  .color_text{
    background: #F3F4F5;
    border-radius: 4px;
    color: #0081FF;
  }
  .zhaobiao{
    .zb-content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px;
    }
    .text{
      width: 100%;
      line-height: 28px;
      padding: 0 16px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(35,35,35,0.8);
      background: #F4F4F5;
      border-radius: 2px;
      margin-bottom: 24px;
    }
    .tips{
      margin: 0;
      font-size: 12px;
      color: rgba(35,35,35,0.4);
      i{
        color:#909399;
        margin-right: 9px;
        font-size: 14px;
      }
    }
    .content1{
      .main2{
        margin-top: 30px;
        .head{
          span{
            font-size: 12px;
            color: rgba(35,35,35,0.8);
          }
          .number{
            color:#FF3C3C;
          }
          ::v-deep .el-select{
            width: 100px;
            height: 32px;
            .el-input{
              width: 100%;
              height: 32px;
            }
            .el-input__inner{
              height: 32px !important;
              line-height: 32px;
            }
          }
          .el-dropdown-link{
            width: 96px;
            height: 32px;
            display: inline-block;
            line-height: 32px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #D9D9D9;
            cursor: pointer;
            i{
              margin-left: 8px;
            }
          }
        }
      }
      .table-item{
        margin-top: 12px;
      }
    }
    .content2{
      .main2{
        .selectYear{
          height: 32px;
          float: right;
          margin-bottom:16px;
        }
        ::v-deep .el-select{
          width: 100px;
          height: 32px;
          .el-input{
            width: 100%;
            height: 32px;
          }
          .el-input__inner{
            height: 32px !important;
            line-height: 32px;
          }
        }
        margin-top: 32px;
      }
    }
    .table-item{
      ::v-deep .el-table{
        .el-table__header-wrapper{
          th{
            padding: 0;
          }
        }
        .el-table__cell.is-right{
          text-align: right;
        }
        .has-gutter{
          tr{
            th:nth-child(4){
              border-right:0;
              .cell{
                padding-right: 24px !important;
              }
            }
          }
        }
        .el-table__cell.gutter{
          background: #F0F3FA;
          width: 16px !important;
        }
        .el-table__row{
          td:last-child{
            .cell{
              padding-right: 24px !important;
            }
          }
        }
      }
    }
  }
</style>
