<template>
  <div
    ref="bar"
    :style= "widgetStyle"
  />
</template>

<script>
import stylec from "./style.vue";
import echarts from "echarts";
// import { on, off } from "@/libs/tools";
const WIDGET_NAME = "echarts-bar";
const option = {
    backgroundColor: '#00265f',
    "title": {
        "text": "政策补贴额度",
        x: "center",
        y:"4%",
        textStyle: {
            color: '#fff',
            fontSize: '22'
        },
        subtextStyle: {
            color: '#90979c',
            fontSize: '16',

        },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '12%'
    },
    xAxis: [{
        type: 'category',
        data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        },
        axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
                fontSize: 14
            },
        },
    }],
    yAxis: [{
        name: '单位：万元',
        axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,1)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        }
    }],
    series: [
      {
        type: 'bar',
        data: [5000, 2600, 1300, 1300, 1250, 1500],
        barWidth: '20px',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: true,
                lineHeight: 30,
                width: 80,
                height: 30,
                backgroundColor: 'rgba(0,160,221,0.1)',
                borderRadius: 200,
                position: ['-8', '-60'],
                distance: 1,
                formatter: [
                    '    {d|●}',
                    ' {a|{c}}     \n',
                    '    {b|}'
                ].join(','),
                rich: {
                    d: {
                        color: '#3CDDCF',
                    },
                    a: {
                        color: '#fff',
                        align: 'center',
                    },
                    b: {
                        width: 1,
                        height: 30,
                        borderWidth: 1,
                        borderColor: '#234e6c',
                        align: 'left'
                    },
                }
            }
        }
    }]
};
export default {
  name: WIDGET_NAME,
  props: ["h", "val", "playState", "w"],
  data () {
    return {
      dom: null,
      widgetStyle: {
         position: 'absolute',
          width: this.val.width + '%',
          height: this.val.height + '%',
          left: this.val.left + '%',
          top: this.val.top + '%',
          zIndex: this.val.z,
          backgroundColor: this.val.bgColor,
          backgroundImage: 'url(' + this.val.backPic + ')',
          color: this.val.color
      }
    };
  },
  icon: {
    type: "ios-podium"
  },
  title: "柱状图",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: false,
    isUpload: false,
    hasGuide: true,
    isChild: true,
    draggable: true,
    resizable: true,
    name: '柱状图',
    width: 30,
    height: 30,
    left: 10,
    top: 10,
    offsetLeft: 10,
    offsetTop: 10,
    offsetWidth: 100, // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    z: 0,
    bgColor: '#fff',
    backPic: '',
    backPicUrl: '',
    color: '',
    text: '柱状图',
    belong: 'page',
    animationName: '',
    option: option,
    isEcharts: true
  },
  watch: {
    val: {
      handler: function (newValue, oldval) {
        this.widgetStyle = {
          position: 'absolute',
          width: newValue.width + '%',
          height: newValue.height + '%',
          left: newValue.left + '%',
          top: newValue.top + '%',
          zIndex: newValue.z,
          backgroundColor: newValue.bgColor,
          backgroundImage: 'url(' + newValue.backPic + ')',
          color: newValue.color
        }
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.bar);
          this.dom.setOption(newValue.option);
          this.dom.resize()
        });
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  methods: {
    // resize() {
    //   this.dom.resize();
    // }
  },
   mounted () {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.bar);
      // console.log(this.val.option, 655443433)
      this.dom.setOption(this.val.option);
      // on(window, "resize", this.resize);
    });
  },
  beforeDestroy () {
    // off(window, "resize", this.resize);
  },

  methods: {
    resize () {
      this.dom.resize();
    }
  }
};
</script>

<style scoped>
.lz-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
</style>
