<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: calc(90*100vw/1920);"></div>
      <svg width="100%" :height="`calc(100*100vw/1920)`">
        <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="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
          非常满意
        </text>
        <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
              :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['非常满意'] }}
        </text>
      </svg>
    </div>
    <div class="q2box qqbox">
      <!--    液体球-->
      <div ref="q2" style="width: 100%;height: calc(90*100vw/1920);"></div>
      <svg width="100%" :height="`calc(100*100vw/1920)`">
        <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="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
          满意
        </text>
        <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
              :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['满意'] }}
        </text>
      </svg>
    </div>
<!--    <div class="q3box qqbox">-->
<!--      &lt;!&ndash;    液体球&ndash;&gt;-->
<!--      <div ref="q3" style="width: 100%;height:calc(90*100vw/1920);"></div>-->
<!--      <svg width="100%" :height="`calc(100*100vw/1920)`">-->
<!--        <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="`calc(15*100vw/1920)`" font-family="PingFang SC" text-anchor="middle" fill="#fff"-->
<!--              :font-size="`calc(14*100vw/1920)`">基本满意-->
<!--        </text>-->
<!--        <text x="50%" :y="`calc(40*100vw/1920)`" font-family="DIN Alternate" text-anchor="middle" font-weight="bold"-->
<!--              :font-size="`calc(16*100vw/1920)`" fill="url(#gradient)">{{ list['基本满意'] }}-->
<!--        </text>-->
<!--      </svg>-->
<!--    </div>-->
    <div class="q4box qqbox">
      <!--    液体球-->
      <div ref="q4" style="width: 100%;height:calc(90*100vw/1920);"></div>
      <svg width="100%" :height="`calc(100*100vw/1920)`">
        <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="`calc(15*100vw/1920)`" text-anchor="middle" fill="#fff" :font-size="`calc(14*100vw/1920)`">
          不满意
        </text>
        <text x="50%" :y="`calc(40*100vw/1920)`" text-anchor="middle" font-weight="bold"
              :font-size="`calc(16*100vw/1920)`" 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
let intervalA = null

onMounted(() => {
  init()
  window.addEventListener('resize', handleResize);
})
const init = () => {
  if (!intervalA) {
    getdata()
  }
  intervalA = setInterval(getdata, 1000 * 60 * 60);
}

function getdata() {
  total = 0
  api.getDegree().then(res => {
    list.value = res.data
    for (let n in list.value) {
      total = total + (list.value[n]||0)
    }
    liquid1 = setQ1(q1.value, [list.value['非常满意'] / total, list.value['非常满意'] / total])
    liquid2 = setQ1(q2.value, [list.value['满意'] / total, list.value['满意'] / total])
    // liquid3 = setQ1(q3.value, [list.value['基本满意'] / total, list.value['基本满意'] / total])
    liquid4 = setQ1(q4.value, [list.value['不满意'] / total, list.value['不满意'] / total])
    // liquid5 = setQ1(q5.value, [list.value['非常不满意'] / total, list.value['非常不满意'] / total])
  })
}

function handleResize() {
  liquid1.resize()
  liquid2.resize()
  // liquid3.resize()
  liquid4.resize()
  // liquid5.resize()
}

const setQ1 = (ref, data) => {
  let 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: '2rem',
          },
          formatter: (params) => {
            return `${(params.value * 100).toFixed(2)}%`;
          },
        },
        outline: {
          show: false,
        },
      },
    ]
  }
  dom.setOption(option)
  return dom
}

</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: calc(-100 * 100vw / 1920);;

  img {
    width: 100%;
    transform: rotate3d(1, 0, 0, 70deg);
  }
}

.partB {
  display: flex;justify-content: space-around;
}

.qqbox {
  width: 33%;
  position: relative;
  top: calc(-20 * 100vw / 1920);
  background: url("@/assets/img/q1.png") no-repeat bottom center;
  background-size: 70%;
}

//.q1box,.q5box{top: -60px}
//.q2box,.q4box{top: -30px}
</style>