<template>
  <d-row class="docs-devui-row">
    <d-col :span="8">
      <div class="content-card dark-card">
        <div style="display: flex; flex-direction: column; align-items: flex-start;">
          <p style="color: #ced1db; font-weight: bold; font-size: 16px">性能评分</p>
          <div class="grade-number">{{ 58 }}</div>
        </div>
        <div style="width: 100%; height: 90%;">
          <d-chart ref="chart1" :option="useRadarOptions" style="width: 100%; height: 90%; "></d-chart>
          <div class="radar-descript">
            <span style="font-size: 40px">“</span><br />
            <span class="radar-descript-title">成功率</span>
            <span>低于电商场景的通用指标SLA水平，建议从失败请求的业务日志中分析</span><br />
            <span style="margin-top: 8px" class="radar-descript-title">异常数</span>
            <span>建议分析微服务的调用关系，是否存在性能瓶颈</span><br />
            <span style="font-size: 40px; float: right; margin-top: 20px">”</span>
          </div>
        </div>
      </div>
    </d-col>
    <d-col :span="16">
      <d-row>
        <d-col :span="6">
          <div class="content-card-sm">
            <div class="indicator-card">
              <div class="indicator-content">
                <div>
                  <AvatarSvg />
                </div>
                <div class="indicator-content-item">
                  用户数量
                </div>
                <div class="indicator-content-item trend-number">
                  95%
                </div>
              </div>
              <div class="indicator-charts">
                <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                <d-chart ref="chart2" :option="useSimpleBarOptions" style="width: 100%; height: 100px;"></d-chart>
              </div>
            </div>
          </div>
        </d-col>
        <d-col :span="9">
          <div class="content-card-sm">
            <div class="indicator-card">
              <div class="indicator-content">
                <div class="indicator-content-item">
                  <AvatarSvg />
                </div>
                <div class="indicator-content-item">
                  增长趋势
                </div>
                <div class="indicator-content-item trend-number">
                  95%
                </div>
              </div>
              <div class="indicator-charts"  style="flex: 2;">
                <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                <d-chart ref="chart3" :option="usesimpleLineOptions2" style="width: 100%; height: 100px;"></d-chart>
              </div>
            </div>
          </div>
        </d-col>
        <d-col :span="9">
          <div class="content-card-sm">
              <div class="indicator-card">
                <div class="indicator-content">
                  <div class="indicator-content-item">
                    <AvatarSvg />
                  </div>
                  <div class="indicator-content-item">
                    季度变化
                  </div>
                  <div class="indicator-content-item trend-number">
                    95%
                  </div>
                </div>
                <div class="indicator-charts" style="flex: 2;">
                  <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                  <d-chart ref="chart4" :option="usesimpleBarOptions2" style="width: 100%; height: 100px;"></d-chart>
                </div>
              </div>
          </div>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="6">
          <div class="content-card-sm">
            <div class="indicator-card">
              <div class="indicator-content">
                <div class="indicator-content-item">
                  <AvatarSvg />
                </div>
                <div class="indicator-content-item">
                  季度变化
                </div>
                <div class="indicator-content-item trend-number">
                  95%
                </div>
              </div>
              <div class="indicator-charts" style="flex: 2;">
                <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                <d-chart ref="chart5" :option="usesimpleBarOptions2" style="width: 100%; height: 100px;"></d-chart>
              </div>
            </div>
          </div>
        </d-col>
        <d-col :span="9">
          <div class="content-card-sm">
            <div class="indicator-card">
              <div class="indicator-content">
                <div class="indicator-content-item">
                  <AvatarSvg />
                </div>
                <div class="indicator-content-item">
                  全年趋势
                </div>
                <div class="indicator-content-item trend-number">
                  95%
                </div>
              </div>
              <div class="indicator-charts" style="flex: 2;">
                <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                <d-chart ref="chart6" :option="usesimpleLineOptions2" style="width: 100%; height: 100px;"></d-chart>
              </div>
            </div>
          </div>
        </d-col>
        <d-col :span="9">
          <div class="content-card-sm">
            <div class="indicator-card">
              <div class="indicator-content">
                <div class="indicator-content-item">
                  <AvatarSvg />
                </div>
                <div class="indicator-content-item">
                  年度变化
                </div>
                <div class="indicator-content-item trend-number">
                  70%
                </div>
              </div>
              <div class="indicator-charts" style="flex: 2;">
                <p style="color: #babbc0">this week <span style="color: #66cb9f">+263</span></p>
                <d-chart ref="chart7" :option="usesimpleBarOptions2" style="width: 100%; height: 100px;"></d-chart>
              </div>
            </div>
          </div>
        </d-col>
      </d-row>
    </d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">告警统计</div>
          <div class="card-subtitle">华南华北大区外数据正在建设中</div>
          <div class="card-content">
            <d-chart ref="chart8" :option="useBarOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">地域数据</div>
          <div class="card-subtitle">各地域响应数据统计</div>
          <div class="card-content">
            <d-chart ref="chart9" :option="usePieOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">CPU负载</div>
          <div class="card-subtitle">各地域响应数据统计</div>
          <div class="card-content">
            <d-chart ref="chart10" :option="usegGugeOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
  </d-row>
  <d-row class="docs-devui-row">
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">问题统计</div>
          <div class="card-subtitle">各类型问题统计</div>
          <div class="card-content">
            <d-chart ref="chart11" :option="useHorizontalOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">本周变化</div>
          <div class="card-subtitle">各类型问题统计</div>
          <div class="card-content">
            <d-chart ref="chart12" :option="useLineOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
    <d-col :span="8">
      <div class="content-card">
        <div class="chart-card">
          <div class="card-title">未来趋势</div>
          <div class="card-subtitle">各类型问题统计</div>
          <div class="card-content">
            <d-chart ref="chart13" :option="usetrendLineOption" style="width: 100%; height: 300px;"></d-chart>
          </div>
        </div>
      </div>
    </d-col>
  </d-row>
</template>

<script>
import AvatarSvg from './AvatarSvg.vue';
import { defineComponent, reactive, onMounted, onBeforeUnmount, ref } from 'vue'
import { barOption, gaugeOption, lineOption, horizontalOption, pieOption, radarOptions, simpleBarOptions, trendLineOption, simpleLineOptions2, simpleBarOptions2 } from './mockData.ts';

export default defineComponent({
  components: {
    AvatarSvg,
  },
  setup() {

    const useRadarOptions = reactive({...radarOptions})

    const useSimpleBarOptions = reactive({...simpleBarOptions})

    const useBarOption = reactive({...barOption})

    const usePieOption = reactive({...pieOption})

    const usegGugeOption = reactive({...gaugeOption})

    const useHorizontalOption = reactive({...horizontalOption})

    const useLineOption = reactive({...lineOption})

    const usetrendLineOption = reactive({...trendLineOption})

    const usesimpleLineOptions2 = reactive({...simpleLineOptions2})

    const usesimpleBarOptions2 = reactive({...simpleBarOptions2})

    return {
      useRadarOptions,useSimpleBarOptions,useBarOption,usePieOption,usegGugeOption,useHorizontalOption, useLineOption, usetrendLineOption,usesimpleLineOptions2,usesimpleBarOptions2
    }
  }
})

</script>

<style lang="scss" scoped>
@use './Content.scss' as *;

</style>