<template>
  <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" center :visible.sync="visible"
             title="趋势图">
    <div class="line" id="line"></div>
    <span slot="footer" class="dialog-footer">
            <el-button icon="el-icon-back" size="medium" @click="$emit('handleClose')">返回
            </el-button>
        </span>
  </el-dialog>
</template>

<script>
  import api from '@/api/water/trend'
  import G2 from "@antv/g2";

  export default {
    name: "line-form",
    data() {
      return {
        chart:{}
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      id: {
        type: Number,
        default() {
          return 0;
        }
      }
    },
    components: {},
    created() {

    },
    mounted() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        api.getDetail(this.id).then(res => {
          const chart = new G2.Chart({
            container: "line",
            autoFit: true,
            height: 300,
            width: 450,
            padding: ["auto"]
          });
          chart.source([]);
          chart.axis('value', {
            title: null,
            grid: null,
            line: {
              stroke: '#979797',
            },
            label: {
              textStyle: {
                fill: '#333333',
                fontSize: 14
              }
            }
          });
          chart.axis('month', {
            title: null,
            position: 'left',
            line: {
              stroke: '#979797',
            },
            label: {
              offsetY: 10,
              textStyle: {
                fill: '#333333',
                fontSize: 14
              }
            }
          });
          chart.legend({
            position: "top-center",
            offsetX: 0,
            offsetY: -20,
            textStyle: {
              fill: "#333333",
              fontSize: 14,
              fontWeight: 300
            }
          });
          chart
            .line()
            .position('month*value')
            .color('name')
            // .color('name', ['#0CFFAA', '#FFFF7B', '#FF3464', '#0073FE', '#05D1FF'])
          chart.render();
          this.chart = chart;
          this.$nextTick(function () {
            let dataList=[]
            res.data.map(item=>{
              dataList.push({
                month:item.forecastTime,
                name:'氨氮',
                value:item.waterNh3n
              })
              dataList.push({
                month:item.forecastTime,
                name:'总磷',
                value:item.waterTp
              })
              dataList.push({
                month:item.forecastTime,
                name:'总氮',
                value:item.waterTn
              })
              dataList.push({
                month:item.forecastTime,
                name:'溶解氧',
                value:item.waterDo
              })
              dataList.push({
                month:item.forecastTime,
                name:'浊度',
                value:item.waterTub
              })
              dataList.push({
                month:item.forecastTime,
                name:'化学需氧量',
                value:item.waterCod
              })
            })
            this.chart.changeData(dataList);
          })
        }).catch(e => {
        });
      }
    }
  };
</script>
