<template>
    <div>
        <h5 class="chart-title c-primary"><slot name="title"></slot></h5>
        <div class="barChart"  :ref="refName"></div>
        <div class="chart-tip">
            <div class="c-primary text-left">
                <slot name="subtitle"></slot>
            </div>
            <div class="c-white text-left">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
const refName = Math.random().toString(36).substr(2)
var mychart = ''
export default {
  name: "timeChart",
  data() {
    return {
      refName: refName,
      option: {
        color: "#00c7da",
        title: {},
        grid: {
          top: 20,
          bottom: 16,
          left: 0,
          right: 20,
          containLabel: true
        },
        xAxis: {
          nameGap: 8,
          nameTextStyle: {
            color: "#00c7da"
          },
          // type:'time',
          axisLabel: {
            rotate: !this.isXvalue ? "40" : 0,
            textStyle: {
              color: "#00c7da"
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00c7da"
            }
          },
          z: 10,
          data: ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00"]
        },
        yAxis: {
          max: 100,
          name: "%",
          nameGap: 8,
          nameTextStyle: {
            color: "#00c7da"
          },
          type: "value",
          data: [],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0d6b8b"
            }
          },
          splitLine: {
            show: !this.isXvalue,
            lineStyle: {
              color: "#17214b"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 5,
            textStyle: {
              color: "#00c7da"
            }
          }
        },
        series: [
          {
            type: "bar",
            barCategoryGap: "20%",
            barWidth: 11,
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                color: this.color
              },
              emphasis: {
                color: this.color
              }
            },
            data: []
          }
        ]
      }
    };
  },
  props: {
    id: String,
    isXvalue: {
      type: Boolean,
      default: true
    },
    color: {
      default: function() {
        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#02c8d1" },
          { offset: 0.5, color: "#0ccba5" },
          { offset: 1, color: "#16ce76" }
        ]);
      }
    },
    mergeOption: {
      type: Object,
      default: function() {
        return {};
      }
    },
    datas: {
      type: Object,
      default: function() {
        return {};
      }
    },
    labelShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    loadData() {
      var obj = {};
      this.option.series[0].data = [];
      this.option.yAxis.data = [];
      var data = this.option.xAxis.data;
      for (var i = 0; i < data.length; i++) {
        this.option.series[0].data.push({
          name: data[i],
          value: this.datas[data[i]]
        });
      }
      this.option.series[0].label = {
        normal: {
          show: true,
          position: "top",
          color: "#fff",
          formatter: function(val) {
            return val.value + "%";
          }
        }
      };
      this.option.series[0].label.normal.show = this.labelShow;
      mychart.setOption(this.option);
    }
  },
  beforeUpdate() {},
  updated() {},
  mounted() {
    mychart = echarts.init(this.$refs[refName],'customed');
    this.loadData();
  },
  watch: {
    datas: {
      handler(val, oldVal) {
        this.loadData();
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>
