<template>
  <div class="rbottom-container">
    <div class="title">{{ tLang('device', '检测结果占比') }}</div>
    <div class="content">
      <div class="chart">
        <v-chart autoresize :option="options" theme="dark" style="width: 100%;height: 100%;" />
      </div>
      <div class="rate-info">
        <div class="ok flex-column">
          <span>OK</span>
          <span class="rate">{{ rate.okRate+'%('+props.data.ok + '/'+rate.total+')' }} </span>
        </div>
        <div class="ng flex-column">
          <span>NG</span>
          <span class="rate">{{ rate.ngRate+'%('+props.data.ng + '/'+rate.total+')' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'



const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        ok: 0,
        ng: 0
      }
    }
  }
})
const {proxy} = getCurrentInstance()
let rate = reactive({
  okRate: 0,
  ngRate: 0,
  total: 0
})
let options = computed(() => {
  let total = props.data.ok + props.data.ng

  rate.okRate = total == 0 ? 0 :((props.data.ok / total) * 100).toFixed(1)
  rate.ngRate = total == 0 ? 0 :100 - rate.okRate
  rate.total = total
    return {
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     top: '5%',
        //     left: 'center'
        // },
        backgroundColor: 'transparent',
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: 40,
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: [
                    { value: props.data.ok, name: 'OK',itemStyle: {color: '#38D380'} },
                    { value: props.data.ng, name: 'NG',itemStyle: {color: '#F05A5A'} },
                ]
            }
        ]
    }
})
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #cfcfcf;

}

.content {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.rbottom-container {
  width: 100%;
  height: 100%;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .chart {
      width: 100%;
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rate-info {
      width: 100%;
      height: 30%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ok {
        width: 40%;
        height: 80%;
        background: #173027;
        margin: 0 10px;
        color: #38D380;
      }
      .ng {
        width: 40%;
        height: 80%;
        background: #372022;
        margin: 0 10px;
        color: #F05A5A;
      }
      .flex-column {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: 12px;
        .rate {
          color: #cfcfcf;
        }
      }
    }
  }
}
</style>
