<template>
  <div class="tdjy">
    <p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的土地交易项目，未公开的不含在内</p>
    <div class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国土地交易项目供应方式</span>
          <el-select v-model="years" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box">
        <div class="box-left">
          <div id="echarts1" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="gyfsList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="280"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
            <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
            <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国土地交易项目土地用途</span>
          <el-select v-model="years1" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box">
        <div class="box-left">
          <div id="echarts2" style="height: 280px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="tdytList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="280"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
            <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
            <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国土地交易项目地区Top10</span>
          <el-select @change="handleSearch" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
          </el-select>
          <el-select v-model="years2" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
            <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="content_box">
        <div class="box-left">
          <div id="echarts3" style="height: 300px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="topList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="280"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="province" label="地区" width="200" :formatter="formatStatus"/>
            <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
            <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="td_content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">全国土地交易项目年份统计</span>
        </div>
      </div>
      <div class="content_box">
        <div class="box-left">
          <div id="echarts4" style="height: 300px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="nftjList"
            element-loading-text="Loading"
            border
            show-summary
            max-height="290"
            :summary-method="getSummaries"
            fit
            highlight-current-row
            :default-sort = "{prop: 'count', order: 'descending'}"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="type" label="年份" width="200" :formatter="formatStatus"/>
            <el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
            <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import { countLandMarketByType,countLandMarketByProvince,countLandMarketByYear } from '@/api/macro/macro'
export default {
  name: 'NationalEconomies',
  data() {
    return {
      myChart1:'',
      myChart2:'',
      myChart3:'',
      myChart4:'',
      addressList:[],
      address:[],
      years:['2023'],
      years1:['2023'],
      years2:['2022'],
      yearOptions:[],
      gyfsList:[],
      tdytList:[],
      topList:[],
      nftjList:[],
    }
  },
  created() {
    this.dataRegion()
    this.yearsData()
    this.getCountLandMarketByType()
    this.getCountLandMarketByTypeTd()
    this.getCountLandMarketByProvince()
    this.getCountLandMarketByYear()
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeEcharts);
  },
  activated() {
    this.resizeEcharts()
  },
  methods: {
    getCountLandMarketByType(){
      countLandMarketByType({type:'供应方式',yearStr:this.years.join(",")}).then(res => {
        this.gyfsList=res.data.provinceDate;
        var list=[];
        for(var i=0;i<res.data.provinceDate.length;i++){
          var obj={};
          obj.name=res.data.provinceDate[i].type;
          obj.value=res.data.provinceDate[i].count;
          obj.rate=res.data.provinceDate[i].rate;
          list.push(obj)
        }
        this.initChart1(list)
      })
    },
    getCountLandMarketByTypeTd(){
      countLandMarketByType({type:'土地用途',yearStr:this.years1.join(",")}).then(res => {
        this.tdytList=res.data.provinceDate;
        var list=[];
        for(var i=0;i<res.data.provinceDate.length;i++){
          var obj={};
          obj.name=res.data.provinceDate[i].type;
          obj.value=res.data.provinceDate[i].count;
          obj.rate=res.data.provinceDate[i].rate;
          list.push(obj)
        }
        this.initChart2(list)
      })
    },
    getCountLandMarketByProvince(){
      let params={
        yearStr:this.years2.join(",")
      }
      if(this.address.length > 0){
        params.provinceId=this.address.join(",")
      }
      countLandMarketByProvince(params).then(res => {
        this.topList=res.data.provinceDate;
        this.initChart3()
      })
    },
    getCountLandMarketByYear(){
      countLandMarketByYear().then(res => {
        this.nftjList=res.data.yearDate;
        // var list=[];
        // for(var i=0;i<res.data.provinceDate.length;i++){
        //   var obj={};
        //   obj.name=res.data.provinceDate[i].type;
        //   obj.value=res.data.provinceDate[i].count;
        //   obj.rate=res.data.provinceDate[i].rate;
        //   list.push(obj)
        // }
        // this.initChart2(list)
      })
    },
    initChart1(data) {
      this.$nextTick(() => {
        this.myChart1 = echarts.init(document.getElementById("echarts1"))
        let option ={
          tooltip: {
            trigger: 'item',
            borderWidth:0,
            backgroundColor:"rgba(255, 255, 255, 0.8)",
            formatter: function (params) {
              var result = ''
              result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
              result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 '+ params.data.rate +'%</p>'
              return result;
            },
            extraCssText:'width:150px!important;',
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',
            bottom: 0,
            data: data,
            itemHeight:8,
            itemWidth:12,
            pageButtonPosition: 'end',
          },
          color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.myChart1.setOption(option);
      })
    },
    initChart2(data) {
      this.$nextTick(() => {
        this.myChart2 = echarts.init(document.getElementById("echarts2"))
        let option ={
          tooltip: {
            trigger: 'item',
            borderWidth:0,
            backgroundColor:"rgba(255, 255, 255, 0.8)",
            formatter: function (params) {
              var result = ''
              result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
              result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 '+ params.data.rate +'%</p>'
              return result;
            },
            extraCssText:'width:150px!important;',
          },
          legend: {
            type: 'scroll',
            orient: 'horizontal',
            bottom: 0,
            data: data,
            itemHeight:8,
            itemWidth:12,
            pageButtonPosition: 'end',
          },
          color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.myChart2.setOption(option);
      })
    },
    initChart3() {
      console.log(this.topList)
      this.$nextTick(() => {
        this.myChart3 = echarts.init(document.getElementById("echarts3"))
        let option ={
          legend: {
            x:'right',
            padding:[3,120,0,0],
            itemHeight:8,
            itemWidth:16,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#FFFFFF'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.jyfxData,
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:40,
            left:30,
            right:10,
            bottom:20,
          },
          series: [
            {
              data: this.topList.map(item => item.count),
              name:this.topList.map(item => item.province),
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#81D4BC",
              },
              itemStyle:{
                color: "#81D4BC",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(189, 249, 232, 1)'
                  }, {
                    offset: 1, color: 'rgba(189, 249, 232, 0)'
                  } ],
                  global: false
                }
              },
            },
          ]
        }
        this.myChart3.setOption(option);
      })
    },
    initChart4() {
      this.$nextTick(() => {
        this.myChart4 = echarts.init(document.getElementById("echarts4"))
        let option ={
          legend: {
            x:'right',
            padding:[3,120,0,0],
            itemHeight:8,
            itemWidth:16,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#FFFFFF'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.jyfxData,
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            top:40,
            left:30,
            right:10,
            bottom:20,
          },
          series: [
            {
              data: this.nftjList.map(item => item.type),
              name:'待成交项目数',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#81D4BC",
              },
              itemStyle:{
                color: "#81D4BC",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(189, 249, 232, 1)'
                  }, {
                    offset: 1, color: 'rgba(189, 249, 232, 0)'
                  } ],
                  global: false
                }
              },

            },
            {
              data: this.jyfxData1.map(item => item.dcjzje),
              name:'待成交总金额',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#9EE474",
              },
              itemStyle:{
                color: "#9EE474",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(208, 250, 183, 1)'
                  }, {
                    offset: 1, color: 'rgba(208, 250, 183, 0)'
                  } ],
                  global: false
                }
              },
            },
            {
              data: this.jyfxData1.map(item => item.cjxmje),
              name:'成交项目金额',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#E1B3FF",
              },
              itemStyle:{
                color: "#E1B3FF",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(233, 200, 255, 1)'
                  }, {
                    offset: 1, color: 'rgba(233, 200, 255, 0)'
                  } ],
                  global: false
                }
              },
            },
            {
              data: this.jyfxData1.map(item => item.cjxmzs),
              name:'成交项目总数',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#ADC0FF",
              },
              itemStyle:{
                color: "#ADC0FF",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(173, 192, 255, 1)'
                  }, {
                    offset: 1, color: 'rgba(173, 192, 255, 0)'
                  } ],
                  global: false
                }
              },
            },
            {
              data: this.jyfxData1.map(item => item.cbxmzs),
              name:'储备项目总数',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#67B3FD",
              },
              itemStyle:{
                color: "#67B3FD",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(192, 224, 255, 1)'
                  }, {
                    offset: 1, color: 'rgba(192, 224, 255, 0)'
                  } ],
                  global: false
                }
              },
            },
            {
              data: this.jyfxData1.map(item => item.cbxmzje),
              name:'储备项目总金额',
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 2,
                color: "#BEECFF",
              },
              itemStyle:{
                color: "#BEECFF",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(165, 229, 255, 1)'
                  }, {
                    offset: 1, color: 'rgba(165, 229, 255, 0)'
                  } ],
                  global: false
                }
              },
            },
          ]
        }
        this.myChart4.setOption(option);
      })
    },
    //地区
    async dataRegion() {
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              'id': dataRegion[i].id,
              "label": dataRegion[i].regionName,
              "short": dataRegion[i].short,
              "value": dataRegion[i].parentId,
              "children": []
            });
          }
        }
      }
      this.addressList = str;
    },
    handleSearch(){
      // console.log(this.address)
    },
    yearsData(){
      let mydate=new Date();
      let Year = mydate.getFullYear();
      let startyear=mydate.getFullYear()-4;
      let Years=[];
      for(var i=startyear;i<=Year;i++){
        Years.push(i);
      }
      this.yearOptions=Years.reverse()
    },
    resizeEcharts (){
      const self = this
      setTimeout(function(){ //图表跟随页面大小变化宽度
        self.myChart1.resize()
        self.myChart2.resize()
        // self.myChart3.resize()
        // self.myChart4.resize()
      }, 10)
    },
    formatStatus: function(row, column, cellValue) {
      return cellValue? cellValue : '-'
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 1) {
          sums[index] = '-';
          return;
        }
        if (index === 3) {
          sums[index] = '100';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return Number(prev) + Number(curr)
          } else {
            return prev;
          }
        }, 0);

        if (index === 1) {
          sums[index] = Number(sums[index]).toFixed(0);
          return;
        }
      });
      return sums;
    },

  }
}
</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;
  }
  .tdjy{
    .text_p{
      color: #999999;
      font-size: 14px;
      margin: 0;
    }

    .query-params{
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .form-content-width{
        width: 135px;
        .el-select__input{
          width: 10px !important;
          max-width: 10px !important;
          margin-left:0;
        }
      }
      ::v-deep .el-cascader{
        width: 220px;
        .el-cascader__tags{
          flex-wrap: inherit;
          .el-tag{
            max-width: 130px;
          }
        }
      }
    }
    .td_content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px 52px 16px 16px;
    }
    .content_box{
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 50%;
      }
      .box-right{
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-child(4){
                border-right:0;
              }
              td:nth-child(4){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
    }

    ::v-deep .el-input--medium{
      .el-input__icon{
        line-height: 32px;
      }
    }
  }
</style>
