<!-- @format -->

<script>
  import { defineComponent } from 'vue';
  import BaseBar from './BaseGauge.vue';

  export default defineComponent({
    name: 'SimpleGauge',
    extends: BaseBar,
    props: {
      datas: {
        type: Array,
        required: true,
      },
      min: {
        type: Number,
        required: true,
      },
      max: {
        type: Number,
        required: true,
      },
      progress: {
        type: Number,
        required: true,
      },
      label: {
        type: String,
        default: '',
      },
      color: {
        type: String,
        default: '#73FBFD',
      },
      textColor: {
        type: String,
        default: '#C0FAFF',
      },
    },
    data() {
      return {};
    },
    computed: {},
    created() {},
    mounted() {
      let optionData = this.optionHandle();

      this.setOption(optionData);
      this.renderChart();
    },
    methods: {
      optionHandle() {
        let _this = this;
        let option = {
          series: [
            {
              radius: '80%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                lineStyle: {
                  color: [[1, _this.color]],
                  width: 2,
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            {
              type: 'gauge',
              min: _this.min,
              max: _this.max,
              radius: '75%',
              splitNumber: 12,
              itemStyle: {
                color: _this.color,
              },
              center: ['50%', '50%'],
              progress: {
                show: true,
                width: _this.progress,
                itemStyle: {
                  color: _this.color,
                  opacity: 0.7,
                },
              },
              axisLine: {
                show: false,
              },
              pointer: {
                icon: 'path://M1.6861, 33.5189L1.33874, 1.07101L2.2249, 1.06152L2.57226, 33.5094L1.6861, 33.5189Z,M0.649407, 20.0229L0.760354, 0.860351L3.41895, 0.875744L3.308, 20.0382L0.649407, 20.0229Z',
                // keepAspect:true,
                // icon:'path://M7.15528, 44.1242C8.9665, 44.1242, 10.4348, 42.656, 10.4348, 40.8447C10.4348, 39.0335, 8.9665, 37.5652, 7.15528, 37.5652C5.34406, 37.5652, 3.87578, 39.0335, 3.87578, 40.8447C3.87578, 42.656, 5.34406, 44.1242, 7.15528, 44.1242ZM7.15528, 48C11.107, 48, 14.3106, 44.7965, 14.3106, 40.8447C14.3106, 36.893, 11.107, 33.6895, 7.15528, 33.6895C3.20353, 33.6895, 0, 36.893, 0, 40.8447C0, 44.7965, 3.20353, 48, 7.15528, 48Z,M6.70801, 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',
                // icon:'path://M7.15528 44.1242C8.9665 44.1242 10.4348 42.656 10.4348 40.8447C10.4348 39.0335 8.9665 37.5652 7.15528 37.5652C5.34406 37.5652 3.87578 39.0335 3.87578 40.8447C3.87578 42.656 5.34406 44.1242 7.15528 44.1242ZM7.15528 48C11.107 48 14.3106 44.7965 14.3106 40.8447C14.3106 36.893 11.107 33.6895 7.15528 33.6895C3.20353 33.6895 0 36.893 0 40.8447C0 44.7965 3.20353 48 7.15528 48Z,M6.70801 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',

                length: '75%',
              },
              // anchor:{
              //   show: true,
              //   size:6,
              //   icon:'circle',
              //   itemStyle:{
              //     color:'#fff'
              //   }
              // },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              detail: {
                color: _this.textColor,
                fontSize: 26,
                fontWeight: 400,
                offsetCenter: [0, '70%'],
                formatter: function (value) {
                  //   '{80|' + value.toFixed(0) + '}{unit|%}';
                  return `${value}{unit|${_this.label}}`;
                },
                rich: {
                  unit: {
                    fontSize: 9,
                    color: _this.textColor,

                    padding: [0, 0, -15, 3],
                  },
                },
              },
              data: _this.datas,
            },
            {
              radius: '58%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                // 坐标轴线
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: [[1, _this.color]],
                  width: 2,
                  opacity: 0.2,
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            {
              radius: '58%',
              type: 'gauge',
              detail: { show: false },
              axisLine: {
                lineStyle: {
                  color: [[1, _this.color]],
                  width: 16,
                  opacity: 0.2,
                },
              },
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              pointer: {
                show: false,
              },
            },
            {
              //内圆1
              type: 'pie',
              radius: '25%',
              center: ['50%', '50%'],
              emphasis: {
                disabled: true,
              },
              animation: false,
              itemStyle: {
                color: '#6DB9C6',
                opacity: 0.2,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
            {
              //内圆1
              type: 'pie',
              radius: '20%',
              emphasis: {
                disabled: true,
              },
              animation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: '#6DB9C6',
                opacity: 0.2,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
            {
              //内圆1
              type: 'pie',
              radius: ['8%', '4%'],
              emphasis: {
                disabled: true,
              },
              animation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: '#6DB9C6',
                opacity: 1,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
            {
              //内圆1
              type: 'pie',
              radius: '4%',
              emphasis: {
                disabled: true,
              },
              animation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: '#274348',
                opacity: 1,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              label: {
                show: false,
              },
              tooltip: {
                show: false,
              },
              data: [100],
            },
          ],
        };
        return option;
      },
    },
  });
</script>
