<template>
  <div class="summary">
    <tf-title>统计分析概况</tf-title>
    <el-row :gutter="10" type="flex" class="container">
      <el-col :span="12" class="content">
        <el-row type="flex">
          <span style="white-space: nowrap">站点名称：</span>
          <el-col>{{ info.siteName }}</el-col>
        </el-row>
        <el-row type="flex">
          <span style="white-space: nowrap">排水分区：</span>
          <el-col>{{ info.partitionName }}</el-col>
        </el-row>
        <el-row type="flex">
          <span style="white-space: nowrap">排水分组：</span>
          <el-col>{{ info.groupByName }}</el-col>
        </el-row>
        <el-row type="flex">
          <span style="white-space: nowrap">站点备注：</span>
          <el-col>{{ info.siteNote }} </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <span style="white-space: nowrap">分析备注：</span>
          <el-col style="text-align: right" v-if="siteId">
            <el-button icon="el-icon-edit" type="text" size="small" @click="onEdit">
              {{ noteEditing ? '取消' : '编辑' }}
            </el-button>
            <el-button icon="el-icon-check" type="text" size="small" @click="onSubmit" v-show="noteEditing">
              保存
            </el-button>
          </el-col>
        </el-row>
        <div class="notes" v-if="info.notes || noteEditing">
          <template v-if="noteEditing">
            <el-input type="textarea" :rows="5" v-model="note" maxlength="1000" />
          </template>
          <template v-else>{{ info.notes }}</template>
        </div>
      </el-col>
      <el-col :span="12"><Map :coordinate="coordinate" /></el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { IStatisticsBase } from '../api/common'
  import { addNote } from '../api/statistics'
  import Map from './Map.vue'

  @Component({ name: 'QuerySummary', components: { Map } })
  export default class QuerySummary extends Vue {
    @Prop({ type: Object, default: () => ({}) }) info!: IStatisticsBase
    @Prop({ type: Number }) siteId!: number

    noteEditing: boolean = false
    submitting: boolean = false
    note: string = ''

    get coordinate() {
      const { longitude, latitude } = this.info || {}
      return longitude && latitude ? [Number(longitude), Number(latitude)] : []
    }

    onEdit() {
      this.note = this.info.notes
      this.noteEditing = !this.noteEditing
    }
    async onSubmit() {
      this.submitting = true
      try {
        const { result } = await addNote({ siteId: this.siteId, analyzeNote: this.note })
        this.$message[result ? 'success' : 'error'](`修改分析备注${result ? '成功!' : '失败!'}`)
        result && this.$emit('refresh')
      } catch (error) {
        console.log(error)
      }
      this.submitting = false
      this.noteEditing = false
    }
  }
</script>

<style lang="scss" scoped>
  .summary {
    height: 100%;
    display: flex;
    flex-direction: column;
    .container {
      flex: auto;
    }
    .content {
      font-size: $--font-size-small;
      color: $--color-text-regular;
      line-height: 2;
      span {
        color: $--color-text-secondary;
        margin-right: 0.875em;
      }
    }
    .notes {
      min-height: 180px;
      @include base-scroll-bar();
      overflow: auto;
      padding: $gutter;
      background-color: $--background-color-base;
      font-size: $--font-size-small;
      line-height: 1.6;
      white-space: pre-wrap;
    }
  }
</style>
