<template>
  <div class="fold-line-container">
    <div class="big" :style="bigStyle">
      <div class="bigTop" :style=bigTopStyle>
        <div class="bigTopLeft">
          <svg-icon v-show="fatherMessage.titleSvg" style="font-size:20px;" :icon-class="fatherMessage.titleSvg || ''"
            class="sidebar-logo" />
          {{ fatherMessage.title }}
        </div>
        <div :style="{ height: `44px`, lineHeight: `44px`, width: '60%', textAlign: 'right' }">
          <el-select v-show="fatherMessage.swtichSelect" popper-class="echarts-el-select-popper" @change="changeSelect"
            v-model="value" placeholder="请选择">
            <el-option v-for="item in fatherMessage.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div :style="{ 'margin-top': fatherMessage.borderSwitch == 'borderSwitch' ? '-20px' : '0' }" id="main" ref="main">
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  fatherMessage: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const bigStyle = ref('')
const bigTopStyle = ref('')
const { proxy } = getCurrentInstance();
const main = ref(null);
const value = ref("");
const emit = defineEmits();
const changeSelect = (val) => {
  emit("echartsChange", val);
};
watch(() => props.fatherMessage, (newValue, oldValue) => {
  foldLine();
}, {
  deep: true
});
let myChart
// 初始化echarts图表
const foldLine = () => {
  if (props.fatherMessage.borderSwitch == 'borderSwitch') {
    bigStyle.value = null
    bigTopStyle.value = null
  } else {
    bigStyle.value = 'border: 1px solid #ebedee;'
    bigTopStyle.value = 'background: #fafbfc;border-bottom: 1px solid #ebedee;'
  }
  value.value = props.fatherMessage.optionsDefault;
  myChart = proxy.echarts.init(main.value);
  let option = {
    grid: {
      left: '4%', //默认10%
      right: '4%', //默认10%
      bottom: '13%', //默认60
      containLabel: true
      //grid区域是否包含坐标轴的刻度标签
    },
    dataZoom: props.fatherMessage.dataZoom ? [//给x轴设置滚动条
      {
        type: 'slider',//slider表示有滑动块的，inside表示内置的
        // startValue: 8,//可用于设置开始显示的柱子的长度
        // endValue: 1,//可用于设置结束显示的柱子的长度
        start: 0,//默认为0  可设置滚动条从在后进行展示
        end: 2,//默认为100
        show: true,
        xAxisIndex: [0],
        handleSize: 5,//滑动条的 左右2个滑动条的大小
        height: 12,//组件高度
        left: '5%', //左边的距离
        right: '5%',//右边的距离
        bottom: '5%',//右边的距离
        borderColor: "rgb(250, 251, 252)", //两边未选中的滑动条区域的颜色
        fillerColor: '#fff',// 两边选中的滑动条区域的颜色
        backgroundColor: 'rgb(250, 251, 252)',//两边未选中的滑动条区域的颜色
        showDataShadow: false,//是否显示数据阴影 默认auto
        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
        realtime: true, //是否实时更新
        filterMode: 'filter',
        handleStyle: {
          borderRadius: '50',
        },
      },
      //下面这个属性是里面拖到
      {
        type: 'inside',
        show: true,
        xAxisIndex: [0], // 与上面xAxisIndex对应
        start: 0,//默认为1
        end: 400,//默认为100
        moveOnMouseWheel: false, // 鼠标滚轮时是否滚动
        preventDefaultMouseMove: false, // 是否阻止默认的鼠标移动事件
      },
    ] : [],
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        // console.log(params)
        // 获取当前时间
        const today = new Date();
        // 获取当前时间(today)的年份
        const year = today.getFullYear();
        // 获取月份
        const month = String(today.getMonth() + 1).padStart(2, '0');
        // 获取当前日
        const day = String(today.getDate()).padStart(2, '0');
        // 得到年月日
        const thisDayDate = `${month}-${day}`; //打印当前日期
        let content = ''
        params.forEach(item => {
          content += `
            <div style="height:24px;line-height:24px;">
              <span style="display:inline-block;margin-right:10px;border-radius:50%;width:8px;height:8px;background-color:${item.color};"></span>
              <span style="color: #000;">${item.seriesName || ''}：</span>
              <span style="color:${item.color};">${item.value} ${props.fatherMessage.Yname.slice(3)}</span>
            </div>
          `
        })
        if(props.fatherMessage.timeDay){
          const htmlContent = `
          <div style="padding-top:5px;">
            <div style='color:#000;'>${thisDayDate} ${params[0].axisValueLabel}<div/>
            <div style="margin-top:5px;">${content}</div>
          <div/>
        `
        return htmlContent
        }else{
          const htmlContent = `
          <div style="padding-top:5px;">
            <div style='color:#000;'> ${params[0].axisValueLabel}<div/>
            <div style="margin-top:5px;">${content}</div>
          <div/>
        `
        return htmlContent
        }
        // const htmlContent = `
        //   <div style="padding-top:5px;">
        //     <div style='color:#000;'>${thisDayDate} ${params[0].axisValueLabel}<div/>
        //     <div style="margin-top:5px;">${content}</div>
        //   <div/>
        // `
        // return htmlContent
      }
    },
    legend: {
      data: [],
      right: 40,
      top: 18,
      itemHeight: 7,
      itemWidth: 10,
      icon: "rect",
    },
    xAxis: {
      type: "category",
      boundaryGap: props.fatherMessage.boundaryGap,
      data: props.fatherMessage.XAxle,
      axisLabel: {
        show: true,
          color: '#B3B7BE',  //更改坐标轴文字颜色
          fontSize: 12      //更改坐标轴文字大小
      },
      axisTick: {
        // 控制X轴上的线点显示与隐藏
        show: false, // 将show属性设为false表示不显示线点
      },
      axisLine: {
        lineStyle: {
          color: '#EBEDEE'
        },


      }
    },
    yAxis: {
      name: props.fatherMessage.Yname,
      type: "value",
      nameTextStyle: {
        padding: [0, 0, 10, 28], // 上右下左与原位置距离
        color: '#7B828E',
        fontSize: 13
      },
      axisLine: {
        lineStyle: {
          color: '#B3B7BE'
        }
      }

    },
    series: [],
  };
  //循环给series数组加数据影响多条线
  props.fatherMessage.actualData?.forEach((item) => {
    option.series.push({
      symbol: "none",
      name: item.name,
      data: item.dataAxle,
      sampling: 'lttb',
      lineStyle: {
        width: 2
      },
      type: item.type,
      smooth: item.smooth,
      itemStyle: {
        color: item.color,
      },
      stack: item.type == 'bar' ? item.stack : null,
      // 折现下是否填充
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: item.color, // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255,255,255,0)", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
    });
    option.legend.data.push(item.name);
  });
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
nextTick(() => {
  foldLine();
});

onBeforeMount(() => {
  myChart && myChart.clear();
})
</script>
<style lang="scss" scoped>
.fold-line-container {
  width: 100%;
  height: 100%;
  min-height: 100px;

  .big {
    width: 100%;
    height: 100%;
    border-radius: 5px;

    .bigTop {
      display: flex;
      height: 44px;
      justify-content: space-between;

      .bigTopLeft {
        margin-left: 3%;
        font-size: 14px;
        font-weight: 600;
        color: #0b182d;
        line-height: 44px;

        .sidebar-logo {
          vertical-align: middle;
        }
      }
    }
  }

  #main {
    width: 100%;
    height: calc(100% - 44px);
  }
}

:deep(.el-input) {
  // width: 100px;
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select .el-input__inner) {
  text-align: right;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select) {
  --el-select-border-color-hover: #fff;
}

:deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: none;
}
</style>
<!-- <style lang="scss">
.echarts-el-select-popper{
  width: 200px;
  .el-select-dropdown{
    min-width: auto !important;
  }
}
</style> -->
