<template>
  <div style="width: 100%;">
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="400px"
      width="100%"
      style="margin-top: 1rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  props: ['info'],
  data() {
    return {
      options: {}
    }
  },
  components: {
    Echart
  },
  // props: {
  //   cdata: {
  //     type: Object,
  //     default: () => ({})
  //   }
  // },
  watch: {
    info: {
      handler(newData) {
        // 固定样式数据
        let lineStyle = {
          normal: {
            width: 1,
            opacity: 0.5
          }
        }

        this.options = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right: 20,
            data: ['昨日产量(整拍)', '临时库存(整拍)']
          },

          grid: {
            show: true,
            borderWidth: 2, // 边框宽度
            borderColor: '#444', // 边框颜色
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              show: false,
              // boundaryGap : [0, 0.01],
              max: newData.max
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: newData.name,
              axisLine: {
                show: false
              },
              axisTick: {
              show: false
            },
            },
          ],
          series: [
            {
              name: '昨日产量(整拍)',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.9, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ]),
                  // borderColor: 'black', // 边框颜色
                  // borderWidth: 0, // 边框宽度
                  // borderType: 'solid' // 边框类型，默认为实线
                }
              },
              label: {
                formatter:function(params){
                  return params.value + ' 箱\n' + params.name + ' 枚'
                },
                // formatter: '{c} 箱 \n {a} 枚',
                textStyle: {
                  // 文本样式
                  color: '#83bff6', // 文本颜色
                  fontSize: 14 // 设置字体大小
                },
                show: true, // 显示数值
                position: 'right' // 数值显示的位置
              },
              data: this.info.production1
            },
            {
              name: '临时库存(整拍)',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#14D7C7' },
                    { offset: 0.5, color: '#13A1A2' },
                    { offset: 1, color: '#103F5B' }
                  ]),
                  // borderColor: 'black', // 边框颜色
                  // borderWidth: 2, // 边框宽度
                  // borderType: 'solid' // 边框类型，默认为实线
                }
              },
              label: {
                formatter:function(params){
                  return params.value + ' 箱\n' + params.name + ' 枚'
                },
                // formatter: '{c} 箱',
                textStyle: {
                  // 文本样式
                  color: '#14D7C7', // 文本颜色
                  fontSize: 14 // 设置字体大小
                },
                show: true, // 显示数值
                position: 'right' // 数值显示的位置
              },
              showBackground: true,
              backgroundStyle: {
                color: 'none'
                // borderRadius: [20, 20, 20, 20],
              },
              data: newData.inventory1
            }
          ]
        }
      }
    }
  }
}
</script>