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

<script>
import stylec from './style.vue';
import echarts from 'echarts';
// import { on, off } from "@/libs/tools";
const WIDGET_NAME = 'echarts-bar2';
var cost = [0.2, 0.201, 1]// 本期比上期（大于1按1处理）
var dataCost = [1000.01, 200000, 200]// 真是的金额
var totalCost = [1, 1, 1]// 比例综合
var visits = [92, 102, 89]// 本期占总的百分比*100
var grade = ['人次用药金额', '药品使用量', '用药金额']
var data = {
  title: '**省',
  grade: grade,
  cost: cost,
  totalCost: totalCost,
  visits: visits,
  dataCost: dataCost
};
const option = {
  backgroundColor: '#05274C',
  title: {
    top: '5%',
    left: 'center',
    text: data.title + '年度用药情况整体统计',
    textStyle: {
      align: 'center',
      color: '#4DCEF8',
      fontSize: 18
    }
  },
  grid: {
    left: '240',
    right: '100'
  },
  xAxis: {
    show: false
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      margin: 100,
      show: true,
      color: '#4DCEF8',
      fontSize: 14
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    data: data.grade
  },
  series: [{
    type: 'bar',
    barGap: '-100%',
    label: {
      normal: {
        show: true,
        position: 'right',
        color: '#fff',
        fontSize: 14,
        formatter:
                function (param) {
                  return '同比：' + data.visits[param.dataIndex] + '%';
                }
      }
    },
    barWidth: '35%',
    itemStyle: {
      normal: {
        borderColor: '#4DCEF8',
        borderWidth: 2,
        barBorderRadius: 15,
        color: 'rgba(102, 102, 102,0)'
      }
    },
    z: 1,
    data: data.totalCost
    // data: da
  }, {
    type: 'bar',
    barGap: '-98%',
    barWidth: '33%',
    itemStyle: {
      normal: {
        barBorderRadius: 16,
        color: {
          type: 'linear',
          x: 0,
          x1: 1,
          colorStops: [{
            offset: 0,
            color: '#02ddff'
          }, {
            offset: 1,
            color: '#00feff'
          }]
        }
      }
    },
    max: 1,
    label: {
      normal: {
        show: true,
        position: 'left',
        color: '#fff',
        fontSize: 14,
        formatter: function (param) {
          if (param.dataIndex == '0') {
            return data.dataCost[param.dataIndex] + '元';
          }
          if (param.dataIndex == '1') {
            return data.dataCost[param.dataIndex];
          }
          if (param.dataIndex == '2') {
            return data.dataCost[param.dataIndex] + '万';
          }
        }
      }
    },
    labelLine: {
      show: true
    },
    z: 2,
    data: data.cost
  }]
}

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: 'md-menu'
    // type: "md-ionic"
  },
  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.bar2);
          this.dom.setOption(newValue.option);
          this.dom.resize()
        });
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.bar2);
      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>
