<template>
  <div class="summary">
    <div v-loading="loading.base">
      <tf-title>评估结论</tf-title>
      <div class="text">
        系统已入库存量排水管网
        <span ref="color">{{ base.pipeLength }} </span>公里，共布设监测点位
        <span>{{ base.monitoringPoint }} </span>个，其中管网水质监测仪 <span>{{ base.pipeMonitor }} </span>台，液位计
        <span>{{ base.contentGauge }} </span>台，地表水水质监测仪 <span>{{ base.waterMonitor }} </span>台， 覆盖排水管线
        <span>{{ base.coverPipe }} </span>公里，通过系统大数据分析，管网健康等级评估结果如下：
      </div>
      <div class="levels">
        <el-row type="flex">
          <el-col
            :span="12"
            v-for="{ pipeLength, pipeLevel, pipePerCent } of base.assessmentPipes || []"
            :key="pipeLevel"
          >
            {{ pipeLevel }}管线
            <span>{{ pipeLength }}</span>
            公里：占参与评估管网的
            <span>{{ pipePerCent }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-row class="chart" type="flex">
      <el-col :span="12">
        <v-chart
          :option="healthOption"
          autoresize
          v-loading="loading.health"
          style="width: 100%; height: 200px"
          v-if="healthOption.dataset && healthOption.dataset.source && healthOption.dataset.source.length > 0"
        />
        <el-empty :image="emptyImg" v-else>
          <template v-slot:description>&nbsp;</template>
        </el-empty>
      </el-col>
      <el-col :span="12">
        <v-chart
          :option="assessmentOption"
          v-loading="loading.assessment"
          autoresize
          style="width: 100%; height: 200px"
          v-if="
            assessmentOption.dataset && assessmentOption.dataset.source && assessmentOption.dataset.source.length > 0
          "
        />
        <el-empty :image="emptyImg" v-else>
          <template v-slot:description>&nbsp;</template>
        </el-empty>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { IAssessmentAssessment, IAssessmentBase, IAssessmentHealth } from '../api/common'
  import emptyImg from '@/assets/icon/null.png'

  @Component({ name: 'AssessmentSummary' })
  export default class Summary extends Vue {
    @Prop({ type: Object, default: () => ({}) }) base!: IAssessmentBase
    @Prop({ type: Array, default: () => [] }) health!: IAssessmentHealth[]
    @Prop({ type: Array, default: () => [] }) assessment!: IAssessmentAssessment[]
    @Prop({
      type: Object,
      default: () => ({
        base: false,
        health: false,
        assessment: false
      })
    })
    loading!: {
      base: boolean
      health: boolean
      assessment: boolean
    }
    emptyImg = emptyImg

    getStyle() {
      try {
        const { color, fontFamily } = window.getComputedStyle(this.$refs.color as any, null)
        return { color, fontFamily }
      } catch (error) {
        console.log(error)
      }
      return {}
    }

    get healthOption() {
      return {
        title: {
          text: '按管网评估情况统计',
          bottom: 0,
          left: 'center',
          textStyle: { fontSize: 14, ...this.getStyle() }
        },
        tooltip: { trigger: 'item' },
        dataset: { source: this.health || [] },
        series: [
          {
            name: '按管网评估情况统计',
            type: 'pie',
            radius: '50%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
    get assessmentOption() {
      return {
        title: {
          text: '按管网健康等级统计',
          bottom: 0,
          left: 'center',
          textStyle: { fontSize: 14, ...this.getStyle() }
        },
        tooltip: { trigger: 'item' },
        dataset: { source: this.assessment || [] },
        series: [
          {
            name: '按管网健康等级统计',
            type: 'pie',
            radius: '50%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .summary {
    font-size: $--font-size-base;
    .text {
      line-height: 1.6;
    }
    .text,
    .levels {
      span {
        color: $--color-primary;
        font-weight: bold;
        display: inline-block;
        padding: 0 2px;
      }
    }
    .levels {
      background-color: $--background-color-base;
      padding: $gutter $gutter * 3;
      margin-top: $gutter;
      text-align: center;
      span {
        font-size: 130%;
      }
      > div {
        flex-wrap: wrap;
        line-height: 1.8;
      }
    }
  }
</style>
