<template>
  <div class="business">
    <div class="business-left">
      <custom-echart-water-droplet width="100%" height="100%" :option="state.option" />
      <div class="business-title">证件齐全率</div>
    </div>
    <div class="business-right">
      <div class="business-title">临期预警</div>
      <ul class="business-info">
        <li class="success">
          <b>正常</b>
          <span>253家</span>
        </li>
        <li class="warning">
          <b>临期</b>
          <span>5家</span>
        </li>
        <li class="danger">
          <b>已过期</b>
          <span>0家</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { isEmpty } from '@/utils';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const state = reactive({
  option: {
    backgroundColor: 'transparent', //背景色
    series: [
      {
        name: '',
        type: 'liquidFill',
        radius: '80%',
        center: ['50%', '50%'],
        backgroundStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(220, 255, 255, 0.3)', // 中心半透明白
              },
              {
                offset: 0.7,
                color: 'rgba(0, 231, 240, 0.2)', // 中间荧光青
              },
              {
                offset: 1,
                color: 'rgba(0, 150, 200, 0.3)', // 外围高饱和科技青
              },
            ],
            globalCoord: false,
          },
          blur: 10, // 模糊半径
        },
        data: [],
        amplitude: 12, //水波振幅
        label: {
          position: ['50%', '45%'],
          // formatter: 0.3998 * 100 + '%', //显示文本,
          textStyle: {
            fontSize: '20px', //文本字号,
            color: '#fff',
          },
        },
        outline: {
          // 圆圈配置
          borderDistance: 2,
          itemStyle: {
            borderWidth: 2,
            borderColor: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(71, 202, 219, 0.5)',
                },
                {
                  offset: 0.6,
                  color: 'rgba(45, 209, 185, 0.5)',
                },
                {
                  offset: 1,
                  color: 'rgba(13, 204, 163, 0.5)',
                },
              ],
              globalCoord: false,
            },
          },
        },
        itemStyle: {
          opacity: 1, //水的透明度
          // 水波配置
          color: {
            type: 'linear', // 线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#6af7e8' }, // 更亮的蓝色
              // { offset: 0.7, color: '#5fcbc1' },
              { offset: 1, color: '#55e7ff' },
            ],
            global: false, // 默认为 false
          },
        },
      },
    ],
  },
});

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      // 设置水波纹位置
      state.option.series[0].data = [val.percent + 0.05, val.percent]; //设置水的数量
      state.option.series[0].label.formatter = val.percent * 100 + '%'; //显示文本
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.business {
  width: 100%;
  height: 100%;
  @include flex-row();

  &-title {
    width: 160px;
    margin: 0 auto;
    height: 32px;
    line-height: 26px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 0px 10px 0px #01eeff;
    background: url('@/assets/images/business/bg_title.png');
    background-repeat: no-repeat;
    background-size: contain;
    text-shadow:
      0 0 10px #01eeff,
      0 0 20px #01eeff,
      0 0 30px #01eeff,
      0 0 40px #01eeff;
  }

  &-left,
  &-right {
    @include flex-column();
    flex: 1;
  }

  &-info {
    width: 100%;
    @include flex-column();
    text-align: center;

    li {
      @include flex-column();
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      margin-top: 16px;

      b {
        margin-bottom: 10px;

        &::before {
          display: inline-block;
          content: '';
          width: 12px;
          height: 12px;
          border-radius: 6px;
          margin-right: 10px;
        }
      }

      &.success {
        span {
          color: #02fd94;
        }
        b {
          &::before {
            background-color: #02fd94;
          }
        }
      }
      &.warning {
        span {
          color: #fef906;
        }
        b {
          &::before {
            background-color: #fef906;
          }
        }
      }
      &.danger {
        span {
          color: #fc0003;
        }
        b {
          &::before {
            background-color: #fc0003;
          }
        }
      }
    }
  }
}
</style>
