<template>
  <div class="monitor-panel">
    <div class="top-div head-title">
      <span>监测查看</span>
      <span class="closer el-icon-close" @click="handClose"></span>
    </div>
    <div class="body-div">
      <el-form ref="form" :model="form" label-width="auto" size="small" :inline="true">
        <el-form-item label="监测点">
          <el-select v-model="form.model" placeholder="请选择" style="width:120px">
            <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="指标" label-width="40px">
          <el-select v-model="form.model" placeholder="请选择" style="width:100px">
            <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="日期范围">
          <el-select v-model="form.model" placeholder="请选择" style="width:130px">
            <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">
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="chart-box" v-for="(item,index) in [1,2]" :key="index" :ref="'mchart'+index"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      form: {}
    }
  },
  mounted() {},
  watch: {},
  methods: {
    query() {
      this.open()
    },
    open() {
      this.$nextTick(() => {
        this.loadChart('mchart0')
        this.loadChart('mchart1')
      })
    },
    loadChart(domId) {
      let chartDom = this.$refs[domId][0]
      console.log('dom',chartDom);
      let myChart = echarts.init(chartDom)
      let option = {
        // title: {
        //   text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['COD', '雨量']
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30',
            '2022-6-12 \n 12:30:30'
          ]
        },
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            inverse: true
          }
        ],
        series: [
          {
            showSymbol: false,
            name: 'COD',
            type: 'line',
            data: [0, 0, 10, 6, 13, 0, 0]
          },
          {
            showSymbol: false,
            yAxisIndex: 1,
            name: '雨量',
            type: 'line',
            data: [80, 70, 91, 74, 90, 80, 80]
          }
        ]
      }
      myChart.clear()
      option && myChart.setOption(option)
    },
    /**
     * 关闭
     */
    handClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor-panel {
  width: calc(100% - 50px);
  height: 310px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  bottom: 25px;
  margin-left: 5px;
  .head-title {
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    margin: 10px 0;
    font-weight: 500;

    &::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 16px;
      background: #2a77f7;
      vertical-align: bottom;
      margin-right: 5px;
    }
  }
  .top-div {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border-bottom: 1px solid #dbdbdb;
    padding: 0 10px;
    .closer {
      position: absolute;
      right: 10px;
      top: 15px;
      cursor: pointer;
      color: #858585;
    }
  }
  .body-div {
    width: 100%;
    height: calc(100% - 102px);
    .chart-box {
      width: calc(50% - 5px);
      height: 200px;
      float: left;
      &:nth-child(2n + 1) {
        margin-left: 5px;
      }
      &:nth-child(2n) {
        margin-right: 5px;
      }
    }
  }
}
</style>