<template>
  <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.pAndLWarningVisible" :width="dialogConfig.width">
    <main>
      <div class="percent-container">
        <div class="precent">108%</div>
        <div class="name">达成率</div>
      </div>

      <section>
        <div class="item">
          <StatisticsItem center title="盈亏平衡点（元）" value="15896"></StatisticsItem>
        </div>
        <div class="item" style="margin: 0 16px">
          <StatisticsItem center title="离盈利还差数额（元）" value="8549545"></StatisticsItem>
        </div>
        <div class="item">
          <StatisticsItem center title="实收营业额（元）" value="984452"></StatisticsItem>
        </div>
      </section>

      <div class="charts-container" ref="chartRef"></div>

      <div class="btn-wrapper">
        <el-button style="background-color: #3a68f2" type="primary">设置盈亏线</el-button>
      </div>
    </main>
  </el-dialog>
</template>

<script>
import StatisticsItem from './StatisticsItem.vue'
export default {
  components: {
    StatisticsItem
  },
  data() {
    return {
      dialogConfig: {
        width: '40%',
        pAndLWarningVisible: false,
        title: '盈亏红线'
      },
      instance: null
    }
  },
  methods: {
    open() {
      this.init()
    },
    init() {
      this.$nextTick(() => {
        this.instance = this.$echarts.init(this.$refs.chartRef)
        this.instance.setOption({
          title: { subtext: '单位：元' },
          grid: { left: '7%', right: '3%', top: '20%', bottom: '12%', containLabel: true },
          legend: {
            icon: 'rect',
            data: ['日收入', '日盈亏线'],
            orient: 'horizontal', // 水平布局
            align: 'left', // 左对齐
            top: '3%', // 距离上方 3%
            right: '4%', // 距离右侧 4%
            textStyle: {
              color: '#3D3D3D', // 图例文本颜色
              fontSize: 12 // 字体大小
            },
            itemGap: 40, // 图例项之间的间距
            itemWidth: 12, // 图例标记的宽度
            itemHeight: 11
          },
          tooltip: {
            trigger: 'axis',
            padding: 0,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#165DFF',
                width: 1,
                type: 'solid'
              }
            },
            formatter(params) {
              return `
                       <div style="padding: 2px 8px; background-color: #165DFF;">${params[0].name} 实收合计: ${params[0].value}</div>
              `
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisTick: { show: false },
              axisLine: { show: false },
              axisLabel: { color: '#A4A4A4', fontSize: 12 },
              type: 'category',
              boundaryGap: false,
              data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00']
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: { show: false },
              axisLabel: { color: '#A4A4A4', fontSize: 12 },
              axisTick: { show: false }
            }
          ],
          series: [
            {
              name: '日收入',
              type: 'line',
              stack: 'Total',
              lineStyle: {
                color: '#165DFF',
                width: 1
              },
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 4,
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c2d5ff'
                      //渐变色的开始颜色
                    },
                    {
                      offset: 1,
                      color: '#fff'
                      //渐变色的开始颜色
                    }
                  ],
                  false
                )
              },
              itemStyle: {
                color: '#165DFF',
                width: 1
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210],
              markLine: {
                symbol: ['none', 'none'],
                lineStyle: {
                  type: 'solid'
                },
                data: [
                  {
                    type: 'average',
                    yAxis: 150,
                    name: '日盈亏线',
                    label: {
                      show: false
                    },
                    itemStyle: {
                      color: '#D40E0E'
                    }
                  }
                ]
              }
            },
            {
              name: '日盈亏线',
              type: 'line'
            }
          ]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
main {
  box-sizing: border-box;
  background-color: #fff;

  .percent-container {
    height: 110px;
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    background-color: #00092c;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    background: url('../../../assets/images/dashboard/pl-common.png') no-repeat; // pl-overflow
    background-size: cover;

    .name {
      font-weight: normal;
      font-size: 14px;
      margin-top: 5px;
    }
  }

  section {
    display: flex;
    align-items: center;

    .item {
      flex: 1;
      background-color: #f7f8fa;
      border-radius: 8px;
      height: 114px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .charts-container {
    height: 260px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    margin: 16px 0;
  }

  .btn-wrapper {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
