<!--
 * @Description: 
 * @Autor: chengq
 * @Date: 2022-08-01 17:20:16
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-09-01 09:34:05
 * @Author: 程迁
-->
<script setup lang="ts">
import CommonCard from "../../components/CommonCard/CommonCard.vue";
import {
  reactive,
  ref,
  nextTick,
  watch,
  watchEffect,
  defineComponent,
  onMounted,
} from "vue";
import { getThemeColor } from "../../components/chart/options/theme";
import LineChart from "../../components/chart/LineChart/LineChart.vue";
import lineCircle2 from "../../assets/image/screen/threat-event/line-2.png";
import CircularDiagram from "../../components/chart/CircularDiagram/CircularDiagram.vue";

const colorList = getThemeColor().colorList || [];
const chartData = ref([]);
const yaTheme = localStorage.getItem("YA_THEME");
const props = defineProps({
  formColumn: {
    fromType: Object,
    default: () => { },
  },
  linedata: {
    fromType: Object,
    default: () => { },
  },
  pieData: {
    fromType: Object,
    default: () => [],
  },
  pietitle: {
    fromType: String,
    default: "任务状态分布",
  },
});
const getDataByLegend = (legend, chartData) => {
  return chartData.filter((item) => item.name === legend)[0];
};

const chartOption = reactive({
  title: {
    show: true,
    text: "个",
    left: 12,
    top: 0,
    textStyle: {
      fontSize: 11,
      color: "#96A2B5",
      fontWeight: 400,
    },
  },
  grid: {
    top: "20%",
    left: 0,
    right: "4%",
    bottom: "0%",
    containLabel: true,
  },
  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 = 5;
      } else {
        y = pointY - boxHeight;
      }

      return [x, y];
    },
    axisPointer: { lineStyle: { color: "rgba(198, 209, 219, .6)" } },
    show: true,
    backgroundColor: "#fff",
    extraCssText: "z-index: 9;",
    appendToBody: false,
    textStyle: {
      fontSize: "12",
      color: "rgba(0, 0, 0, 0.4)",
    },
    valueFormatter: (val) => {
      return val + "（个）";
    },
  },
  legend: {
    top: "6%", // 距离容器上边界的距离
    right: "5%", // 距离容器右边界的距离
    itemWidth: 16, // 图例宽度
    itemHeight: 10, // 图例高度
    itemGap: 13, // 图例间距
    data: [], // 图例数据和图例颜色的对应关系
    // 图例文字的样式
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
      fontFamily: "Bold",
    },
  },
  xAxis: [
    {
      data: [],
      axisLabel: {
        // 坐标轴文本标签
        fontSize: 12,
        fontFamily: "Regular",
        fontWeight: 400,
        color: yaTheme === "light" ? "rgba(0, 0, 0, 0.4)" : "#96A2B5",
        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: yaTheme === "light" ? "rgba(0, 0, 0, 0.4)" : "#96A2B5",
      },
      minInterval: 1,
      min: 5,
      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(getThemeColor().colorList || []);

const initline = async () => {
  linexAxisData.value = props.linedata.xdata || [];
  lineChartData.value = props.linedata.series
    ? props.linedata.series.map((item) => {
      return {
        name: item.name,
        data: item.data,
      };
    })
    : [];
  console.log(props.pieData, 99);
  chartData.value = props.pieData || [];
  return;
  console.log(lineChartData.value, "===========");
  chartOption.series = props.linedata.series;
  chartOption.series.forEach((item, i) => {
    if (!item.itemStyle) {
      item.itemStyle = {
        color: colorList[i],
      };
      item.lineStyle = {
        color: colorList[i],
      };
    }
  });
  // chartOption.legend.data = _legend;
  chartOption.xAxis[0].data = props.linedata.xdata;
  const xseries =
    (props.linedata.series &&
      props.linedata.series[0] &&
      props.linedata.series[0].data) ||
    [];
  const yAXisValue = xseries.find((item) => Number(item) > 0);
  chartOption.yAxis[0].min = yAXisValue ? 0 : 5;
};
const linexAxisData = ref([]);
const lineChartData = ref([]);
watchEffect(() => {
  initline();
});
const piechartOption = reactive({
  color: charColors,
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}%",
  },
  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 initlpiechrts = async () => {
  piechartOption.series[0].data = [];
  piechartOption.series[0].data = props.pieData.series;
  piechartOption.legend = {
    orient: "vertical",
    top: "middle",
    left: "30%",
    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: yaTheme === "light" ? "rgba(0, 0, 0, 0.4)" : "#96A2B5",
          fontSize: 14,
          fontWeight: 400,
          align: "left",
        },

        per: {
          width: 50,
          color: yaTheme === "light" ? "rgba(0, 0, 0, 0.4)" : "#96A2B5",
          fontSize: 14,
          align: "left",
          dispaly: "block",
        },
      },
    },
    data: props.pieData.series,
    formatter: function (param) {
      const { name, num, per } = getDataByLegend(param, props.pieData.series);
      return `{name|${param}}{per|${per}}`;
    },
  } as any;
};

onMounted(() => {
  // props.pieData.series.map((item) => {
  //   charColors.value.push(item.textStyle.color);
  // });
  initlpiechrts();
});

const tooltipFormatter = (params) => {
  let _resHtml = "";
  const axisValue = params[0]?.axisValue;
  const _unit = "";
  params.forEach((item) => {
    const { color, seriesName, value } = item;
    _resHtml += `<div class="line-chart-tool-item">
            <div class="line-chart-tool-info">
              <div class="line-chart-tool-item-icon" style="background: ${color}"></div>
              <div class="line-chart-tool-item-name">${seriesName}</div>
            </div>
            <div class="line-chart-tool-item-value">${value}</div>
				</div>`;
  });
  return `<div class="line-chart-tool-bg">
			<div class="line-chart-tool-bg-subtitle">${axisValue}</div>
			<div class="line-chart-tool-bg-content">
				${_resHtml}
			</div>
		</div>`;
};
const tooltipValueFormatter = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
              <div class="rose-linechart-tooltip-content-item-value">${value}
              </div>
          </div>`;
  return `<div class="rose-linechart-tooltip">
        <div style="display: flex;">
          <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color};top:6px;position:relative;margin-right: 6px"></div>
          <div >
            <div class="rose-linechart-tooltip-subtitle">${name}</div>
            <div class="rose-linechart-tooltip-content">
              ${_resHtml}
            </div>
          </div>
        </div>
      </div>`;
};

const legendFormatter = (name) => {
  const findItem = unref(chartData).findIndex((item) => item.name === name);
  const _item = unref(chartData)[findItem] as any;
  const _name = `{title|${name}}`;
  const percentage = `{subtitle|${_item.value}}`;
  return _name + percentage;
};
</script>

<template>
  <div class="echartstitle" style="" v-if="true">
    <div style="min-width: 18.6vw; float: left">
      <div :style="{ background: 'url(' + props.formColumn.bgimg + ')' }" class="echartstitle-left">
        <img :src="props.formColumn.img" style="
            width: 80px;
            height: 80px;
            margin-top: 40px;
            margin-left: 30px;
            margin-right: 20px;
          " />
        <div style="">
          <div :style="{ color: props.formColumn.color }" class="title-value">
            {{ props.formColumn.num }}
          </div>
          <div class="ya-text-color" style="white-space: nowrap">
            {{ props.formColumn.title }}
          </div>
        </div>
      </div>
      <div class="addtitle ya-fill-color" style="">
        <div style="">今日新增（个）</div>
        <div class="iconOne">
          <!-- <img src="./resource/images/topimg.png" /> -->
          <i class="iconfont icon-shangsheng" style="color: #00a56b"></i>
          <span style="">{{ props.formColumn.newadd }}</span>
        </div>
      </div>
    </div>
    <CommonCard :title="props.linedata.title" class="echarts-content ya-border-color">
      <LineChart :legendRight="0" title="单位：个" :titleTop="0" :grid-top="20" :titleLeft="0" :legendTop="0"
        :colors="[getThemeColor().colorList[0]]" :areaGradientColor="getThemeColor().lineGradient[0]" :showSymbol="true"
        :yAxisAxisLineShow="true" :xAxisSplitLineShow="false" :yAxisSplitLineShow="false" :xAxisData="linexAxisData"
        :chartData="lineChartData" />
    </CommonCard>
    <CommonCard :title="pietitle" class="echarts-content1 ya-border-color" style="float: right">
      <CircularDiagram :otherType="'two'" v-if="chartData.length" :chartData="chartData" :radius="['50%', '63%']"
        :pieCenter="['50%', '50%']" legendLeft="35%" legendTop="auto" :tooltipValueFormatter="(val) => val + '%'" />
      <!-- <v-chart
        ref="piemyChart"
        class="chart"
        :option="piechartOption"
        autoresize
        v-if="charColors.length > 0"
      /> -->
    </CommonCard>
    <!-- <div class="echarts-content1 ya-bg-color ya-border-color" style="float: right">
      <div class="ya-primary-text">
        <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: 170px;
  margin-bottom: 12px;
  display: flex;

  >div {}

  .ya-card {
    height: auto;
  }

  // background: #f4f4f4;
}

.chart {
  width: 100%;
  height: 150px;
}

.echartstitle-left {
  // background: url('./resource/images/emergency-bg.png');
  width: 100%;
  height: 140px;
  background-size: 100% 100% !important;
  display: flex;

  >div {
    margin-top: 1.62vw;
    float: left;

    >div:nth-of-type(1) {
      height: 34px;
      font-family: D-DIN-Bold, D-DIN;
      font-weight: bold;
      color: #6678ff;
      line-height: 37px;
      margin-top: 10px;
    }

    >div:nth-of-type(2) {
      margin-top: 3px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 20px;
    }
  }
}

.addtitle {
  width: 100%;
  // height: 38px;
  overflow: hidden;
  background: url("../../assets/image/addTitle.png") no-repeat;
  background-size: 100% 100%;
  height: 36px;
  // background: #ffffff;
  border-radius: 4px;
  margin-top: 0.8vw;
  font-size: 14px;

  >div:nth-of-type(1) {
    float: left;
    position: relative;
    top: 4px;
    left: 4px;
    width: 118px;
    height: 22px;
    background: rgba(0, 222, 255, 0.6);
    border: 1px solid #22d8ff;
    position: relative;
    top: 6px;
    margin-left: 3px;
    color: #fff;
    line-height: 22px;
    text-align: center;
  }

  >div:nth-of-type(2) {
    float: left;
    // line-height: 1.56vw;
    margin-left: 21px;
    // height: 1.56vw;
    margin-top: 8px;

    >span {
      margin-left: 2px;
      height: 18px;
      font-size: 18px;
      font-family: D-DIN-Bold, D-DIN;
      font-weight: bold;
      color: #00a56b;
      line-height: 20px;
    }
  }
}

.echarts-content {
  width: 50%;
}

.echarts-content1 {
  width: 30.3%;
}

.echarts-content,
.echarts-content1 {
  height: 190px;
  border-radius: 4px;
  float: left;
  border: 1px solid #ffffff;
  margin-left: 19px;

  >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;
    }
  }
}

.title-value {
  background: linear-gradient(180deg, #ffffff 0%, #1ad7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
}

::v-deep .custom-circle-legend-item .legend-value {
  margin-right: 20px !important;
}
</style>
