<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      v-loading="isLoading"
      :visible.sync="dialogVisible"
      width="36%"
      :modal="false"
      class="dlg-box"
    >
      <div>
        <!-- 自定义title -->
        <i class="close-btn" @click="dialogVisible = false" />
        <div class="dlg-title">总价值</div>

        <div ref="category" style="height: 300px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.initLineChart()
      })
    },
    initLineChart() {
      const chartDom = this.$refs.category
      if (!chartDom) return

      const myChart = echarts.init(chartDom)

      // 造点假数据
      const categories = ['2020', '2021', '2022', '2023', '2024', '2025']
      const data = Array.from({ length: 6 }, () => Math.floor(Math.random() * 1000 + 500))

      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: categories,
          axisLine: {
            lineStyle: { color: '#ccc' }, // x轴线
          },
          splitLine: { show: false }, // 去掉竖向分割线
        },
        yAxis: {
          type: 'value',
          name: '单位：亿元',
          axisLine: {
            show: false, // 去掉 y 轴线
          },
          splitLine: {
            show: false, // 去掉横向分割线
          },
        },
        series: [
          {
            name: '总价值',
            data: data,
            type: 'line',
            smooth: true,
            areaStyle: { opacity: 0.3 },
            lineStyle: { width: 2 },
            symbol: 'circle',
            symbolSize: 8,
            label: {
              show: true, // 开启显示
              position: 'top', // 在点的上方
              color: '#fff', // 文字颜色（你背景是深色）
              fontSize: 12,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 90, 170, 0.8)' }, // 上方深色
                { offset: 1, color: 'rgba(0, 180, 255, 0.05)' }, // 下方更浅
              ]),
            },
          },
        ],
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => myChart.resize())
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: transparent !important;
}

::v-deep .el-dialog .el-dialog__body {
  background-image: url('../../img/right-dialog.png');
  background-size: 100% 100%;
  color: #fff;
}
::v-deep .el-dialog__header {
  display: none;
}
.table-container {
  color: #fff;
  background-color: #04112a80;
}
.dlg-box {
  position: absolute;
  .close-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-image: url('../../img/close.png');
    background-size: 100% 100%;
  }
  .dlg-title {
    margin-top: -25px;
    margin-bottom: 45px;
    font-size: 21px;
    text-align: center;
    font-weight: 800;
  }
}
</style>
