<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <el-icon class="el-icon-s-help"></el-icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">二车间</span>
          <dv-decoration-3 class="dv-dec-3"/>
        </div>
      </div>
      <div class="d-flex jc-center">
        <Echart
          :options="options"
          id="centreLeft1Chart"
          height="220px"
          width="260px"
        ></Echart>
      </div>
      <!-- 4个主要的数据 -->
      <div class="bottom-data">
        <div
          v-for="(item, index) in numberDataTwo"
          :key="index"
          class="item-box mt-2"
        >
          <div class="d-flex">
            <!--<span class="coin">￥</span>-->
            <dv-digital-flop class="dv-digital-flop" :config="item.number"/>
          </div>
          <p class="text" style="text-align: center;">
            {{ item.text }}
            <span class="colorYellow">(件)</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Echart from '@/components/echart'
  export default {
    data() {
      return {
        options: {},
        cdata: {
          xData: ["镀膜", "夹层", "包边", "装框"],
          seriesData: [
            {value: 10, name: "镀膜"},
            {value: 13, name: "夹层"},
            {value: 15, name: "包边"},
            {value: 20, name: "装框"}
          ]
        }
      }
    },
    components: {
      Echart
    },
    props:{
      numberDataTwo:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    mounted() {
      this.changeTiming()
    },
    watch: {
      cdata: {
        handler(newData) {
          this.options = {
            color: [
              "#fb7293",
              "#ffdb5c",
              "#9fe6b8",
              "#ff9f7f",
              "#32c5e9",
            ],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
              show: true
            },
            calculable: true,
            legend: {
              orient: "horizontal",
              icon: "circle",
              bottom: 0,
              x: "center",
              data: newData.xData,
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                name: "通过率统计",
                type: "pie",
                radius: [10, 50],
                roseType: "area",
                center: ["50%", "40%"],
                data: newData.seriesData
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      changeTiming() {
        setInterval(() => {
          this.changeNumber()
        }, 3000)
      },
      changeNumber() {
        this.numberDataTwo.forEach((item) => {
          let num = 0;
          item.number.number[0] = 0;
          item.number.number[0] = num;
          item.number = {...item.number}
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  $box-width: 300px;
  $box-height: 410px;

  #centerLeft1 {
    padding: 16px;
    height: $box-height;
    width: 100%;
    border-radius: 10px;

    .bg-color-black {
      height: $box-height - 30px;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
    }

    .dv-dec-3 {
      position: relative;
      width: 100px;
      height: 20px;
      top: -3px;
    }

    .bottom-data {
      .item-box {
        & > div {
          padding-right: 5px;
        }

        font-size: 14px;
        float: right;
        position: relative;
        width: 50%;
        color: #d3d6dd;

        .dv-digital-flop {
          width: 120px;
          height: 30px;
        }

        // 金币
        .coin {
          position: relative;
          top: 6px;
          font-size: 20px;
          color: #ffc107;
        }

        .colorYellow {
          color: yellowgreen;
        }

        p {
          text-align: center;
        }
      }
    }
  }
</style>
