<template>
  <div class="bottom-left-wrapper">
    <ItemBox
      :title="$t('dashboard.revenueTrend')"
      @handleSetting="handleSetting"
    >
      <!-- <ItemBox :title="$t('dashboard.revenueTrend')"
    :show-curve-setting="true"
    @handleSetting="handleSetting"> -->
      <div slot="header">
        <div class="header-right-box">
          <div
            class="header-title"
            :class="{ active: currentType === 'month' }"
            @click="selectTime('month')"
          >
            {{ $t("dashboard.month") }}
          </div>
          <div
            class="header-title"
            :class="{ active: currentType === 'year' }"
            @click="selectTime('year')"
          >
            {{ $t("dashboard.year") }}
          </div>
        </div>
      </div>
      <div v-loading="loading" class="charts-box">
        <Chart :options="runOptions" :class-name="'chart'" />
      </div>
    </ItemBox>
  </div>
</template>

<script>
import { GetDynamicRealtimeCurve } from '@/api/home-page/index'
import * as echarts from 'echarts'
// import { chartYIndex } from '@/utils/index'
export default {
  name: 'Index',
  props: {
    stationId: {
      type: Number,
      default: 0
    },
    permissionId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      currentType: 'month',
      runOptions: undefined,
      serviceList: [],
      nameArr: [],
      color: ['#FF9900'],
      color2: [
        [
          {
            offset: 0.0,
            color: 'rgba(206, 235, 255, 0.1)'
          },
          {
            offset: 1,
            color: 'rgba(206, 235, 255, 0.2)'
          }
        ],
        [
          {
            offset: 0.0,
            color: 'rgba(255, 184, 0, 0.1)'
          },
          {
            offset: 1,
            color: 'rgba(255, 184, 0, 0.2)'
          }
        ]
      ],
      loading: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const currentData = []
    for (let i = 1; i < 32; i++) {
      currentData.push({
        date: i,
        chargeElec: Number((Math.random() * 9000 + 1000).toFixed(2))
      })
    }
    this.initCharts(currentData, 1)
  },
  methods: {
    selectTime(type) {
      this.currentType = type
      this.getData()
    },
    handleSetting() {
      this.$emit('handleSetting')
    },
    async getData() {
      this.loading = true
      const params = {
        stationId: this.stationId,
        pageLocation: 'runChart',
        permissionId: this.permissionId
      }
      try {
        const res = await GetDynamicRealtimeCurve(params)
        if (res.data) {
          // this.initCharts(res.data)
        }
      } catch (error) {
        // console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 新增代码

    initCharts(val, type) {
      const x_data = []
      const charge_data = []
      // const discharge_data = []
      // let benefit_data = [0, 0, 0, 0, 0, 0, 0]
      if (val && val.length > 0) {
        val.forEach((item) => {
          x_data.push(item.date)
          charge_data.push(item.chargeElec)
          // discharge_data.push(item.dischargeElec)
        })
      }
      this.runOptions = {
        grid: {
          top: '25%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0,)',
          borderColor: 'rgba(0,0,0,0,);',
          borderWidth: 0,
          textStyle: {
            width: 160,
            height: 250,
            lineHeight: 24,
            color: '#ffffff',
            fontSize: '14',
            fontFamily: 'SourceHanSansCN-Normal'
          },
          formatter: (params) => {
            // 获取xAxis data中的数据
            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
            params.forEach((item) => {
              dataStr += `<div>
                    <div style="margin: 0 8px;">
                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[0]};"></span>
                      <span>${item.seriesName}</span>
                      <span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
                    </div>
                  </div>`
            })
            const div = `<div style='border: 1px solid ;
                          border-image: linear-gradient(130deg, #FFFFFF 0%, rgba(201,255,243,0.00) 22%, rgba(201,255,243,0.00) 75%, rgba(201,255,243,0.00) 80%, #FFFFFF 99%, #FFFFFF 99%) 1;
                          box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
            return div
          }
        },
        xAxis: [
          {
            type: 'category',
            data: x_data,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90e9d8'
              }
            },
            axisLabel: {
              show: true,
              color: '#CEEBFF'
            },

            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('glance.wRMB'),
            nameTextStyle: {
              color: ' rgba(255, 255, 255, 0.5)'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#90e9d8'
              }
            },
            axisLabel: {
              show: true,
              color: '#CEEBFF'
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true, // 强制显示分割线（默认已开启，确保不被隐藏）
              lineStyle: {
                type: 'dashed', // 线型设为虚线
                color: 'rgba(255,255,255,0.2)', // 虚线颜色（可自定义，如 #999、rgba(0,0,0,0.1)）
                width: 1, // 虚线宽度
                dashOffset: 5 // 虚线偏移量（可选，调整虚线起始位置）
              }
            }
          }
        ],
        series: [
          {
            name: `${this.$t('state.powerGeneration')}`,
            type: 'bar',
            data: charge_data,
            barWidth: 14, // 柱状图的宽度
            color: '#ff9900',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 153, 0,0.90)' },
                { offset: 1, color: 'rgba(255, 153, 0, 0.0)' }
              ])
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-left-wrapper {
  width: 100%;
  height: 100%;

  .header-right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .header-title {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0em;
      color: rgba(206, 235, 255, 0.5);
      white-space: nowrap;
      padding: 0 10px;
      cursor: pointer;
      font-family: Source Han Sans CN;

      &.active {
        color: #ffffff;
        background: linear-gradient(
          90deg,
          rgba(0, 148, 255, 0) 0%,
          rgba(0, 148, 255, 0.43) 51%,
          rgba(0, 148, 255, 0) 99%
        );
      }
    }
  }
}
.charts-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
