<template>
  <div class="center-cmp">
    <div class="cc-header" v-if="false"> 
      <dv-decoration-1 style="width:200px;height:50px;" />
    </div>

    <div class="cc-details">
      <div style="font-weight: bold;font-size: 40px;">本月总产量</div>
      <div class="card">1</div>
      <div class="card">1</div>
      <div class="card">3</div>
      <div class="card">3</div>
      <div class="card">7</div>
      <div class="card">7</div>
    </div>

    <div class="cc-main-container">
      <div class="ccmc-right">
        <div class="ccmc-title">
          本月工单概况
        </div>
        <!-- <div class="ccmc-items">
          <div class="station-info" v-for="(item, index) in rightData" :key="index">
            <img :src="item.icon" alt="icon" class="station-icon">
            <div class="station-name">{{ item.name }}</div>
            <div class="station-value">{{ item.value }}</div>
          </div>
        </div> -->
       
        <!-- <div class="right-box-items">
          <div class="rbi-info" v-for="(item, index) in rightData" :key="index">
            <img :src="item.icon" alt="icon" class="rbi-icon">
            <div class="rbi-text">
              <div class="rbi-name">{{ item.name }}</div>
              <div class="rbi-value">{{ item.value }}</div>
            </div>
          </div>
        </div> -->
        
        <div class="right-container-new">
          <!-- 第一行 -->
          <div class="first-row">
            <img src="../../img/icons/16.png" class="fc-icon">
            <!-- <div class="first-content">
              <p class="fc-name">{{ rightData[0].name }}</p>
              <p class="fc-value">{{ rightData[0].value }}</p>
            </div> -->
          </div>
          <!-- 第二行 -->
          <div class="second-row">
            <div 
              class="item-card" 
              v-for="(item, index) in leftData" 
              :key="index"
            >
              <img :src="item.icon" class="sc-icon">
              <p class="sc-name">{{ item.name }}</p>
              <p class="sc-value">{{ item.value }}</p>
            </div>
          </div>
        </div>
      </div>
      

      <!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
       <div class="ccmc-middle">
        <PieChart :dataType="dataType"></PieChart>
       </div>
       <div class="ccmc-left">
        <div class="ccmc-title">
          {{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
        </div>
        <div class="new-bar-chart" v-show="dataType !='3'">
          <div id="echarts-new" style="height: 400px;width: 800px;"></div>
        </div>
        <div class="ccmc-items" v-show="dataType=='3'">
          <div class="station-info" v-for="(item, index) in rightData" :key="index">
            <img :src="item.icon" alt="icon" class="station-icon">
            <div class="station-value">{{ item.value }}</div>
            <div class="station-name">{{ item.name }}</div>
          </div>
        </div>
       
      </div>
    

      <!-- <LabelTag :config="labelConfig" /> -->
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'
import PieChart from './pieChart.vue'
import * as echarts from 'echarts';
export default {
  name: 'CenterCmp',
  components: {
    LabelTag,PieChart
  },
  props: { 
    dataType: {
      type: String,
      default: ''
    }
  },
  data () { 
    // 定义原始数据
    const originalLeftData = [
      
      { icon: require(`@/img/icons/12.png`), name: '本月订单数', value: '1120' },
      { icon: require(`@/img/icons/12.png`), name: '本月派工数', value: '600' },
      { icon: require(`@/img/icons/12.png`), name: '本月派工未完成数', value: '800' },
      { icon: require(`@/img/icons/12.png`), name: '本月派工完成率', value: '100%' }
    ];
    const originalLeftData2 = [
      { icon: require(`@/img/icons/1.png`), name: '完成工单数', value: '1120' },
      { icon: require(`@/img/icons/2.png`), name: '生产中工单数', value: '600' },
      { icon: require(`@/img/icons/3.png`), name: '本月生产完成率', value: '100%' }
    ];

    const originalRightData = [
      { icon: require(`@/img/icons/12.png`), name: '保养率', value: 20 },
      { icon: require(`@/img/icons/12.png`), name: '直通率', value: 100 },
      { icon: require(`@/img/icons/12.png`), name: '整机备料率', value: 90 },
      { icon: require(`@/img/icons/12.png`), name: '盖板备料率', value: 85 },
      { icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
    ];
    const originalRightData2 = [
      { icon: require(`@/img/icons/12.png`), name: '水件', value: '12000' },
      { icon: require(`@/img/icons/12.png`), name: '排水阀', value: '8000' },
      { icon: require(`@/img/icons/12.png`), name: '进水阀', value: '6200' },
      { icon: require(`@/img/icons/12.png`), name: '按钮', value: '3300' }
    ];


    return {
      config: {
        data: [
          {
            name: '机芯产量',
            value: 42
          },
          {
            name: '盖板产量',
            value: 58
          },
          {
            name: '盖板产量',
            value: 70
          },
          {
            name: '盖板产量',
            value: 58
          }
        ],
        color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
        lineWidth: 40,
        radius: '55%',
        activeRadius: '60%'
      },
      config1:{
        showValue:true,
        data:[  
          { icon: require(`@/img/icons/12.png`), name: '保养率', value: 20 },
          { icon: require(`@/img/icons/12.png`), name: '直通率', value: 100 },
          { icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: 90 },
          { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: 85 }
        ]
      },

      labelConfig: {
        
        data: ['机芯产量', '盖板产量']
      },

      leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
      rightData: this.dataType == '3'?originalRightData2:originalRightData
    }
  },
  mounted(){
    this.createData();
  },
  methods: {
    createData() {
      // 原始数据（每个柱子的总高度，单位：%）
      const rawData = this.rightData.map(item=>{return item.value});
      const categories = this.rightData.map(item=>{return item.name});

      // 将数据按 10% 分段，生成堆叠数据
      const generateStackData = (value) => {
        const segments = [];
        let remaining = value;
        for (let i = 0; i < 10; i++) { // 最多分成 10 段（100%）
          const segmentValue = remaining >= 10 ? 10 : remaining;
          if (segmentValue <= 0) break;
          segments.push(segmentValue);
          remaining -= segmentValue;
        }
        return segments;
      };

      // 生成堆叠数据系列
      const series = [];
      for (let i = 0; i < 10; i++) { // 最多 10 个堆叠层
        series.push({
          type: 'bar',
          stack: 'total', // 堆叠组名
          data: rawData.map(value => {
            const segments = generateStackData(value);
            return i < segments.length ? segments[i] : 0; // 超出分段返回 0
          }),
          itemStyle: {
            color: `rgba(135, 206, 235, ${i * 0.1+0.2})`, // 从下往上透明度变化,
            borderColor: 'transparent',
            borderWidth: 3,
          },
          barGap: '0%', // 柱子间无间隔
          barCategoryGap: '20%' // 类目间留间隙
        });
      }
      var myChart = echarts.init(document.getElementById('echarts-new'));
      // this.option = {
      //   xAxis: {
      //     type: 'category',
      //     data: this.rightData.map(item=>{return item.name}),
      //     axisLabel: {
      //       fontSize: 18, // 设置 Y 轴字体大小
      //       color: '#fff', // 可选：设置字体颜色
      //     },
      //   },
      //   yAxis: {
      //     type: 'value',
      //     splitLine: {
      //       show: false, // 显示 y 轴辅助线
      //    },
      //    axisLabel: {
      //       fontSize: 25, // 设置 Y 轴字体大小
      //       color: '#fff', // 可选：设置字体颜色
      //       // 只显示偶数的 y 轴标签
      //     },
          
      //   },
      //   series: [
      //     {
      //       data: this.rightData.map(item=>{return item.value}),
      //       type: 'bar',
      //       showBackground: true,
      //       backgroundStyle: {
      //         color: 'rgba(180, 180, 180, 0.2)'
      //       },
      //       barWidth: '60%',
      //       itemStyle: {
      //           borderRadius: [5, 5, 0, 0], // 顶部圆角，模拟切除效果
      //           color: {
      //           type: 'linear', // 线性渐变
      //           x: 0, // 从左到右
      //           y: 0,
      //           x2: 0, // 从下到上
      //           y2: 1,
      //           colorStops: [
      //               { offset: 0, color: '#3399FF' }, // 浅蓝色，起始颜色
      //               { offset: 0.5, color: '#08e5ff' }, // 浅蓝色，起始颜色
                   
      //               { offset: 1, color: '#F4f4f4' }  // 白色，结束颜色
      //           ]
      //       }
      //       }
      //     }
      //   ]
      // };
      
        this.option = {
          xAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
            fontSize: 19, // 设置 Y 轴字体大小
            color: '#fff', // 可选：设置字体颜色
            fontWight:'bold'
          },
        },
        yAxis: {
          type: 'value',
          max: 100,
          // axisLine: { show: false },
          splitLine: {
            show: false, // 显示 y 轴辅助线
          },
          axisLabel: {
            fontSize: 25, // 设置 Y 轴字体大小
            color: '#fff', // 可选：设置字体颜色
            // 只显示偶数的 y 轴标签
          },
        },
        series: series
        }
      myChart.setOption(this.option);
    },
  },
}
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .station-icon {
    width: 190px;
    // height: 80px;
    // margin-bottom: 18px;
  }

  .station-name {
    font-size: 23px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-bottom: 4px;
  }

  .station-value {
    font-size: 30px;
    font-weight: bold;
    color: #08e5ff;
    text-align: center;
  }

  .cc-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }

  .cc-details {
    height: 120px;
    display: flex;
    justify-content: center;
    font-size: 32px;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 70px;
      width: 70px;
      font-size: 45px;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 33%;
      height: 90%;

      .active-ring-name {
        width: 150px;
        font-size: 30px !important;
        font-weight: bold;
        height:100px;
      }
      .dv-digital-flop {
        font-size: 100px;
        // width: 100px;
        // height: 30px;
        font-weight: bold;
      }
    }

    .ccmc-left, .ccmc-right {
      position: relative;
      width: 33%;
      justify-content: center;
      align-items: center;
      background-image: url('./img/bg2.png');
      background-repeat: no-repeat;
      background-size: contain;
      .ccmc-title{
        position: absolute;
        top: 45px;
        left: 120px;
        font-size: 32px;
        font-weight: bold;
      }
      .ccmc-items{
        width: 100%;
        position: absolute;
        box-sizing: border-box;
        top: 120px;
        // left: 50px;
        // padding:0 80px;
        display: flex;
        justify-content: space-around;
        padding-right: 20px;
        .station-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px 0;
        }
      }
      .right-box-items{
        position: absolute;
        top: 140px;
        display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        padding-left: 20px;
        padding-right: 30px;
        .rbi-info{
          width: 50%;
          display: flex;
          align-items: center;
          .rbi-icon{
            width: 180px;
          }
          .rbi-text{
            // margin-top: 40px;
            .rbi-value{
              font-size: 35px;
              color: #08e5ff;
              font-weight: bold;
              text-align: center;
              margin-bottom: 4px;
            }
            .rbi-name{
              font-size: 25px;
              color: #ffffff;
              font-weight: bold;
              text-align: center;
            }
          }
        }
      }
     
    }

    .ccmc-left {
      margin-top: -100px;
    }

    .ccmc-right {
      margin-top: -100px;
    }
  }

  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  .right-container-new {
    position: absolute;
    top: 130px;
    width: 100%;
    display: flex;
    // flex-direction: column;
    // gap: 20px;
    padding: 20px;
    p{margin: 0;}
      .first-row {
          display: flex;
          align-items: center;
          // gap: 15px;
          // padding: 15px;
        }

        .first-content {
          display: flex;
          flex-direction: column;
        }

        .second-row {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-between;
          gap: 15px;
          padding: 0 70px 0 20px;
        }

        .item-card {
          width: 175px;
          // flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 15px;
          background-image: linear-gradient(
            to bottom,
            rgba(33, 150, 243, 0.15),  /* 蓝色透明度15% */
            rgba(158, 158, 158, 0.15)  /* 灰色透明度15% */
          );
          border: none; /* 移除原有边框 */
          box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加柔和阴影提升层次 */
          border-radius:20px;
          }

        .fc-icon {
          // padding: 20px;
          width: 300px;
          height: 300px;
          object-fit: cover;
        }
        .fc-name{
          font-size: 40px;
          color: #ffffff;
          font-weight: bold;
        }
        .fc-value{
          font-size: 60px;
          text-align: center;
          color: #08e5ff;
          font-weight: bold;
        }
        .sc-name{
          font-size:20px;
          color: #ffffff;
          font-weight: bold;
        }
        .sc-value{
          font-size: 35px;
          text-align: center;
          color: #08e5ff;
          font-weight: bold;
        }
        .sc-icon {
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 6px;
        }
    }
  .new-bar-chart{
    position: absolute;
    top: 110px;
    left: 30px;
  }
    
}
</style>