<template>
  <el-row>
    <el-col :span="18">
      <el-row>
        <el-col :span="12">
          <!-- 采购需求 -->
          <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
            <div class="itemtitle" style="">市场采购需求</div>
            <v-chart ref="xuqiuchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="xuqiuchart" />
          </div>
        </el-col>
        <el-col :span="12">
          <!-- 在售产品 -->
          <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
            <div class="itemtitle" style="">产品供应排行</div>
            <v-chart ref="goodschart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="goodschart" />
          </div>
        </el-col>
      </el-row>
      <div>
        <!-- 价格走势 -->
        <div class="chart" :style="{height:((height-80)/2 - 30)+'px'}">
          <div class="itemtitle" style="">价格走势</div>
          <v-chart ref="costchart" :style="{height:(((height-80)/2 - 30 - 25)+'px')}" :option="costchart" />
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <!-- 市场资讯 -->
      <div class="chart" :style="{height:((height-80 - 20) )+'px'}">
        <div class="itemtitle" style="">市场资讯</div>
        <div>
          <div class="swiper-container" :style="{height:(((height-80) - 20  - 45)+'px')}">
            <div class="swiper-wrapper" :style="{height:(((height-80) - 20 - 45)+'px')}">
              <div v-for="(item,index) in news" class="swiper-slide newitem" style="height: 110px;">
                <div class="innner">
                  <div class="title">{{item.title}}</div>
                  <div class="flex">
                    <div class="flex_item">时间：{{item.date}}</div>
                    <div class="flex_item">来源：{{item.from_}}</div>
                  </div>
                  <div class="desc">
                    {{item.desc}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import $ from 'jquery'
import config from '/public/config.js'
import utils from '/public/utils.js'
import api from '/public/api.js'
import VChart, {
  THEME_KEY
} from "vue-echarts";
import * as echarts from 'echarts';

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

export default {
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      height: $(window).height(),
      charts: {},
      timer: null,
      xuqiuchart: {},
      goodschart: {},
      costchart: {},
      categorys : ['玉米', '水稻', '小麦', '大豆', '青稞'],
      news: [{
        id: 1,
        title:'中国农业展望报告（2024—2033）',
        desc: '4月20日至21日，中国农业展望大会在京召开，大会发布了《中国农业展望报告（2024—2033）》（以下简称报告）。报告总结回顾了20种（类）主要农产品的2023年市场形势，对未来十年尤其是2024年、2028年和2033年等重要时间节点的生产、消费、贸易、价格走势进行了展望。报告显示，未来10年粮食等重要农产品综合生产能力将显著增强，农产品消费持续升级，食物消费结构不断优化，农产品贸易保持增长趋势。在大力实施粮油等主要作物大面积单产提升行动下，农产品产量稳步增长，预计2033年粮食产量将达到7.66亿吨，年均增长1.1%。',
        date: '2024-04-23',
        from_: '农民日报'
      }, {
        id: 1,
        title: '科技赋能助力实现好“丰”景',
        desc: '4月28日，中国社会科学院发布了《中国数字经济高质量发展报告（2023）》（以下简称《报告》）。《报告》指出，大数据、云计算、区块链等新兴数字技术与农业、农村和乡村振兴有效融合，正在改变传统资源配置模式，为农业现代化提供新机遇。在数字经济与实体经济融合过程中，我国涌现了以京东、华为、中国联通等为代表的一系列新型实体企业，成为乡村振兴新主体。促进产业链、供应链数字化、智能化转型，以数字经济和数字技术补齐乡村振兴“短板”。',
        date: '2024-04-30',
        from_: '央视网'
      }, {
        id: 1,
        title:'2024年农业主导品种主推技术的通知',
        desc: '各地农业农村部门要抓好主要作物主导品种主推技术推广应用，充分利用基层农业技术推广体系、国家现代农业产业技术体系以及农业科技社会化服务组织等，开展主导品种主推技术示范展示和指导培训，引导带动广大农户和新型农业经营主体应用先进适用技术，促进农业科技成果尽快进村入户到田，不断提高技术入户率到位率，为提升粮油等主要作物生产能力提供有力科技支撑。',
        date: '2024-04-28',
        from_: '农业农村部网站'
      }, {
        id: 1,
        title:'两会-有力有效推进乡村全面振兴',
        desc: '党的十八大以来，以习近平同志为核心的党中央坚持把解决“三农”问题作为全党工作的重中之重。实施乡村振兴战略，是我们党“三农”工作一系列方针政策的继承和发展，是亿万农民的殷切期盼。今年全国两会，乡村全面振兴成为热议的话题。代表委员表示，要锚定建设农业强国目标，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
        date: '2024-03-10',
        from_: '人民日报'
      }, {
        id: 1,
        title: '2024年中国农业数字化行业政策解读',
        desc: '“十四五”期间，我国大部分省份都提出了有关农业数字化行业的发展规划。例如辽宁省规划到2025年年底，农村互联网普及率超过80%，农业数字经济在农业增加值中的占比达15%。浙江省提出到2025年，数字“三农”协同应用平台全面建成，生产管理、流通营销、行业监管、公共服务、乡村治理等五大领域核心业务应用全面推广。',
        date: '2024-03-05',
        from_: '前瞻网'
      }, {
        id: 1,
        title:'2024中国农业农村发展趋势报告发布',
        desc: '农业强国是社会主义现代化强国的根基，推进农业农村现代化是实现高质量发展的必然要求。坚持农业农村优先发展，坚持城乡融合发展，把责任扛在肩上、抓在手上，结合实际创造性开展工作，有力有效推进乡村全面振兴，以加快农业农村现代化更好推进中国式现代化建设。',
        date: '2024-01-19',
        from_: '中国经济网'
      }],
      swiper:null
    }
  },
  mounted: function() {
    var that = this;
    $(window).resize(function() {
      this.height = $(window).height() - this.titleheight;

      for (var key in that.charts) {
        that.charts[key].resize();
      }
      that.$refs['xuqiuchart'].resize();
      that.$refs['goodschart'].resize();
      that.$refs['costchart'].resize();
    });

    this.swiper = new Swiper('.swiper-container', {
      autoplay: 1000, //可选选项，自动滑动
      loop: true,
      direction: 'vertical',
      slidesPerView: (((this.height - 80) - 35)) / 110,
    })

    this.initcharts();

    //开始定时刷新报表数据
    this.startRefreshChart();
  },
  unmounted: function() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    /**
     * 定时刷新报表数据
     */
    startRefreshChart: function() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      var that = this;

      //获取刷新周期，TODO 配置变动时，此处需自动更新
      var refreshtime = 60 * 1000;
      config.getConfig().forEach(function(item, index) {
        if (item.key == 'refreshtime') {
          refreshtime = item.value;
        }
      });

      this.timer = setInterval(function() {
        that.swiper.slideNext();

        //---------------
        var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0)];
        that.xuqiuchart.series[0].data = values;
        that.xuqiuchart.series[1].data = values;
        that.xuqiuchart.series[2].data = values;

        //---------------
        var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
            .random(100) * 100).toFixed(0)];
        that.goodschart.series[0].data = values;
        that.goodschart.series[1].data = values;
        that.goodschart.series[2].data = values;

        //---------------
        var dates = [];
        var start = new Date();
        start.setDate(start.getDate()-30);
        for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
          dates.push(i.format('MM-dd'));
        }

        var series = [];
        var xData = [];
        that.categorys.forEach(function (item,index){
          xData.push(item);
          series.push({
            name: item,
            data: [],
            type: 'line',
            stack:'1',
            // smooth:true,
            lineStyle: {
              nomal:{
                width:1,
                color: config.colors[index%config.colors.length]
              }
            },
            label: {
              show: true,
              formatter: '{c}%',
              position: 'top',
              color: 'rgba(255,228,59,1)',
              fontSize: 12,
              textAlign: 'center',
            }
          });
          for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
            series[index].data.push((Math.random(100) * 100).toFixed(0));
          }
        });
        that.costchart.xAxis.data = dates;
        that.costchart.series = series;
      }, refreshtime);
    },
    initcharts: function() {
      this.xuqiuchart = this.initxuqiuchart();
      this.goodschart = this.initgoodschart();
      this.costchart = this.initcostchart();
    },
    initxuqiuchart: function() {
      var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0)];
      return {
        backgroundColor: '#000000',
        grid: utils.createChartGaid(null, null, "20px", "20px"),
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          axisLabel: {
            color: utils.getChartXTextColor()
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          // boundaryGap: false,//
          data: this.categorys,
          type: 'category',
        },
        yAxis: {
          axisLabel: {
            color: utils.getChartYTextColor(),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          splitLine: {
            lineStyle: {
              color: utils.getChartYColor(),
              type: 'dashed'
            },
          },
          name: '',
        },
        series: [
          // 	{
          // 	name: "含量",
          // 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0)],
          // 	type: 'bar',
          // 	barWidth: '20px',
          // 	label: {
          // 		show: true,
          // 		formatter: '{c}%',
          // 		position: 'top',
          // 		color: 'rgba(255,228,59,1)',
          // 		fontSize: 12,
          // 		textAlign: 'center',
          // 	},
          // 	itemStyle: {
          // 		color: function(pama) {
          // 			var colors = ['#fac858', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
          // 				'#4caff9', '#4adeca', '#0270f2', '#488cf7'
          // 			];
          // 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          // 					offset: 0,
          // 					color: colors[pama.dataIndex % colors.length] + 'ff',
          // 				},
          // 				{
          // 					offset: 1,
          // 					color: colors[pama.dataIndex % colors.length] + '66',
          // 				},
          // 			])
          // 		},
          // 		barBorderRadius: 20
          // 	}
          // },
          {
            name: '光照',
            type: 'bar',
            barWidth: '20px',
            barGap: '60%',
            itemStyle: {
              color: '#FF5252aa',
              borderColor: '#FF5252aa',
              borderWidth: 1,
              borderType: 'solid',
            },
            label: {
              show: true,
              formatter: '{c}' + '%',
              position: 'top',
              color: 'rgba(255,228,59,1)',
              fontSize: 12,
              textAlign: 'center',
            },
            zlevel: 2,
            data: values,
          },
          {
            name: '光照',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: 'end',
            z: 15,
            color: '#FF5252',
            zlevel: 3,
            data: values,
          },
          {
            name: '光照',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, 5],
            symbolPosition: 'start',
            z: 15,
            color: '#FF5252',
            zlevel: 3,
            data: values,
          }]
      };
    },
    initgoodschart: function() {
      var values = [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          .random(100) * 100).toFixed(0)];
      return {
        backgroundColor: '#000000',
        grid: utils.createChartGaid(null, null, "20px", "20px"),
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          axisLabel: {
            color: utils.getChartXTextColor()
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          // boundaryGap: false,//
          data: this.categorys,
          type: 'category',
        },
        yAxis: {
          axisLabel: {
            color: utils.getChartYTextColor(),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          splitLine: {
            lineStyle: {
              color: utils.getChartYColor(),
              type: 'dashed'
            },
          },
          name: '',
        },
        series: [
          // 	{
          // 	name: "含量",
          // 	data: [(Math.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0), (Math.random(100) * 100).toFixed(0), (Math
          // 		.random(100) * 100).toFixed(0)],
          // 	type: 'bar',
          // 	barWidth: '20px',
          // 	label: {
          // 		show: true,
          // 		formatter: '{c}%',
          // 		position: 'top',
          // 		color: 'rgba(255,228,59,1)',
          // 		fontSize: 12,
          // 		textAlign: 'center',
          // 	},
          // 	itemStyle: {
          // 		color: function(pama) {
          // 			var colors = ['#fac858', '#4adeca', '#0270f2', '#488cf7', '#2aa7ee', '#ee6666', '#91cc75', '#38cafb',
          // 				'#4caff9'
          // 			];
          // 			return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          // 					offset: 0,
          // 					color: colors[pama.dataIndex % colors.length] + 'ff',
          // 				},
          // 				{
          // 					offset: 1,
          // 					color: colors[pama.dataIndex % colors.length] + '66',
          // 				},
          // 			])
          // 		},
          // 		barBorderRadius: 20
          // 	}
          // },
          {
            name: '光照',
            type: 'bar',
            barWidth: '20px',
            barGap: '60%',
            itemStyle: {
              color: '#BAFF7Faa',
              borderColor: '#BAFF7Faa',
              borderWidth: 1,
              borderType: 'solid',
            },
            label: {
              show: true,
              formatter: '{c}' + '%',
              position: 'top',
              color: 'rgba(255,228,59,1)',
              fontSize: 12,
              textAlign: 'center',
            },
            zlevel: 2,
            data: values,
          },
          {
            name: '光照',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: 'end',
            z: 15,
            color: '#BAFF7F',
            zlevel: 3,
            data: values,
          },
          {
            name: '光照',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, 5],
            symbolPosition: 'start',
            z: 15,
            color: '#BAFF7F',
            zlevel: 3,
            data: values,
          }
        ]
      };
    },
    initcostchart: function() {
      var dates = [];
      var start = new Date();
      start.setDate(start.getDate()-30);
      for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
        dates.push(i.format('MM-dd'));
      }

      var series = [];
      var xData = [];
      this.categorys.forEach(function (item,index){
        xData.push(item);
        series.push({
          name: item,
          data: [],
          type: 'line',
          stack:'1',
          // smooth:true,
          lineStyle: {
            nomal:{
              width:1,
              color: config.colors[index%config.colors.length]
            }
          },
          label: {
            show: true,
            formatter: '{c}%',
            position: 'top',
            color: 'rgba(255,228,59,1)',
            fontSize: 12,
            textAlign: 'center',
          }
        });
        for(var i=new Date(start.getTime());i.getTime()<new Date().getTime();i.setDate(i.getDate()+1)){
          series[index].data.push((Math.random(100) * 100).toFixed(0));
        }
      });
      return {
        backgroundColor: '#000000',
        grid: utils.createChartGaid(null, null, "20px", "40px"),
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend:{
          bottom:'0',
          x:'center',
          data:xData
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          axisLabel: {
            color: utils.getChartXTextColor()
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,//
          data: dates,
          type: 'category',
        },
        yAxis: {
          axisLabel: {
            color: utils.getChartYTextColor(),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: utils.getChartXColor()
            }
          },
          splitLine: {
            lineStyle: {
              color: utils.getChartYColor(),
              type: 'dashed'
            },
          },
          name: '',
        },
        series: series
      };
    }
  }
}
</script>

<style scoped="scoped">
.chart {
  padding: 10px;
  overflow: hidden;
}

.itemtitle {
  background: linear-gradient(to right, #40a55f, #000, #000);
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}

.name_border {
  width: 100%;
  height: 1px;
  margin: 5px auto;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, #40a55f, #40a55f, rgba(0, 0, 0, 0));
}

.name_v_border {
  width: 1px;
  height: 70px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), #40a55f, #40a55f, rgba(0, 0, 0, 0));
}


.newitem {
  height: 110px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 20px;
  color: #999;
  cursor: pointer;
}

.newitem .title {
  font-size: 16px;
  line-height: 35px;
  height: 35px;
  text-align: left;
  color: #FF5722;
}

.newitem .desc {
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* // 显示的行 */
}

.newitem:hover {
  color: #fac858aa;
}
</style>
