<template>
  <div class="fxgk-container">
    <TitleTab title="风险管控" subTitle="风险趋势分析" @jump="jumpClick" />
    <div class="tab-content">
      <img class="tab-back-img" :src="getImgUrl('preview/tabBack.png')" alt="暂时无图">
      <!-- 内容展示 -->
      <div class="show-container">
        <div class="fxgk-echarts" v-for="item in 2">
          <div class="fxgk-echarts-title">{{ item == 1 ? '风险单元数量' : '风险数量' }}</div>
          <div v-if="item == 1" id="fxdyslEchartBox" class="fkgk-echarts-container"></div>
          <div v-else id="fxslEchartBox" class="fkgk-echarts-container"></div>
        </div>
        <div class="vertic-line"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';
import * as echarts from "echarts";
import TitleTab from '../TitleTab.vue';
import { getImgUrl } from "@/utils/tools.js"

const props = defineProps({
  /**标题 */
  title: {
    type: String,
    default: ''
  }
})
const total = ref(45);
const options = {
  tooltip: {
    trigger: 'item'
  },
  // legend: {
  //   top: '5%',
  //   left: 'center'
  // },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: `${total.value}次`,
        textAlign: 'center',
        fill: '#fff', // 文字的颜色
        fontSize: 12,
        lineHeight: 20,
      },
    },
  ],
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['30%', '60%'],
      // avoidLabelOverlap: true,
      // label: {
      //   show: true,
      //   position: 'center'
      // },
      // emphasis: {
      //   label: {
      //     show: false,
      //     fontSize: 40,
      //     fontWeight: 'bold'
      //   }
      // },
      itemStyle: {
        normal: {
          color: function (params) {
            return ['#24cbff', '#ffaa02', '#ff8a00', '#ff3f3f'][params.dataIndex]
          }
        }
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 次}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        // color: function (params) {
        //   console.log('params: ', params);
        //   console.log('params.dataIndex: ', params.dataIndex);
        //   return ['#ff3f3f','#24cbff','#ffaa02','#ff8a00'][params.dataIndex]
        // },
        rich: {
          time: {
            fontSize: 11,
            color: '#fff'
          }
        }
      },
      data: [
        { value: 13, name: '蓝色', label: { color: '#24cbff' } },
        { value: 10, name: '黄色', label: { color: '#ffaa02' } },
        { value: 12, name: '橙色', label: { color: '#ff8a00' } },
        { value: 13, name: '红色', label: { color: '#ff3f3f' } }, // ff3f3f
      ]
    }
  ]
};
//echarts容器
// const fxdyslEchartBox = ref(null);
// const fxslEchartBox = ref(null);
//初始化
function upEchares() {
  const fxdysl = echarts.init(document.getElementById('fxdyslEchartBox'))
  fxdysl.setOption(options)
  fxdysl.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 3}); // 高亮突出显示【红色】
  const fxslEchart = echarts.init(document.getElementById('fxslEchartBox'))
  fxslEchart.setOption(options)
  fxslEchart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 3}); // 高亮突出显示【红色】
}
/** 风险单元数量 */
const fxdyArr = ref([
  { title: '红色', num: '13' },
  { title: '蓝色', num: '13' },
  { title: '橙色', num: '12' },
  { title: '黄色', num: '10' },

]);
/** 风险数量 */
const fxslArr = ref([
  { title: '红色', num: '13' },
  { title: '蓝色', num: '13' },
  { title: '橙色', num: '12' },
  { title: '黄色', num: '10' },

]);
const jumpClick = () => {
  console.log('跳转');
}
onMounted(() => {
  upEchares();
});
</script>

<style lang="scss" scoped>
.fxgk-container {
  height: 100%;
  width: 24.2vw;

  .tab-content {
    position: relative;
    padding: 0.52vh;
    width: 100%;
    height: 17.5vh;

    .tab-back-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
      z-index: -1;
    }

    .show-container {
      display: flex;
      justify-content: space-between;
      position: relative;
      width: 100%;
      height: 100%;

      .fxgk-echarts {
        width: 50%;
        height: 100%;

        .fxgk-echarts-title {
          margin-left: 1.5vw;
          padding: 0.5vh 0;
          color: green;
        }

        .fkgk-echarts-container {
          width: 100%;
          height: calc(100% - 3vh);
        }
      }

      .vertic-line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 6vh;
        margin-top: -3vh;
        background-color: #008000;
        opacity: 0.2;
      }
    }
  }
}
</style>
