<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>本月总产量</div>
      <div class="card">1</div>
      <div class="card">1</div>
      <div class="card">3</div>
      <div class="card">7</div>
    </div>

    <div class="cc-main-container">
      <div class="ccmc-left">
        <div class="ccmc-title">
            测试数据可视化模型
        </div>
        <div class="ccmc-items">
          <div class="station-info" v-for="(item, index) in leftData" :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>

      <dv-active-ring-chart class="ccmc-middle" :config="config" />

      <div class="ccmc-right">
        <div class="ccmc-title">
          测试数据可视化模型2
        </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> -->
        <PieChart></PieChart>
        
      </div>

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

<script>
import LabelTag from './LabelTag'
import PieChart from './pieChart.vue'
export default {
  name: 'CenterCmp',
  components: {
    LabelTag,PieChart
  },
  props: { 
    dataType: {
      type: String,
      default: ''
    }
  },
  data () { 
    // 定义原始数据
    const originalLeftData = [
      { 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: '60%' }
    ];

    const originalRightData = [
      { icon: require(`@/img/icons/6.png`), name: '今天产量', value: '60' },
      { icon: require(`@/img/icons/7.png`), name: '直通率', value: '93%' },
      { icon: require(`@/img/icons/8.png`), name: '今日不良数', value: '2' }
    ];

    // 将数值加倍（支持多次加倍）
    const doubleValue = (value) => {
      if (typeof value === 'string' && !isNaN(value)) {
        return (parseFloat(value) * 2).toString();
      } else if (typeof value === 'string' && value.includes('%')) {
        return `${(parseFloat(value) * 2)}%`;
      }
      return value;
    };

    // 第一次加倍
    const doubledLeftData = originalLeftData.map(item => ({
      ...item,
      value: doubleValue(item.value)
    }));

    const doubledRightData = originalRightData.map(item => ({
      ...item,
      value: doubleValue(item.value)
    }));

    // 第二次加倍
    const quadrupledLeftData = doubledLeftData.map(item => ({
      ...item,
      value: doubleValue(item.value)
    }));

    const quadrupledRightData = doubledRightData.map(item => ({
      ...item,
      value: doubleValue(item.value)
    }));

    return {
      config: {
        data: [
          {
            name: '机芯缺陷占比',
            value: 42
          },
          {
            name: '盖板缺陷占比',
            value: 58
          }
        ],
        color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
        lineWidth: 30,
        radius: '55%',
        activeRadius: '60%'
      },

      labelConfig: {
        data: ['机芯缺陷占比', '盖板缺陷占比']
      },

      leftData: quadrupledLeftData,
      rightData: quadrupledRightData
    }
  }
}
</script>

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

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

  .station-name {
    font-size: 25px;
    color: #0777e0;
    text-align: center;
    margin-bottom: 4px;
  }

  .station-value {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    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 {
        font-size: 20px !important;
      }
    }

    .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-between;
        .station-info {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px 0;
        }
      }
     
    }

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

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

  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>