import { defineComponent, watch, ref } from 'vue';

const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const;

export default defineComponent({
  props: PropsType,
  setup(props) {
    const chartRef = ref();
    
    // 颜色配置
    const colorList = {
      inColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          { offset: 0, color: "#1c98e8" },
          { offset: 1, color: "#28f8de" }
        ]
      },
      outColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          { offset: 0, color: "#ff7c7c" },
          { offset: 1, color: "#ffb96e" }
        ]
      },
      inArea: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: "rgba(35,184,210,.2)" },
          { offset: 1, color: "rgba(35,184,210,0)" }
        ]
      },
      outArea: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: "rgba(255,124,124,.2)" },
          { offset: 1, color: "rgba(255,185,110,0)" }
        ]
      }
    };
    
    let options = {};

    watch(
      () => props.cdata,
      (val) => {
        options = {
          title: {
            text: "每日出入库趋势",
            textStyle: {
              color: "#D3D6DD",
              fontSize: 24,
              fontWeight: "normal"
            },
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              let result = params[0].name + '<br/>';
              params.forEach(item => {
                const type = item.seriesIndex === 0 ? '入库' : '出库';
                result += `${item.marker} ${type}: ${item.value}<br/>`;
              });
              return result;
            }
          },
          legend: {
            data: ['入库', '出库'],
            right: 20,
            top: 10,
            textStyle: { color: '#fff' }
          },
          grid: {
            left: 50,
            right: 50,
            bottom: 50,
            top: 100,
            containLabel: true
          },
          xAxis: {
            type: "category",
            axisLine: { lineStyle: { color: "rgba(255,255,255,.5)" } },
            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 },
            data: val.weekCategory
          },
          yAxis: {
            type: "value",
            name: "数量",
            nameTextStyle: { color: "rgba(255,255,255,.5)", fontSize: 14 },
            max: val.maxData,
            splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 }
          },
          series: [
            {
              name: "入库",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 8,
              itemStyle: { color: "#fff" },
              lineStyle: { color: colorList.inColor, width: 3 },
              areaStyle: { color: colorList.inArea },
              data: val.dayInData,
              markLine: {
                silent: true,
                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
                data: [{ type: "average", name: "平均值" }]
              }
            },
            {
              name: "出库",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 8,
              itemStyle: { color: "#fff" },
              lineStyle: { color: colorList.outColor, width: 3 },
              areaStyle: { color: colorList.outArea },
              data: val.dayOutData,
              markLine: {
                silent: true,
                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
                data: [{ type: "average", name: "平均值" }]
              }
            }
          ]
        };
        
        if (chartRef.value) {
          chartRef.value.initChart(options);
        }
      },
      { immediate: true, deep: true }
    );

    return () => {
      return <div>
        <echart ref={chartRef} height="500px" width="100%" />
      </div>;
    };
  }
});
