<template>
  <div class="inventory-charts">
    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
const legendData = reactive(['猪', '牛', '羊', '鸡', '其他']);
let dataItem = reactive([100, 90, 200, 250, 240, 275, 120, 300, 320, 270, 290, 120]);
let colors = reactive({
  猪: '#3685fe',
  牛: '#41b879',
  羊: '#ffd500',
  鸡: '#e57373',
  其他: '#46b1db',
});
let colorBg = reactive({
  猪: [
    { offset: 0, color: 'rgba(54,161,255,0.6)' },
    { offset: 1, color: 'rgba(25,104,255,0)' },
  ],
  牛: [
    { offset: 0, color: 'rgba(0,255,0,0.6)' },
    { offset: 1, color: 'rgba(25,104,255,0)' },
  ],
  羊: [
    { offset: 0, color: 'rgba(255,213,0,0.6)' },
    { offset: 1, color: 'rgba(25,104,255,0)' },
  ],
  鸡: [
    { offset: 0, color: 'rgba(299,155,155,0.6)' },
    { offset: 1, color: 'rgba(25,104,255,0)' },
  ],
  其他: [
    { offset: 0, color: 'rgba(0,255,0,0.6)' },
    { offset: 1, color: 'rgba(70,177,219,0)' },
  ],
});

const currentMonth = ref(new Date().getMonth() + 1);
const yAxisData = computed(() => {
  let list = [];
  for (let i = 1; i < 13; i++) {
    let mouth = i < 10 ? i : i;
    list.push(mouth + '月');
  }
  return list;
});

let seriesItem = reactive({
  type: 'line',
  stack: 'Total',
  symbol: 'none',
  smooth: true,
});

let seriesData = computed(() => {
  let list = [];
  if (legendData.length && legendData.length > 0) {
    legendData.forEach((m) => {
      let val = {
        ...seriesItem,
        name: m,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: colorBg[m],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          color: colors[m],
          width: 1,
          type: 'solid',
        },
        data: dataItem,
      };

      list.push(val);
    });
  }
  return list;
});
const chartsData = reactive({
  option: {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '15%',
      bottom: '1%',
      top: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
      confine: true, // 超出范围
      backgroundColor: 'rgba(17,95,182,0.5)', //设置背景颜色
      formatter: function (item) {
        let params = [...item];
        var res = params[0].name + '<br/>';
        for (var i = 0, l = params.length; i < l; i++) {
          res += params[i].value !== '-' ? params[i].marker + params[i].seriesName + ' : ' + params[i].value + ' <br/>' : '';
        }
        return res;
      },
    },
    legend: {
      show: true,
      data: Array.from(legendData),
      right: '0', // 距离左侧10%的位置
      top: 'middle', // 垂直居中
      orient: 'vertical', // 图例垂直排列
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#94A7BD', //轴线和单位颜色
        },
      },
      data: yAxisData,
    },
    yAxis: {
      type: 'value',
      name: ' ',
      nameTextStyle: {
        fontSize: 14,
        color: '#94A7BD',
        padding: [0, 0, 0, -45],
      },
      axisLine: {
        lineStyle: {
          color: '#94A7BD', //轴线和单位颜色
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#182D46',
          type: [2, 3],
          dashOffset: 2,
        },
      },
    },
    series: seriesData.value,
  },
});

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