<!--
 * @Description: 
 * @Autor: chengq
 * @Date: 2022-08-02 11:15:29
 * @LastEditors: 李佐宁
 * @LastEditTime: 2023-02-02 10:45:08
 * @Author: 程迁
-->
<script setup lang="ts">
import * as echarts from 'echarts';
import { RiskyAssetsData, VulnerabilityRiskData, RiskyAssetsDataMonth, RiskyAssetsDataYear, VulnerabilityRiskMonth, VulnerabilityRiskYear } from './sech';
import RoundTab from './RoundTab.vue';
import { reactive, ref, nextTick, watch, defineComponent, onMounted } from 'vue';
const props = defineProps({
  linedata: {
    fromType: Object,
    default: () => {}
  },
  pieData: {
    fromType: Object,
    default: () => {}
  }
});
const getDataByLegend = (legend, chartData) => {
  return chartData.filter((item) => item.name === legend)[0];
};

const activateId = ref(1);
const dateRef = ref(1);
const chartOption = reactive({
  grid: {
    top: '15%',
    left: '4%',
    right: '4%',
    bottom: '20%'
  },
  tooltip: {
    trigger: 'axis',
    position: function (point, params, dom, rect, size) {
      var x = 0; // x坐标位置
      var y = 0; // y坐标位置
      var pointX = point[0];
      var pointY = point[1];
      // 提示框大小
      var boxWidth = 97;
      var boxHeight = 105;
      // boxWidth > pointX 说明鼠标左边放不下提示框
      if (boxWidth > pointX) {
        x = pointX + 5; // 此处需要判断 (pointX+5+boxWidth) < size.viewSize[0]
      } else {
        // 左边放的下
        x = pointX - boxWidth;
      }
      if (boxHeight > pointY) {
        y = 15;
      } else {
        y = pointY - boxHeight;
      }

      return [x, y];
    },
    show: true,
    backgroundColor: '#fff',
    extraCssText: 'z-index: 9;',
    appendToBody: false,
    textStyle: {
      fontSize: '12',
      color: 'rgba(0, 0, 0, 0.4)'
    }
  },
  legend: {
    show: false,
    top: '0%', // 距离容器上边界的距离
    right: '15%', // 距离容器右边界的距离
    itemWidth: 16, // 图例宽度
    itemHeight: 10, // 图例高度
    itemGap: 13, // 图例间距
    data: [], // 图例数据和图例颜色的对应关系
    // 图例文字的样式
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
      fontFamily: 'Bold'
    }
  },
  xAxis: [
    {
      data: [],
      axisLabel: {
        // 坐标轴文本标签
        fontSize: 12,
        fontFamily: 'Regular',
        fontWeight: 400,
        color: 'rgba(0, 0, 0, 0.4)',
        interval: 0 // 设置为0，表示全部显示，1表示隔一个显示，依次类推
      },
      axisTick: { show: false }, // 坐标轴刻度线
      axisLine: { show: true, color: 'rgba(25, 33, 46, .3)' }, // 坐标轴轴线
      boundaryGap: false // 设置为true，表示两边留白，为false表示两边不留白
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 12,
        fontFamily: 'Regular',
        fontWeight: 400,
        color: 'rgba(0, 0, 0, 0.4)'
      },
      splitLine: {
        // 坐标轴分割线
        show: true,
        lineStyle: { color: 'rgba(204, 204, 204, .35)', type: 'dashed' } // 分割线颜色
      },
      axisLine: {
        show: true,
        lineStyle: { color: 'rgba(25, 33, 46, .3)' }
      }
    }
  ]
});
const charColors = ref([]);
const riskLegend = ['优秀', '良好', '及格']; // 风险资产趋势变化图例
const linedatat = [
  {
    name: '优秀',
    color: '#259F2F'
  },
  {
    name: '良好',
    color: '#F18301'
  },
  {
    name: '及格',
    color: '#D90808'
  }
];
const legend = [riskLegend];
const riskLineColor = ['#259F2F', '#F18301', '#D90808'];
const _legendColor = ['#259F2F', '#F18301', '#D90808'];

const lineColor = [riskLineColor]; // 图表线条颜色
const initline = async () => {
  let series = getDefaultSeries() as any; //获取默认series配置
  let xAxisData = [] as any; // x轴临时数据
  const oneTab = activateId.value === 1;
  let res = oneTab ? RiskyAssetsData : VulnerabilityRiskData;
  if (dateRef.value === 2) {
    res = oneTab ? RiskyAssetsDataMonth : VulnerabilityRiskMonth;
  }
  if (dateRef.value === 3) {
    res = oneTab ? RiskyAssetsDataYear : VulnerabilityRiskYear;
  }
  const _legend = oneTab ? legend[0] : legend[1];
  const _lineColor = oneTab ? lineColor[0] : lineColor[1];

  for (let i = 0; i < series.length; i++) {
    series[i].name = _legend[i];
    series[i].lineStyle.color = _lineColor[i];
    series[i].itemStyle.color = _legendColor[i];
    series[i].lineStyle.color = _legendColor[i];
  }

  const data = res.sort(function (a, b) {
    return a.click_date > b.click_date ? 1 : -1; //  坐标轴时间排序
  });

  data.map((item) => {
    xAxisData.push(item.click_date);
    series[0].data.push(item.优秀);
    series[1].data.push(item.良好);
    series[2].data.push(item.及格);
    return;
  });
  chartOption.series = series;
  chartOption.legend.data = _legend;
  chartOption.xAxis[0].data = xAxisData;
};
const piechartOption = reactive({
  color: charColors,
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}'
  },
  // color: props.pieData.color,
  series: [
    {
      name: props.pieData.title,
      type: 'pie',
      center: ['15%', '50%'], // 饼图中心坐标，[ x轴，y轴 ]
      radius: ['60%', '75%'], // [ 内边距半径，外边距半径 ]
      avoidLabelOverlap: false,
      hoverAnimation: true,
      showEmptyCircle: true, // 无数据时显示占位圆
      label: { show: false },
      emphasis: { disable: true },
      labelLine: { show: false },
      data: []
    }
  ],
  legend: [],
  itemStyle: {
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
});
const getDefaultSeries = () => {
  return [
    {
      name: '',
      type: 'line',
      // showSymbol: true, // 是否显示拐点
      // symbol: 'circle',
      symbolSize: 9, // 拐点大小
      data: [],
      itemStyle: { color: '#259F2F' }, // 图例颜色
      lineStyle: { width: 1, color: '#259F2F' } // 线条颜色
    },
    {
      name: '',
      type: 'line',
      // showSymbol: false,
      // symbol: 'circle',
      symbolSize: 9, // 拐点大小
      data: [],
      itemStyle: { color: '#F18301' },
      lineStyle: { width: 1, color: '#F18301' }
    },
    {
      name: '',
      type: 'line',
      // showSymbol: false,
      // symbol: 'circle',
      symbolSize: 9, // 拐点大小
      data: [],
      itemStyle: { color: '#D90808' },
      lineStyle: { width: 1, color: '#D90808' }
    }
  ];
};
const initlpiechrts = async () => {
  piechartOption.series[0].data = [];
  piechartOption.series[0].data = props.pieData.series;

  piechartOption.legend = {
    orient: 'vertical',
    top: 'middle',
    left: '60%',
    itemGap: 33, //图例之间的间距
    padding: [0, 0, 0, 12], // 图例与饼图间距
    // icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      rich: {
        name: {
          padding: [0, 0, 0, 10], //图例 icon 与图例文字间距
          width: 80,
          color: 'rgba(0,0,0,0.6500)',
          fontSize: 14,
          fontWeight: 400,
          align: 'left'
        },

        per: {
          width: 50,
          color: 'rgba(0,0,0,0.4000)',
          fontSize: 14,
          align: 'left',
          dispaly: 'block'
        }
      }
    },
    data: props.pieData.series,
    formatter: function (param) {
      const { name, value, per } = getDataByLegend(param, props.pieData.series);
      return `{name|${param}}{per|${value}}`;
    }
  } as any;
};
onMounted(() => {
  props.pieData.series.map((item) => {
    charColors.value.push(item.textStyle.color);
  });
  initline();
  initlpiechrts();
});
watch(activateId, () => {
  initline();
});

watch(dateRef, () => {
  initline();
});
</script>

<template>
  <div class="echartstitle" style="" v-if="true">
    <div style="" class="echarts-content">
      <div style="position: relative">
        <span></span><span>{{ props.linedata.title }}</span>
        <div style="position: absolute; right: 200px; top: 5px">
          <div v-for="(item, index) in linedatat" :key="index" style="float: left; width: 50px">
            <span class="circle" :style="{ borderColor: item.color }"></span>
            <span style="color: rgba(0, 0, 0, 0.4); margin-left: 10px">{{ item.name }}</span>
          </div>
          <!-- <div class="circle"></div> -->
        </div>
        <RoundTab v-model="dateRef"></RoundTab>
        <v-chart ref="myChart" class="chart" :option="chartOption" autoresize />
      </div>
    </div>
    <div class="echarts-content1">
      <div>
        <span></span><span>{{ props.pieData.title }}</span>
        <v-chart ref="piemyChart" class="chart" :option="piechartOption" autoresize v-if="charColors.length > 0" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.echartstitle {
  height: 190px;
  margin-bottom: 12px;
  > div {
  }
  // background: #f4f4f4;
}
.chart {
  width: 100%;
  height: 150px;
}

.echarts-content {
  width: 70%;
  margin-right: 17px;
}
.echarts-content1 {
  width: 28.7%;
}
.echarts-content,
.echarts-content1 {
  height: 190px;
  background: #ffffff;
  border-radius: 4px;
  float: left;

  > div {
    padding-top: 16px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    line-height: 20px;
    // border-left: 3px solid #0095ff;
    padding-left: 24px;
    > span:nth-of-type(1) {
      width: 3px;
      height: 14px;
      background: #0095ff;
      background: #0095ff;
      display: inline-block;
      line-height: 14px;
      margin-right: 8px;
      top: 3px;
      position: relative;
    }
  }
}
.circle {
  width: 4px;
  height: 4px;

  border-radius: 50%;
  display: inline-block;
  background: none;
  margin-top: 10px;
  margin-right: 4px;
  border: 1px solid red;
  position: absolute;
  top: -4px;
}
</style>