<template>
  <div class="yield-charts">
    <custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
let itemStyle = reactive({
  itemStyle: { borderRadius: [8, 8, 0, 0] },
});

let legendList = reactive(['总产量', '种植面积']);
const payload = {
  id: '',
  data: {
    title: legendList,
    unit: ['%'],
    xAxis: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
    data1: [20, 80, 100, 40, 34, 90, 60, 20, 80],
    data2: [10, 100, 80, 30, 50, 100, 50, 10, 90],
  },
};

const unit = payload.data.unit || [];
const xAxis = payload.data.xAxis || [];
const data1 = payload.data.data1 || [];
const data2 = payload.data.data2 || [];
const title = payload.data.title || [];

const chartsData = reactive({
  option: {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '1%',
      top: '15%',
      containLabel: true,
    },
    legend: {
      show: true,
      data: Array.from(legendList),
      left: 'center', // 距离左侧10%的位置
      top: '0', // 垂直居中
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: 'axis',
      backgroundColor: 'rgba(9, 30, 60, 0.6)',
      extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
      borderWidth: 0,
      confine: false,
      appendToBody: true,
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
      // 轴触发提示才有效
      axisPointer: {
        type: 'shadow',
      },
      shadowStyle: {
        color: 'rgba(157, 168, 245, 0.1)',
      },

      formatter: (data) => {
        var tip = '<h5 class="echarts-tip-h5">' + data[0].name + '</h5>';
        data.forEach((item) => {
          let unit = '';
          if (item.seriesType === 'bar') {
            tip += '<div class="echarts-tip-div">';
            // tip += '<div class="left">' + item.marker + item.seriesName + '：</div>';
            tip += '<div class="right">' + item.seriesName + '：' + item.value + unit + '</div>';
            tip += '</div>';
          }
        });
        return tip;
      },
    },
    xAxis: {
      data: xAxis,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#4176a3',
          width: '0.5', //坐标线的宽度
        },
      },
      axisLabel: {
        textStyle: {
          color: '#fff', //底部文字颜色
          fontSize: 12,
        },
      },
    },
    dataZoom: [
      {
        type: 'slider', // 滑动条型数据区域缩放组件
        startValue: 0, // 数据窗口起始值的索引
        endValue: 5, // 数据窗口结束值的索引
      },
      {
        type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
        startValue: 0,
        endValue: 5,
      },
    ],
    yAxis: [
      {
        name: ' ',
        nameTextStyle: {
          align: 'left',
          fontSize: 11,
          color: '#4176a3',
        },
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: 'transparent', //左边框颜色
          },
        },
        splitLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          fontSize: 12,
          textStyle: {
            color: '#ADD6FF', //左文字颜色
          },
        },
      },
    ],
    series: [
      {
        name: title[0],
        type: 'bar',
        barWidth: 10,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(21,136,209,0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear', // 线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#45bfe9' },
              { offset: 1, color: '#01589c' },
            ],
            global: false, // 默认为 false
          },
        },
        data: data1,
        z: 0,
        zlevel: 0,
      },
      {
        type: 'pictorialBar',
        barWidth: 10,
        itemStyle: {
          color: '#021C46', //数据的间隔颜色
        },
        symbolRepeat: 'true',
        symbolMargin: 3,
        symbol: 'rect',
        symbolSize: [30, 4],
        data: data1,
        z: 1,
        zlevel: 0,
        label: {
          show: false,
          position: 'top',
          fontSize: 14,
          color: '#fff', //柱状顶部文字颜色
          formatter: function (params) {
            return params.data;
          },
        },
      },
      {
        name: title[1],
        type: 'bar',
        barWidth: 10,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(21,136,209,0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear', // 线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#6beff9' },
              { offset: 1, color: '#2f888f' },
            ],
            global: false, // 默认为 false
          },
        },
        data: data2,
        z: 0,
        zlevel: 0,
      },
      {
        type: 'pictorialBar',
        barWidth: 10,
        itemStyle: {
          color: '#021C46', //数据的间隔颜色
        },
        symbolRepeat: 'true',
        symbolMargin: 3,
        symbol: 'rect',
        symbolSize: [30, 4],
        data: data2,
        z: 1,
        zlevel: 0,
        label: {
          show: false,
          position: 'top',
          fontSize: 14,
          color: '#fff', //柱状顶部文字颜色
          formatter: function (params) {
            return params.data;
          },
        },
      },
    ],
  },
  valData: [
    { name: '1月', value: 40, type: '蝗虫', seriesType: 'bar', ...itemStyle },
    { name: '1月', value: 30, type: '飞蛾', seriesType: 'bar', ...itemStyle },
    { name: '1月', value: 100, type: '其他', seriesType: 'bar', ...itemStyle },
    { name: '1月', value: 60, type: '蚜虫', seriesType: 'bar', ...itemStyle },
    { name: '2月', value: 20, type: '蝗虫', seriesType: 'bar', ...itemStyle },
    { name: '2月', value: 20, type: '飞蛾', seriesType: 'bar', ...itemStyle },
    { name: '2月', value: 80, type: '其他', seriesType: 'bar', ...itemStyle },
    { name: '2月', value: 40, type: '蚜虫', seriesType: 'bar', ...itemStyle },
  ],
});

const randomVal = (num) => {
  let list = [];
  for (let i = 0; i < legendList.length; i++) {
    let addNum = [10, 8, 2, 5];
    let val = {
      name: num + '月',
      value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
      seriesType: 'bar',
      type: legendList[i],
      ...itemStyle,
    };
    list[i] = val;
  }
  return list;
};
let handelData = computed(() => {
  let list = [];
  let maxMouth = 12;
  for (let i = 0; i < maxMouth; i++) {
    let val = randomVal(i + 1);
    list = [...list, ...val];
  }

  list.map((m) => {
    return { ...m, value: Number(m.value + Math.random() + 10).toFixed(2) };
  });
  // console.info('handelData', list);
  return list;
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.yield-charts {
  height: 100%;
  width: 100%;
}
</style>
