<template>
  <div class="content-main">
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="scroll scroll-tree">
            <el-scrollbar>
              <el-tree class="filter-tree" :data="treeData" :props="defaultProps" @node-click="getTreeData" default-expand-all ref="tree">
              </el-tree>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="search-bm-boder">
            <el-form :model="queryform" :inline="true" label-width="50px" ref="queryform">
              <el-form-item label="日期:" prop="data">
                <el-date-picker v-model="queryform.data" class="dateInputCompatible" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <div class="search-button">
                <span class="search-line"></span>

                <el-button type="primary" @click="getList" size="small" class="iconfont iconchaxun"> 查询</el-button>
                <el-button type="primary" @click="resetInfo('queryform')" size="small" class="iconfont iconzhongzhi"> 重置</el-button>
              </div>
            </el-form>

          </div>
          <header class="header-title2">原粮近三月趋势分析</header>
          <div class="tx-container">
            <div class="echarts-box" id="blockMapYL">
            </div>
            <div class="radio-wrap">
              <el-radio-group v-model="radioYslVal" @change="getPzmc('YSL')">
                <el-radio v-for="(item, i) in radioYsl" :key="i" :label="item.dictName">{{item.dictName}}</el-radio>
              </el-radio-group>
            </div>
          </div>

          <header class="header-title2">成品粮近三月度趋势分析</header>
          <div class="tx-container">
            <div class="echarts-box" id="blockMapCPL">
            </div>
            <div class="radio-wrap">
              <el-radio-group v-model="radioCplVal">
                <el-radio v-for="(item, i) in radioCpl" :key="i" :label="item.dictName">{{item.dictName}}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <header class="header-title2">食用油及油料近三月度趋势分析</header>
          <div class="tx-container">
            <div class="echarts-box" id="blockMapSYY">
            </div>
            <div class="radio-wrap">
              <el-radio-group v-model="radioSyyVal">
                <el-radio v-for="(item, i) in radioSyy" :key="i" :label="item.dictName">{{item.dictName}}</el-radio>
              </el-radio-group>
            </div>
          </div>

        </el-col>
      </el-row>
  </div>
</template>

<script>
import { treeOrg, queryPriceCPL, queryPriceSYY, queryPriceYL, queryPricePointCPL, queryPricePointSYY, queryPricePointYL } from '@/api/grainCirculationPrice/grainPriceQuotation/weekQuotation/index'
import { getBrand } from '@/api/grainCirculationPrice/dataDict/index'
import echarts from 'echarts'

export default {
  name: 'Daily',
  data() {
    return {
      radioYslVal: "",
      radioCplVal: "",
      radioSyyVal: "",
      treeData: [],
      defaultProps: {
        label: 'orgName',
        value: 'orgCode',
        children: 'children'
      },
      queryform: {
        data: ''
      },
      treeDataVal: [],
      radioYsl:[],
      radioCpl:[],
      radioSyy:[]
    }
  },
  beforeCreate() {
    treeOrg().then(response=> {
      this.treeData = [response.data];
      this.treeDataVal = this.treeData[0];
      getBrand('YSL').then(res => {
        this.radioYsl = res.data[0].subDataDictionarys;
        console.log(this.radioYsl,111)
        this.radioYslVal = this.radioYsl[0].dictName;
        this.queryPriceYL(this.postData(this.radioYslVal));
      })
      getBrand('CPL').then(res => {
        this.radioCpl = res.data[0].subDataDictionarys;
        this.radioCplVal = this.radioCpl[0].dictName;
        this.queryPriceCPL(this.postData(this.radioCplVal));
      })
      getBrand('SYY').then(res => {
        this.radioSyy = res.data[0].subDataDictionarys;
        this.radioSyyVal = this.radioSyy[0].dictName;
        this.queryPriceSYY(this.postData(this.radioSyyVal));
      })
    })
  },
  created() {
    //this.getChart(this.treeData.orgName)
  },
  methods: {
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.getTreeData()
    },
    getTreeData(data){
      this.treeDataVal = data;
      this.queryPriceYL(this.postData(this.radioYslVal));
      this.queryPriceCPL(this.postData(this.radioCplVal));
      this.queryPriceSYY(this.postData(this.radioSyyVal));
    },
    getPzmc(pzName){
      if(pzName === 'YSL'){
        this.queryPriceYL(this.postData(this.radioYslVal));
      }else if(pzName === 'CPL'){
        this.queryPriceCPL(this.postData(this.radioCplVal));
      }else{
        this.queryPriceSYY(this.postData(this.radioSyyVal));
      }
    },
    postData(pzmc){
      const getData = {
        "startTime": this.queryform.data[0],
        "endTime": this.queryform.data[1],
        "sbdq": this.treeDataVal.orgName,
        "pzmc": pzmc
      }
      return getData;
    },
    eachLine(eachData, idName){
      if(idName !== "blockMapCPL"){
        let ckjData = [];
        let sgjData = [];
        let timeData = [];
        eachData.ckj.forEach((row, i) => {
          ckjData.push(row.bqjg);
          sgjData.push(eachData.sgj[i].bqjg)
          timeData.push(row.startTime);
        });
        this.createBlock(idName, timeData, ckjData, sgjData);
      }else{
        let lsjData = [];
        let pfjData = [];
        let ccjData = [];
        let timeData = [];
        eachData.lsj.forEach((row, i) => {
          lsjData.push(row.bqjg);
          pfjData.push(eachData.pfj[i].bqjg)
          ccjData.push(eachData.ccj[i].bqjg)
          timeData.push(row.startTime);
        });
        this.createBlock(idName, timeData, lsjData, pfjData, ccjData);
      }
    },
    queryPriceYL(getData){
      if(this.treeDataVal.orgLevel === "10180009"){
        queryPricePointYL(getData).then(response => {
          this.eachLine(response.data, "blockMapYL");
        });
      }else{
        queryPriceYL(getData).then(response => {
          this.eachLine(response.data, "blockMapYL");
        });
      }
    },
    queryPriceCPL(getData){
      if(this.treeDataVal.orgLevel === "10180009"){
        queryPricePointCPL(getData).then(response => {
          this.eachLine(response.data, "blockMapCPL");
        });
      }else{
        queryPriceCPL(getData).then(response => {
          this.eachLine(response.data, "blockMapCPL");
        });
      }
    },
    queryPriceSYY(getData){
      if(this.treeDataVal.orgLevel === "10180009"){
        queryPricePointSYY(getData).then(response => {
          this.eachLine(response.data, "blockMapSYY");
        });
      }else{
        queryPriceSYY(getData).then(response => {
          this.eachLine(response.data, "blockMapSYY");
        });
      }
    },
    createBlock(name, timeData, ckjData, sgjData, ccjData) {
      const myChart = echarts.init(document.getElementById(name));
      let seriesData = [
          {
            name: '收购价',
            type: 'line',
            stack: '总量',
            data: sgjData
          },
          {
            name: '出库价',
            type: 'line',
            stack: '总量',
            data: ckjData
          }
      ]
      if(name === "blockMapCPL"){
        seriesData = [
            {
              name: '零售价',
              type: 'line',
              stack: '总量',
              data: ckjData
            },
            {
              name: '批发价',
              type: 'line',
              stack: '总量',
              data: sgjData
            },
            {
              name: '出厂价',
              type: 'line',
              stack: '总量',
              data: ccjData
            }
        ]
      }
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 20
        },
        toolbox: {
          feature : {
            saveAsImage : {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: timeData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: seriesData
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.header-title2 {
  width: 100%;
  height: 44px;
  line-height: 44px;
  color: #fff;
  background: #bbcede;
  padding-left: 5px;
}

.tx-container {
  width: 100%;
  border: 1px solid #eef2f7;
  background: #fff;
  margin-bottom:10px;
}

.echarts-box {
  width: 100%;
  height: 300px;
}

.scroll-tree{
    background: #ffffff;
    height: 100vh;
    height: calc(100vh - 140px);
  }
.radio-wrap{ margin: 0 auto 10px; text-align: center;}
.el-scrollbar{
    height: 100%;
  }
</style>
