<template>
  <div id="my_index">
    <div class="viewBar">
      <div v-for="item in list">
        <div class="item">
          <div class="title"
            >{{ item.title }}<span>{{ item.unit }}</span></div
          >
          <div class="count">{{ item.count }}</div>
        </div>
        <div class="icon">
          <img :src="item.icon" />
        </div>
      </div>
    </div>
    <div class="echart_box">
      <div class="left">
        <div>
          <div class="title_box">库总量同比及趋势分析</div>
          <div class="erchats1"></div>
        </div>
        <div>
          <div class="title_box">物料库存周转趋势分析</div>
          <div class="erchats2"></div>
        </div>
      </div>
      <div class="right">
        <div>
          <div class="title_box">在库总量分析</div>
          <div class="erchats3"></div>
        </div>
        <div>
          <div class="title_box">呆滞品总量分析</div>
          <div class="erchats4"></div>
        </div>
        <!-- <div>
          <div class="title_box">在库总量分析</div>
          <div class="erchats5"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import indexApi from '@/api/main/index.js';
  import { dateReg } from 'ele-admin/lib/utils/validate';
  import { factorial } from 'mathjs';

  export default {
    data() {
      return {
        timeR:null,
        list: [
          {
            title: '库存总量',
            key: 'totalInventory',
            count: '',
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '库存周转天数',
            unit: '(本月)',
            key: 'materialTurnoverDays',
            count: '',
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '物料库存周转率',
            unit: '(本月)',
            count: '',
            key: 'materialTurnoverRate',
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '呆滞品总量',
            // unit: '(单位)',
            count: '',
            key: 'totalSlowMovingItems',
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '产成品总量',
            // unit: '(单位)',
            count: '',
            key: 'totalFinishedProducts',
            icon: require('../../../assets/index/Vector@2x.png')
          },
          {
            title: '原材料总量',
            // unit: '(单位)',
            count: '',
            key: 'totalRawMaterials',
            icon: require('../../../assets/index/Vector@2x.png')
          }
        ]
      };
    },
    mounted() {
      // this.initCharts1();
      // this.initCharts2();

      this.init();
      this.timeR = setInterval(() => {
        this.init();
      },86400000);
    },
    beforeDestroy(){
      clearInterval(this.timeR)
    },
    methods: {
      async init() {
        let data = await indexApi.indexQuery();
        let barData = await indexApi.queryList();

        this.list.forEach((item) => {
          item.count = data[item.key];
        });

        this.initCharts3(data.slowMovingItemsAnalysis);
        this.initCircle1(data);
        this.initCharts1(barData);
        this.initCharts2(barData);
      },

      initCharts3(data) {
        var myChart = echarts.init(document.querySelector('.erchats4'));
        let x = data.map((item) => item.name);
        let y = data.map((item) => item.num);
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '个',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                color: '#20BE4B'
              },
              data: y
            }
          ]
        };
        myChart.setOption(option);
      },
      initCircle1(data) {
        var myChart = echarts.init(document.querySelector('.erchats3'));
        let arr = [
          {
            value: data.inspectedQuantity,
            name: '已质检',
            rate: data.inspectedPercentage
          },
          {
            value: data.pendingInspectionQuantity,
            name: '未质检',
            rate: data.pendingInspectionPercentage
          },
          {
            value: data.noInspectionRequiredQuantity,
            name: '无需质检',
            rate: data.noInspectionRequiredPercentage
          }
        ];
        let option = {
          tooltip: {
            trigger: 'item'
          },
          graphic: {
            //图形中间图片
            elements: [
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '25%',
                top: '44%',
                style: {
                  text: '在库总量(台)',
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 12,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              },
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '25%',
                top: '53%',
                style: {
                  text: data.totalInventory,
                  fill: '#000', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 18,
                  color: '#000',
                  fontFamily: 'Microsoft YaHei'
                }
              }
            ]
          },
          legend: {
            top: 'center',
            right: '6%',
            // left:'right',
            type: 'scroll',
            orient: 'vertical',
            itemGap: 15,
            textStyle: {
              rich: {
                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                oneone: {
                  // 设置文字、数学、英语这一列的样式
                  width: 80,
                  color: '#000',
                  fontSize: 12,
                  fontWeight: 'bolder'
                },
                twotwo: {
                  // 设置10分、20分、30分这一列的样式
                  width: 35,
                  color: '#000',
                  fontSize: 12
                },
                threethree: {
                  // 设置百分比这一列的样式
                  width: 20,
                  color: '#000',
                  fontSize: 12
                }
              }
            },
            formatter: (name) => {
              let data = arr.find((item) => item.name == name);
              return `{oneone|${name}}{twotwo|${data?.value}}           {threethree|(${data?.rate}%)}`;
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '75%'],
              center: ['30%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              padAngle: 5,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: arr
            }
          ]
        };
        myChart.setOption(option);
      },

      initCharts1(barData) {
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        console.log(barData, 'barData');
        var myChart = echarts.init(document.querySelector('.erchats1'));
        myChart.setOption({
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '8%'
          },
          legend: {},
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: barData.map((item) => item.month)
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            // {
            //   type: 'value',
            //   name: '2024',
            //   show: false,
            //   position: 'right',
            //   alignTicks: true,
            //   offset: 80,
            //   axisLine: {
            //     show: false
            //   },
            //   axisLabel: {
            //     formatter: '{value} ml'
            //   }
            // },
            {
              type: 'value',
              name: '(单位:pcs)',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '去年同期库存总量',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {
                color: '#3976F1'
              },
              yAxisIndex: 1,
              data: barData.map((item) => item.lastYearTotalInventory)
            },
            {
              name: '本年库存总量',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '20%',
              itemStyle: {
                color: '#5DD07C'
              },
              data: barData.map((item) => item.totalInventory)
            },
            {
              name: '趋势',
              type: 'line',
              itemStyle: {
                color: '#FF9669'
              },
              data: barData.map((item) => item.inventoryTrendRate)
            }
          ]
        });
      },
      initCharts2(barData) {
        var myChart = echarts.init(document.querySelector('.erchats2'));
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '8%'
          },
          legend: {
            // data: ['当年存货周转率', '去年存货周转率', '当年趋势']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: barData.map((item) => item.month)
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            // {
            //   type: 'value',
            //   name: '2024',
            //   show: false,
            //   position: 'right',
            //   alignTicks: true,
            //   offset: 80,
            //   axisLine: {
            //     show: false
            //   },
            //   axisLabel: {
            //     formatter: '{value} ml'
            //   }
            // },
            {
              type: 'value',
              name: '(单位:pcs)',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '本年存货周转率',
              type: 'bar',
              barWidth: '20%',
              itemStyle: {
                color: '#FF9669'
              },
              yAxisIndex: 1,
              data: barData.map((item) => item.materialTurnoverRate)
            },
            {
              name: '去年存货周转率',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '20%',
              yAxisIndex: 1,
              itemStyle: {
                color: '#26ADAD'
              },
              data: barData.map((item) => item.lastYearMaterialTurnoverRate)
            },
            {
              name: '趋势',
              type: 'line',
              itemStyle: {
                color: '#095BFF'
              },
              data: barData.map((item) => item.materialTurnoverTrend)
            }
          ]
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #my_index {
    height: calc(100vh - 96px);
    display: flex;
    width: 100%;
    padding: 10px;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #dbdbdb;
    .viewBar {
      height: 93px;
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      > div {
        flex: 1;
        margin-left: 10px;
        background: linear-gradient(to right, #2d80ee 100%, #e9f2ff 50%);
        border-radius: 8px;
        display: flex;
        padding: 0 20px;
        box-sizing: border-box;
        .item {
          flex: 1;
          display: flex;
          flex-direction: column;
          .title {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
            > span {
              font-size: 12px;
            }
          }
          .count {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 35px;
            color: rgba(255, 255, 255, 1);
          }
        }
        .icon {
          width: 50px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            height: 50px;
            width: 50px;
          }
        }
      }
      > div:first-child {
        margin-left: 0;
      }
    }
    .echart_box {
      display: flex;
      flex: 1;
      .left {
        flex: 5;
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        height: 100%;
        > div:first-child {
          margin-bottom: 10px;
        }
        > div {
          flex: 1;
          background-color: #fff;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          .title_box {
            font-size: 14px;
            padding-bottom: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e8e8;
          }
          > div:last-child {
            flex: 1;
          }
        }
      }
      .right {
        flex: 3;
        display: flex;
        flex-direction: column;
        height: 100%;
        > div {
          flex: 1;
          padding: 10px;
          box-sizing: border-box;
          background-color: #fff;
          margin-bottom: 10px;
          border-radius: 6px;
          display: flex;
          flex-direction: column;
          .title_box {
            font-size: 14px;
            padding-bottom: 10px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e8e8;
          }
          > div:last-child {
            flex: 1;
          }
        }
        > div:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
