<template>
  <tf-page :isActive="isActive">
    <div class="content">
      <div class="title">管网健康情况评估报告</div>
      <el-row type="flex" :gutter="15">
        <el-col :span="12" style="height: 400px">
          <Summary :base="baseData" :health="healthData" :assessment="assessmentData" :loading="loading" />
        </el-col>
        <el-col :span="12" style="height: 400px">
          <Chart :flaw="flawData" :loading="loading.flaw" />
        </el-col>
      </el-row>
      <Table />
      <div class="table">
        <div class="btns">
          <el-button type="primary" size="small" @click="download" :loading="loading.export">下载</el-button>
          <!-- <el-button type="primary" size="small" v-print="'#assessmentReport'">打印</el-button> -->
        </div>
        <tf-table
          id="assessmentReport"
          ref="table"
          :columns="assessmentCols"
          :data="pipes"
          :pagination="pagination"
          v-loading="loading.page"
          @page-change="onPageChange"
          style="padding-left: 0; padding-right: 0; min-height: 300px"
          auto-height
        />
      </div>
    </div>
  </tf-page>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { IPagination } from '@/api/common'
  import { getDefaultPagination } from '@/utils/constant'
  import Summary from './Summary.vue'
  import Chart from './Chart.vue'
  import {
    IAssessment,
    IAssessmentAssessment,
    IAssessmentBase,
    IAssessmentFlaw,
    IAssessmentHealth
  } from '../api/common'

  import {
    fetchBaseReport,
    fetchFlawReport,
    fetchHealthReport,
    fetchAssessmentReport,
    fetchReportPage
  } from '../api/assessment'
  import { assessmentCols } from '../utils'
  import { exportXlsx } from '@/utils/xlsxExport'
  import { ElTable } from 'element-ui/types/table'

  @Component({ name: 'Statistics', components: { Summary, Chart } })
  export default class Statistics extends Vue {
    @Prop({ type: Boolean, default: false }) isActive!: boolean

    assessmentCols = assessmentCols

    visible = false

    loading = { query: false, export: false, base: false, flaw: false, health: false, assessment: false, page: false }

    pagination: IPagination = getDefaultPagination()

    baseData: Partial<IAssessmentBase> = {}
    flawData: Partial<IAssessmentFlaw> = {}
    healthData: Partial<IAssessmentHealth>[] = []
    assessmentData: Partial<IAssessmentAssessment>[] = []
    pipes: Partial<IAssessment>[] = []
    $refs!: { table: ElTable }

    async fetchBaseReport() {
      this.loading.base = true
      try {
        const { result } = await fetchBaseReport()
        this.baseData = result
      } catch (error) {
        console.log(error)
      }
      this.loading.base = false
    }
    async fetchFlawReport() {
      this.loading.flaw = true
      try {
        const { result } = await fetchFlawReport()
        this.flawData = result
      } catch (error) {
        console.log(error)
      }
      this.loading.flaw = false
    }
    async fetchHealthReport() {
      this.loading.health = true
      try {
        const { result } = await fetchHealthReport()
        this.healthData = result
      } catch (error) {
        console.log(error)
      }
      this.loading.health = false
    }
    async fetchAssessmentReport() {
      this.loading.assessment = true
      try {
        const { result } = await fetchAssessmentReport()
        this.assessmentData = result
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      } catch (error) {
        console.log(error)
      }
      this.loading.assessment = false
    }
    async fetchReportPage() {
      this.loading.page = true
      try {
        const {
          result: { records }
        } = await fetchReportPage(this.pagination)
        this.pipes = records
      } catch (error) {
        console.log(error)
      }
      this.loading.page = false
    }

    async doQuery() {
      this.loading.query = true
      await Promise.all([
        this.fetchBaseReport(),
        this.fetchFlawReport(),
        this.fetchHealthReport(),
        this.fetchAssessmentReport(),
        this.fetchReportPage()
      ])
      this.loading.query = false
    }

    async download() {
      this.loading.export = true
      await exportXlsx('管网健康情况评估报告', this.pipes, assessmentCols)
      this.loading.export = false
    }

    onPageChange(pagination) {
      this.pagination = { ...this.pagination, ...pagination }
      this.doQuery()
    }

    preparing() {
      this.doQuery()
    }

    mounted() {
      this.preparing()
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    padding: 0 $gutter $gutter;
    background-color: $--color-white;
    color: $--color-text-primary;
    .title {
      text-align: center;
      font-size: $--font-size-large;
      border-bottom: $--border-base;
      padding: $gutter 0;
      font-weight: bold;
      margin-bottom: $gutter;
    }
    .table {
      .btns {
        text-align: right;
        margin-top: $gutter;
      }
    }
  }
</style>
