<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
require('echarts/theme/macarons')
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
 
},
      id: {
        type: String,
        default: 'chart'
},
      width: {
        type: String,
        default: '200px'
},
      height: {
        type: String,
        default: '200px'
}
    },
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
     this.initChart()
 
this.chart = null
},
    methods: {
      initChart(nameList, jhList, wcList) {

        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            formatter: function (a) {
              let jh = '';
              let wc 
 
= '';
              if ( a[0] == undefined || a[0].data == null ) {
                jh = "計劃時間" + ":" + "未填寫時間"
} else {
                jh = a[0].seriesName + ":" + new Date(a[0].data).getFullYear() + '-' + (new Date(a[0].data).getMonth() + 1) + '-' + new Date(a[0].data).getDate();
              }
              if ( a[1] == undefined || a[1].data == null ) {
                wc = "完成時間" + ":" + "未填寫時間"
} else {
                wc = a[1].seriesName + ":" + new Date(a[1].data).getFullYear() + '-' + (new Date(a[1].data).getMonth() + 1) + '-' + new Date(a[1].data).getDate();
              }
              return jh + "</br>" + wc;
            }
          },
          legend: {
            data: ['計劃時間', '完成時間']
          },
          toolbox: {
            show: false,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          grid: {
            y: 80,
            y2:140,
            x2: 140
},
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                interval:0,
                rotate:40
},
              boundaryGap: false,
              data: ['詢價','澄清','保證金支付', '報價', '電子版標書', '封標', '投標', '投標保證金']

            }
          ],
          yAxis: [
            {
              type: 'time',
            }
          ],
          series: [
            {
              name: '計劃時間',
              type: 'line',
              data: :[1293811200000, 1356969600000, 1420141600000, 1483200000000, 1541272000000, 1603430400000, 1672502400000, 1735660800000, 1798732800000],
            },
            {
              name: '完成時間',
              type: 'line',
              data: :[1293811200000, 1356969600000, 1420141600000, 1483200000000, 1541272000000, 1603430400000, 1672502400000, 1735660800000, 1798732800000],
            },
          ]
        })
      }
    }
  }
</script>