<template>
  <PageWrapper dense fixedHeight contentFullHeight>
    <div class="h-full bg-white rounded-2xl py-4">
      <ScrollContainer viewClass="h-full" class="h-full px-4">
        <div class="mumber-box">
          <div class="mumber" v-for="(it, index) in data.Statistics" :key="index">
            <div class="mum-left">
              <img class="index-img" :src="'/src/assets/erp/index-icon' + (index + 1) + '.svg'" />
            </div>
            <div class="mum-right">
              <div class="mum-title">{{ it.name }}（{{ it.unit }}）</div>
              <div class="mum" :style="{ color: data.colors[index] }">{{ it.num }}</div>
              <div class="mum-than">
                {{ index > 1 ? '环比' : '同比' }}&nbsp;&nbsp;&nbsp;&nbsp;{{ it.pecent }}%
                <Icon
                  :icon="
                    it.isUp ? 'ant-design:caret-up-outlined' : 'ant-design:caret-down-outlined'
                  "
                  :color="it.isUp ? '#3dba84' : '#ee3b3b'"
                  :size="14"
                  class="icon"
                />
              </div>
            </div>
          </div>
        </div>
        <a-row :gutter="10" class="!m-0">
          <a-col :span="7">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">月入库单分析</span>
              </div>
              <div class="item" ref="homePieChart"></div>
            </div>
          </a-col>
          <a-col :span="11">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">入库数量增长趋势</span>
              </div>
              <div class="item" ref="homeLine1Chart"></div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">预警类型占比</span>
              </div>
              <div class="item" ref="homePieChart2"></div>
            </div>
          </a-col>
          <a-col :span="7">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">月出库单分析</span>
              </div>
              <div class="item" ref="homeRadarChart"></div>
            </div>
          </a-col>
          <a-col :span="11">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">出库数量增长趋势</span>
              </div>
              <div class="item" ref="homeLineChart"></div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="box-bg">
              <div class="box-bg-title">
                <span class="title-text">在库原材料占比</span>
              </div>
              <div class="item" ref="homePieChart3"></div>
            </div>
          </a-col>
        </a-row>
      </ScrollContainer>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, nextTick, reactive, ref, unref, markRaw } from 'vue';
  import {
    getDataInfo,
    getDocInfo,
    getDocOutInfo,
    getTrendInfo,
    getTrendOutInfo,
    getWarnInfo,
    getMaterialsInfo,
  } from '/@/api/erp/report/inventory';
  import Icon from '/@/components/Icon/index';
  import * as echarts from 'echarts';
  import { PageWrapper } from '/@/components/Page';
  import { ScrollContainer } from '/@/components/Container/index';
  const data = reactive({
    colors: ['#5E95FF', '#00CACF', '#FF9100', '#995EFF', '#5E6EFF'],
    Statistics: [] as any[],

    bar2Option: {
      color: ['#5E95FF', '#00CACF', '#5E6EFF', '#995EFF', '#2C8DD6'],
      title: {
        text: '单位：单',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
          lineHeight: 30,
        },
      },
      legend: {
        type: 'scroll',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        left: 90,
        textStyle: {
          color: '#85878e',
          fontSize: 12,
          lineHeight: 30,
        },
      },
      grid: {
        left: 10,
        right: 40,
        bottom: 20,
        containLabel: true,
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: [] as any[],
      },
      series: [] as any[],
    },

    line1Option: {
      color: ['#00CACF', '#995EFF', '#FF8080', '#5E95FF', '#E8D316', '#FF9100'],
      title: {
        text: '单位：万元',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        formatter: (params) => {
          let str = '';
          params.forEach((o) => {
            str +=
              o.marker +
              '<span style="display:inline-flex;justify-content: space-between;width:138px;color:#fff">' +
              o.seriesName +
              '<span>' +
              o.data +
              '万元</span></span><br/>';
          });
          return str;
        },
      },
      legend: {
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 20,
        right: 20,
        textStyle: {
          color: '#85878e',
        },
        data: [] as any[],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [] as any[],
      },
      yAxis: {
        type: 'value',
      },
      series: [] as any[],
    },

    // 占比饼图
    pie2Option: {
      color: ['#5E95FF', '#FF9100', '#995EFF', '#00CACF'],
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        textStyle: {
          color: '#fff',
        },
        formatter: '{b}<br/>{c}' + '条' + ' ({d}%)',
      },
      legend: {
        bottom: '10%',
        left: 'center',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        textStyle: {
          color: '#85878e',
        },
      },
      series: {
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '38%'],
        avoidLabelOverlap: false,
        // selectedMode: 'single',

        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold',
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        labelLine: {
          show: false,
        },
        data: [] as any[],
      },
    },

    barOption: {
      color: ['#5E95FF', '#00CACF', '#5E6EFF', '#995EFF', '#2C8DD6'],
      title: {
        text: '单位：单',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
          lineHeight: 30,
        },
      },
      legend: {
        type: 'scroll',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
        left: 90,
        textStyle: {
          color: '#85878e',
          fontSize: 12,
          lineHeight: 30,
        },
      },
      grid: {
        left: 10,
        right: 40,
        bottom: 20,
        containLabel: true,
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: [] as any[],
      },
      series: [] as any[],
    },

    // 折线图
    lineOption: {
      color: ['#00CACF', '#995EFF', '#FF8080', '#5E95FF', '#E8D316', '#FF9100'],
      title: {
        text: '单位：万元',
        left: 20,
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 12,
        },
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(51, 51, 51, 0.7)',
        formatter: (params) => {
          let str = '';
          params.forEach((o) => {
            str +=
              o.marker +
              '<span style="display:inline-flex;justify-content: space-between;width:138px;color:#fff">' +
              o.seriesName +
              '<span>' +
              o.data +
              '万元</span></span><br/>';
          });
          return str;
        },
      },
      legend: {
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 20,
        right: 20,
        textStyle: {
          color: '#85878e',
        },
        data: [] as any[],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [] as any[],
      },
      yAxis: {
        type: 'value',
      },
      series: [] as any[],
    },

    // 饼图

    pie3Option: {
      color: ['#FF8080', '#9863C1', '#FF9100', '#5E95FF', '#00CACF'],
      series: {
        name: '',
        type: 'pie',
        radius: '50%',
        selectedMode: 'single',
        center: ['50%', '48%'],
        label: {
          color: '#6e7079',
          overflow: 'none',
          formatter: '{b} {d}%\n{c}',
        },
        data: [] as any[],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    },
  });

  const homePieChart = ref<HTMLDivElement>();
  const homePieChart2 = ref<HTMLDivElement>();
  const homePieChart3 = ref<HTMLDivElement>();
  const homeLine1Chart = ref<HTMLDivElement>();
  const homeRadarChart = ref<HTMLDivElement>();
  const homeLineChart = ref<HTMLDivElement>();

  onMounted(async () => {
    let res = await getDataInfo();
    data.Statistics = res || [];
    let res1 = await getDocInfo();
    res1.forEach((o, i) => {
      let arr: any[] = [];
      o.data.forEach((k: any) => {
        arr.push(k.value);
        if (i == 1) data.bar2Option.yAxis.data.push(k.name);
      });
      let obj = {
        name: o.name,
        type: 'bar',
        stack: 'total',
        label: {
          show: true,
          color: '#fff',
        },
        emphasis: {
          focus: 'series',
        },
        data: arr,
      };
      data.bar2Option.series.push(obj);
    });
    let res2 = await getWarnInfo();
    res2.forEach((o, i) => {
      if (i === 0) {
        data.pie2Option.series.data.push({
          value: o.value,
          name: o.name,
          label: {
            show: false,
            position: 'center',
            normal: {
              show: true,
              formatter: '预警类型',
              position: 'center',
              fontSize: 16,
              color: '#5E95FF',
              fontWeight: 'bold',
            },
          },
        });
      } else {
        data.pie2Option.series.data.push({
          value: o.value,
          name: o.name,
          label: {
            show: false,
            position: 'center',
            normal: {
              show: false,
            },
          },
        });
      }
    });
    let res3 = await getMaterialsInfo();
    data.pie3Option.series.data = res3;
    data.pie3Option.series.data[0].selected = true;
    let res4 = await getDocOutInfo();
    if (res4) {
      res4.forEach((o, i) => {
        let arr: any[] = [];
        o.data.forEach((k: any) => {
          arr.push(k.value);
          if (i == 1) data.barOption.yAxis.data.push(k.name);
        });
        let obj = {
          name: o.name,
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
            color: '#fff',
          },
          emphasis: {
            focus: 'series',
          },
          data: arr,
        };
        data.barOption.series.push(obj);
      });
    }
    let res5 = await getTrendInfo();
    res5.forEach((o, i) => {
      data.line1Option.legend.data.push(o.name);
      let arr: any[] = [];
      o.data.forEach((k: any) => {
        arr.push(k.value);
        if (i == 1) data.line1Option.xAxis.data.push(k.name);
      });
      let obj = {
        name: o.name,
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        data: arr,
      };
      data.line1Option.series.push(obj);
    });
    let res6 = await getTrendOutInfo();
    res6.forEach((o, i) => {
      data.lineOption.legend.data.push(o.name);
      let arr: any[] = [];
      o.data.forEach((k: any) => {
        arr.push(k.value);
        if (i == 1) data.lineOption.xAxis.data.push(k.name);
      });
      let obj = {
        name: o.name,
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        data: arr,
      };
      data.lineOption.series.push(obj);
    });

    nextTick(() => {
      let myChart = markRaw(echarts.init(unref(homePieChart) as HTMLDivElement));
      myChart.setOption(data.bar2Option, true);
      myChart.resize(); //显示区域大小发生改变更新图表

      let myChart2 = markRaw(echarts.init(unref(homePieChart2) as HTMLDivElement));
      myChart2.setOption(data.pie2Option, true);
      myChart2.resize(); //显示区域大小发生改变更新图表

      let myChart3 = markRaw(echarts.init(unref(homePieChart3) as HTMLDivElement));
      myChart3.setOption(data.pie3Option, true);
      myChart3.resize(); //显示区域大小发生改变更新图表

      let myChart4 = markRaw(echarts.init(unref(homeLine1Chart) as HTMLDivElement));
      myChart4.setOption(data.line1Option, true);
      myChart4.resize(); //显示区域大小发生改变更新图表

      let myChart5 = markRaw(echarts.init(unref(homeRadarChart) as HTMLDivElement));
      myChart5.setOption(data.barOption, true);
      myChart5.resize(); //显示区域大小发生改变更新图表

      let myChart6 = markRaw(echarts.init(unref(homeLineChart) as HTMLDivElement));
      myChart6.setOption(data.lineOption, true);
      myChart6.resize(); //显示区域大小发生改变更新图表
    });
  });
</script>

<style lang="less" scoped>
  .title-chose {
    float: right;
    margin-right: 20px;

    span {
      text-align: center;
      padding: 0 12px;
      display: inline-block;
      color: #333;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      cursor: pointer;
      margin-left: 10px;

      &.cur,
      &:active {
        background-color: #5e95ff;
        color: #fff;
      }
    }
  }

  .box-bg {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);

    .box-bg-title {
      border-bottom: 1px solid #eee;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .title-text {
      padding: 0 15px;
    }

    .item {
      padding: 10px 10px 0;
      height: 312px;
    }
  }

  .mumber-box {
    margin: 2px 0 10px;
    display: flex;
    justify-content: space-between;

    .mumber {
      padding: 20px;
      box-sizing: border-box;
      margin: 0 5px;
      flex: 1;
      height: 120px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);
      border-radius: 5px;

      .mum-left {
        float: left;
        width: 24%;
        margin-top: 6px;

        .index-img {
          display: inline-block;
          width: 100%;
        }
      }

      .mum-right {
        margin-left: 6%;
        float: left;
        width: 70%;

        .mum-title {
          font-size: 14px;
        }

        .mum {
          font-size: 24px;
          font-weight: bolder;
          line-height: 40px;
        }

        .mum-than {
          font-size: 14px;

          .icon {
            padding-left: 8px;
          }
        }
      }
    }
  }

  .ant-col {
    margin-bottom: 10px;
  }
</style>
