<template>
  <div class="page-panel">
    <div class="left-panel">
      <mini-map layerControl projectList partsCheck>
        <template slot="topBar">
          <div @click="viewCurve()">监测查看</div>
          <thematic-map></thematic-map>
        </template>
      </mini-map>
      <!-- <transition name="el-zoom-in-bottom">
        <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
      </transition> -->
    </div>
    <div class="right-panel">
      <div class="top-box">
        <el-form ref="form" :model="form" :inline="true" size="small">
          <el-form-item label="监测点" label-width="60px">
            <el-select v-model="form.siteId" filterable placeholder="选择站点" clearable>
              <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围" label-width="80px">
            <el-select v-model="form.model" placeholder="请选择">
              <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0" style="float: right;">
            <el-button type="primary" @click="getRemouldConclusion()">开始评估</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="middle-box">
        <div class="head-title">评估结果</div>
        <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
      color: '#333333', height: '40px', textAlign: 'center' }" max-height="200px">
          <template slot="empty">
            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
          </template>
          <el-table-column prop="waterQualityIndex" label="水质指标" align="center"></el-table-column>
          <el-table-column prop="remouldAfter" label="改造后实际值" align="center"></el-table-column>
          <el-table-column prop="remouldBefore" label="改造前均值" align="center"></el-table-column>
          <el-table-column prop="compareRemouldBefore" label="较改造前" align="center">
            <template slot-scope="{row}">
              <span style="color:#36c46e">{{row.compareRemouldBefore}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remouldAfterTarget" label="改造后目标值" align="center"></el-table-column>
          <el-table-column prop="compareTarget" label="较目标值" align="center">
            <template slot-scope="{row}">
              <span :style="{color:row.result=='达标'?'#36c46e':'#f33d48'}">{{row.compareTarget}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="result" label="结论" align="center">
            <template slot-scope="{row}">
              <span :style="{color:row.result=='达标'?'#36c46e':'#f33d48'}">{{row.result}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom-box">
        <zb-item v-for="(item,index) in chartsData" :key="index" :data="item"></zb-item>
      </div>
    </div>
    <!-- 监测曲线 -->
    <historyCurve ref="historyCurve"></historyCurve>
  </div>
</template>

<script>
import miniMap from '@/views/widgets/miniMap/index.vue'
import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
import thematicMap from '@/views/widgets/thematicMap/index.vue'
import historyCurve from '@/views/spectrum/common/historyCurve/index'

import zbItem from './zbItem/index'
import * as echarts from 'echarts'

import { getRemouldConclusion } from '@/views/spectrum/reform/api/api'
import { getSites } from '@/views/spectrum/dynamicMonitor/api/api'
export default {
  components: {
    miniMap,
    moniterSee,
    thematicMap,
    historyCurve,
    zbItem
  },
  data() {
    return {
      form: {},
      tableData: [],
      siteOption: [],
      moniterVisible: false,
      // 图表数据
      chartsData: []
    }
  },
  mounted() {
    this.getSites()
    this.getRemouldConclusion()
  },
  methods: {
    /**
     * 获取站点
     */
    getSites() {
      getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then((res) => {
        if (res.code && res.code == 1) {
          this.siteOption = res.result.records
          if (this.siteOption.length > 0) this.$set(this.form, 'siteId', this.siteOption[0].id)
        }
      })
    },
    /**
     * 改造后评估结果
     */
    async getRemouldConclusion() {
      getRemouldConclusion({ siteId: this.form.siteId }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.result.assessmentConclusions
          this.chartsData = res.result.maps
        }
      })
    },
    viewCurve(row = null) {
      this.$refs.historyCurve.show(row)
    },
    moniterClose() {
      this.moniterVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>