<template>
  <div class="right-card">
    <m-card title="存栏预测趋势">
      <v-chart ref="vChart" :option="option" :autoresize="true" />
    </m-card>
  </div>
</template>
<script setup>
import { ref } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
import { stockForecastRows } from "../livestockData";

const option = ref({
  title: {
    text: "头",
    left: "5%",
    top: "8%",
    textStyle: {
      color: "#D3F8F2",
      fontSize: 8,
    },
  },
  grid: {
    left: "12%",
    top: "25%",
    width: "82%",
    height: "55%",
  },
  legend: {
    top: "4%",
    icon: "circle",
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      color: "#90979c",
      fontSize: 10,
      lineHeight: 18,
    },
    data: ["预测存栏", "繁殖补充", "出栏扣减"],
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0.2 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
    },
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#435459",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#ffffff",
        fontSize: 10,
        interval: 0,
      },
      data: stockForecastRows.map((item) => item.name),
    },
  ],
  yAxis: {
    type: "value",
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: [2, 2],
        dashOffset: 5,
        color: ["rgba(255, 255, 255, 1)"],
        opacity: 1,
        width: 0.3,
      },
    },
    axisLabel: {
      color: "#8B9EA4",
      fontSize: 9,
    },
  },
  series: [
    {
      name: "预测存栏",
      data: stockForecastRows.map((item) => item.stock),
      type: "line",
      smooth: true,
      showSymbol: false,
      label: {
        show: true,
        position: "top",
        distance: 8,
        color: "#ffffff",
        fontSize: 8,
      },
      lineStyle: {
        shadowColor: "rgba(115, 208, 255, 1)",
        shadowBlur: 18,
        width: 2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(115, 208, 255, 1)" },
          { offset: 1, color: "rgba(18,60,98,1)" },
        ]),
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(25, 255, 236, 0.28)" },
          { offset: 1, color: "rgba(51, 153, 255, 0)" },
        ]),
      },
    },
    {
      name: "繁殖补充",
      data: stockForecastRows.map((item) => item.births),
      type: "line",
      smooth: true,
      showSymbol: false,
      label: {
        show: false,
      },
      lineStyle: {
        shadowColor: "rgba(69, 233, 164, 1)",
        shadowBlur: 16,
        width: 2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#45E9A4" },
          { offset: 1, color: "rgba(19,99,61,1)" },
        ]),
      },
    },
    {
      name: "出栏扣减",
      data: stockForecastRows.map((item) => item.outflow),
      type: "line",
      smooth: true,
      showSymbol: false,
      label: {
        show: false,
      },
      lineStyle: {
        shadowColor: "rgba(255, 200, 89, 0.85)",
        shadowBlur: 16,
        width: 2,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FFC859" },
          { offset: 1, color: "rgba(153, 105, 38, 1)" },
        ]),
      },
    },
  ],
});
</script>

<style lang="scss"></style>
