<template>
  <div :id="id" :style="{height:height,width:width}"/>
</template>
<script>
import { getPriceList } from '@/api/product'
import * as echarts from 'echarts'
import bus from '@/utils/bus'
export default {
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    legendShow: {
      default: true
    },
    count: {
      default: 100
    },
    info: {
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      chart: null,
      chartDataList: [],
      datetime: this.gettimestamp()
    }
  },
  deactivated() {
    bus.$off('updateChart', this.updateSymbol)
  },
  activated () {
    bus.$on('updateChart', this.updateSymbol)
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    bus.$off('updateChart', this.updateSymbol)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    updateSymbol(data) {
      if (data.symbol == this.info.symbol) {
        var timestamp = this.gettimestamp()
        if (timestamp == this.datetime) {
          this.chartDataList[this.chartDataList.length - 1] = data.ask
        } else {
          this.datetime = timestamp
          this.chartDataList.push(data.ask)
          this.chartDataList.shift()
        }
        this.chart && this.chart.setOption({
          series: [{
            data: this.chartDataList,
            lineStyle: {
              color: this.info.spread < 0 ? '#53B949' :'#D54037'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                {
                  offset: 0,
                  color: this.info.spread < 0 ? 'rgba(83, 185, 73, 0.6)' : 'rgba(213, 64, 55, 0.6)'
                },
                {
                  offset: 0.8,
                  color: this.info.spread < 0 ? 'rgba(83, 185, 73, 0.1)' : 'rgba(213, 64, 55, 0.1)'
                }
              ])
            }
          }]
        })
      }
    },
    setOption() {
      this.chart.setOption({
        grid: {
          top: '0',
          left: '0',
          bottom: '0',
          right: '0'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false,
        },
        yAxis: {
          animation: false,
          scale: true,
          show: false,
          type: 'value',
          splitNumber: 1,
          // min: function (value) {
          //   return value.min - (value.max-value.min);
          // },
          // max: function (value) {
          //   return value.max + (value.max-value.min);
          // }
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            data: this.chartDataList,
            animation: false,
            type: 'line',
            showSymbol: false,
            smooth: true,
            lineStyle: {
              color: this.info.spread < 0 ? '#53B949' :'#D54037'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                {
                  offset: 0,
                  color: this.info.spread < 0 ? 'rgba(83, 185, 73, 0.6)' : 'rgba(213, 64, 55, 0.6)'
                },
                {
                  offset: 0.8,
                  color: this.info.spread < 0 ? 'rgba(83, 185, 73, 0.1)' : 'rgba(213, 64, 55, 0.1)'
                }
              ])
            }
          }
        ]
      })
    },
    getPriceList() {
      getPriceList({
        symbol: this.info.symbol,
        // symbol: 'BTCUSD',
        type: 1,
        count: this.count,
        endTime: parseInt(new Date().getTime()),
      }).then((res) => {
        var list = res || []
        this.chartDataList = list.map((item) => {
          return +item.close
        })
        if (list[list.length - 1]) {
          this.datetime = list[list.length - 1].datetime
        }
        this.chart = echarts.init(document.getElementById(this.id))
        this.setOption()
        bus.$on('updateChart', this.updateSymbol)
      }).catch(() => {
      })
    },
    initChart() {
      this.getPriceList()
    },
    gettimestamp() {
      var now = new Date();
      var sign2 = ":";
      var year = now.getFullYear() // 年
      var month = now.getMonth() + 1; // 月
      var day = now.getDate(); // 日
      var hour = now.getHours(); // 时
      var minutes = now.getMinutes(); // 分
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      var m = new Date(year + '/' + month + '/' + day + " " + hour + sign2 + minutes + sign2 + '00').getTime()
      return m
    },
  }
}
</script>