<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">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-middle">
        <PieChart :dataType="dataType"></PieChart>
       </div>

      <div class="ccmc-right">
        <div class="ccmc-title">
          {{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
        </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 rightData" 
              :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>

      <!-- <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%' },
      { icon: require(`@/img/icons/3.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: '98%' },
      { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '85%' }
    ];
    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%'
      },

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

      leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
      rightData: this.dataType == '3'?originalRightData2:originalRightData
    }
  }
}
</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 {
        font-size: 25px !important;
        font-weight: bold;
        height:80px;
      }
    }

    .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:25px;
          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;
        }
    }

    
}
</style>