<!--
 描述: 酷屏首页模板
 作者: anni
 日期: 2024-10-30
-->

<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <div class="sn-container"> 
        <div class="sn-content"> 
          <div class="sn-title" @click="goHome">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日产量</div> 
          <div class="sn-body">
            <div class="chartsdom" id="chart_ptrend"></div>
          </div>
        </div>
      </div>   
    </div>
  </div>
</template>

<script>
import { getCountDay } from "@/api/product/dashboard.js";
import { timeFormateWeek } from "@/utils/timeFormate";

export default {
  name: "DailyOutput",
  data() {
    return {
      name: '',
      option: null,
      dataMap: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      data: [],
      allData: [],
      time: '',
      timer: null,
    }
  },

  mounted() {
    this.initChart();
  },

  methods: {
    goHome() {
      if (process.env.NODE_ENV === 'production') {
        this.$router.push({ path: '/admin/index' });
      } else {
        this.$router.push({ path: '/' });
      }
    },

    /** 初始化图表 */
    async initChart() {
      try {
        await this.getData();
        this.time = timeFormateWeek(new Date());
      } catch (error) {
        console.error('初始化图表失败:', error);
      }
    },

    /** 获取列表数据 */
    async getData() {
      try {
        const res = await getCountDay();
        
        if (res && res.data) {
          this.allData = Object.keys(res.data).map((lineName) => {
            const lineData = res.data[lineName];
            
            // 检查产线数据是否有效
            const hasValidData = this.dataMap?.some(week => 
              lineData[week] && typeof lineData[week] === 'object' && lineData[week]['产量'] > 0
            );
            
            if (hasValidData) {
              return {
                name: lineName,
                data: this.dataMap.map(week =>
                  lineData[week]?.['产量'] ?? 0
                )
              };
            } else {
              return null;
            }
          }).filter(item => item !== null); // 过滤掉无效数据
                    
          if (this.allData.length > 0) {
            this.name = '智能产线';
            this.getEchart();
            // this.allData = this.allData; // 默认显示全部产线
          }
        }
      } catch (e) {
        console.error('获取数据失败:', e);
      }
    },

    /** 数据加载处理 */
    loadData(val) {
      if (!val) {
        this.allData = this.allData;
        return;
      }
      this.allData = this.allData.filter(item => item.name === val);
    },

    getEchart() {
      const myChart = this.$echarts.init(document.getElementById('chart_ptrend'));

      let colorArr = ['#fffa15', '#179bf1', '#ff9829', '#7adfa0', '#ff7b7b', '#a17bff', '#ffd700', '#00bfff'];
      
      // 构建多条产线的 series
      const series = this.allData.map((item, idx) => {
        return {
          name: item.name,
          type: 'bar',
          data: item.data,
          barWidth: 20,
          legendHoverLink: true,
          label: {
            show: false,
            position: 'top',
            color: '#000',
            fontSize: 14,
            fontWeight: 800
          },
          itemStyle: {
            barBorderRadius: [8, 0],
            color: colorArr[idx % colorArr.length]
          }
        };
      });

      this.option = {
        grid: {
          top: '20%',
          bottom: '10%'
        },
        xAxis: [{
          type: 'category',
          axisLabel: {
            margin: 40,
            interval: 0,
            fontSize: 34,
            color: '#E2E5FF'
          },
          data: this.dataMap,
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E2E5FF',
            }
          },
        }],
        yAxis: [{
          type: 'value',
          name: '双',
          nameTextStyle: {
            fontSize: 34
          },
          axisLabel: {
            margin: 20,
            interval: 0,
            fontSize: 32,
            color: '#E2E5FF'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E2E5FF'
            }
          }
        }],
        legend: {
          show: true,
          data: Array.isArray(this.allData) ? this.allData.map(item => item.name) : [],
          top: 10,
          textStyle: {
            color: '#E2E5FF',
            fontSize: 32
          }
        },
        series: series
      };

      // myChart.setOption({
      //   tooltip: { trigger: 'axis' },
      //   legend: { data: Array.isArray(this.allData) ? this.allData.map(item => item.name) : [], top: 10 },
      //   grid: { top: '20%', bottom: '20%' },
      //   xAxis: [{
      //     type: 'category',
      //     axisLabel: { margin: 10, interval: 0, fontSize: 14, color: '#222' },
      //     data: this.xData,
      //     axisLine: { show: true, lineStyle: { color: '#222' } }
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     name: '双',
      //     nameTextStyle: { fontSize: 14 },
      //     axisLabel: { margin: 10, interval: 0, fontSize: 14, color: '#222' },
      //     axisLine: { show: true, lineStyle: { color: '#222' } }
      //   }],
      //   series
      // }, true);
      myChart.setOption(this.option, true);
      window.addEventListener('resize', () => myChart.resize());
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  height: 100vh !important;
  width: 100% !important;
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

.sn-container {
  position: absolute;
  width: 100vw; 
  height: 100vh;
  border: 2px solid rgba(92,255,255,0.1);
  background: rgba(10,106,255,0.1) url(../../assets/images/wg.png) repeat 50% 50% !important;
  background-blend-mode: screen;
  overflow: visible;

  .sn-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    .sn-title {
      cursor: pointer;
      position: absolute;
      height: 50px;
      font-size: 50px;
      color: #7becff;
      line-height: 50px;
      padding: 0 0 0 30px;
      left: 26px;
      right: 10px;
      top: 20px;
      
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -7px;
        width: 20px;
        height: 20px;
        background: url(../../assets/images/sn-title.png) no-repeat 0% 0%;
      }
    }

    .sn-body {
      position: absolute;
      top: 120px;
      left: 0;
      right: 0;
      bottom: 0;
      
      .chartsdom {
        width: 100%;
        height: 80vh;
        // min-height: 400px; /* 确保最小高度 */
      }
    }
  }
}

.wrap {
  transform-origin: 0px 0px 0px 0px;
  transform: none !important;
  background: url(../../assets/images/bj.jpg) no-repeat;
  background-size: contain;
  background-position: 50% 0;
  background-color: rgb(0, 0, 0);
  min-width: auto;
  width: 1920px;
  min-height: auto;
  height: 1080px;
  overflow: hidden;
}
</style>