<template>

<!--    -->
<div class="partA">
  <rotate-part>
  </rotate-part>

  <div class="gif_bg">
    <img src="@/assets/img/rote.png">
  </div>
</div>

<!--    -->
<div class="partB">
  <div class="q1box qqbox">
<!--    液体球-->
    <div ref="q1" style="width: 100%;height: 90px;"></div>
    <svg width="100%" height="80">
      <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#03AEFD" />
        <stop offset="10%" stop-color="#AEFFF3" />
      </linearGradient>
      <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常满意</text>
      <text x="50%" y="40" text-anchor="middle" font-weight="bold"  font-size="16" fill="url(#gradient)">{{list['非常满意']}}</text>
    </svg>
  </div>
  <div class="q2box qqbox">
<!--    液体球-->
    <div ref="q2" style="width: 100%;height: 90px;"></div>
    <svg width="100%" height="100">
      <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#03AEFD" />
        <stop offset="10%" stop-color="#AEFFF3" />
      </linearGradient>
      <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">满意</text>
      <text x="50%" y="40" text-anchor="middle" font-weight="bold"  font-size="16" fill="url(#gradient)">{{list['满意']}}</text>
    </svg>
  </div>
  <div class="q3box qqbox">
<!--    液体球-->
    <div ref="q3" style="width: 100%;height: 90px;"></div>
    <svg width="100%" height="100">
      <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#03AEFD" />
        <stop offset="10%" stop-color="#AEFFF3" />
      </linearGradient>
      <text x="50%" y="15" font-family="PingFang SC" text-anchor="middle" fill="#fff" font-size="14">基本满意</text>
      <text x="50%" y="40" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"  font-size="16" fill="url(#gradient)">{{list['基本满意']}}</text>
    </svg>
  </div>
  <div class="q4box qqbox">
<!--    液体球-->
    <div ref="q4" style="width: 100%;height: 90px;"></div>
    <svg width="100%" height="80">
      <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#03AEFD" />
        <stop offset="10%" stop-color="#AEFFF3" />
      </linearGradient>
      <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">不满意</text>
      <text x="50%" y="40" text-anchor="middle" font-weight="bold"  font-size="16" fill="url(#gradient)">{{ list['不满意'] }}</text>
    </svg>
  </div>
  <div class="q5box qqbox">
<!--    液体球-->
    <div ref="q5" style="width: 100%;height: 90px;"></div>
    <svg width="100%" height="100">
      <linearGradient id="gradient" y1="0%" x1="100%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#03AEFD" />
        <stop offset="10%" stop-color="#AEFFF3" />
      </linearGradient>
      <text x="50%" y="15" text-anchor="middle" fill="#fff" font-size="14">非常不满意</text>
      <text x="50%" y="40" text-anchor="middle" font-weight="bold"  font-size="16" fill="url(#gradient)">{{list['非常不满意']}}</text>
    </svg>
  </div>
</div>


</template>

<script setup>
import rotatePart from './rotatePart'
import { onMounted, ref, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { szToHz } from '@/utils/ruoyi'
import 'echarts-liquidfill'
import * as echarts from "echarts";
import * as api from "@/apiPc/common"

const statisticStyle = ref({'color':'#fff'})
const q1 = ref(null)
const q2 = ref(null)
const q3 = ref(null)
const q4 = ref(null)
const q5 = ref(null)
const list = ref([])
let liquid1
let liquid2
let liquid3
let liquid4
let liquid5
let total = 0

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize);
})
const init = () => {
  api.getDegree().then(res=>{
    list.value = res.data
    for (let n in list.value){
      total = total + list.value[n]
    }
    setQ1(q1.value,[list.value['非常满意']/total,list.value['非常满意']/total],liquid1)
    setQ1(q2.value,[list.value['满意']/total,list.value['满意']/total],liquid2)
    setQ1(q3.value,[list.value['基本满意']/total,list.value['基本满意']/total],liquid3)
    setQ1(q4.value,[list.value['不满意']/total,list.value['不满意']/total],liquid4)
    setQ1(q5.value,[list.value['非常不满意']/total,list.value['非常不满意']/total],liquid5)
  })
}

function handleResize() {
  liquid1.resize()
  liquid2.resize()
  liquid3.resize()
  liquid4.resize()
  liquid5.resize()
}
const setQ1 = (ref, data, dom) => {
  dom = echarts.init(ref)
  const option = {
    series: [
      {
        type: 'liquidFill',
        radius: '100%',
        center: ['50%', '50%'],
        color: [
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 1,
                color: ["#2897FE"], // 0% 处的颜色
              },
              {
                offset: 0,
                color: ["rgba(0,149,255,0)"], // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        data: data, // data个数代表波浪数
        amplitude: 5,
        // 图形样式
        itemStyle: {
          opacity: 0.5, // 波浪的透明度
          shadowBlur: 2, // 波浪的阴影范围
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: 'transparent',
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
              offset: 0, color: 'transparent' // 0% 处的颜色
            }, {
              offset: 1, color: '#144C8A' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        label: {
          show: true,
          textStyle: {
            color: '#fff',
            shadowColor: '#000',
            shadowBlur: 10,
            fontSize: 16,
          },
          formatter: (params) => {
            return `${(params.value * 100).toFixed(2)}%`;
          },
        },
        outline: {
          show: false,
        },
      },
    ]
  }
  dom.setOption(option)
}

</script>

<style scoped lang="scss">
.partA{min-height: 340px;height: 70vh;
  background: url("@/assets/img/pan.png") no-repeat bottom;
  background-size: 100% auto;position: relative;
}

.gif_bg{width: 100%;position: absolute;bottom: -100px;
  img{width: 100%;
    transform: rotate3d(1,0,0,70deg);
  }
}

.partB{display: flex;}
.qqbox{width: 20%;position: relative;
  background: url("@/assets/img/q1.png") no-repeat bottom center;
  background-size: contain;
}
.q1box,.q5box{top: -60px}
.q2box,.q4box{top: -30px}


</style>