<template>
  <div class="page-panel">
    <div class="left-panel">
      <div class="head-title">查看设置</div>
      <el-form ref="form" :model="form" size="small" label-width="auto">
        <el-form-item label="监测站点">
          <el-select v-model="form.site" placeholder="选择监测站点" filterable clearable style="width:calc(100% - 85px)">
            <el-option v-for="(item,index) in []" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button type="warning">图上选点</el-button>
        </el-form-item>
        <el-form-item label="指标参数">
          <el-input v-model="form.param" placeholder="输入指标参数" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="采集时间">
          <el-date-picker v-model="form.date" align="right" type="date" placeholder="选择日期" value-format="yyyy/MM/dd" :picker-options="pickerOptions" style="width:100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="统计方式">
          <el-radio-group v-model="form.radio">
            <el-radio :label="3">实时监测</el-radio>
            <el-radio :label="6">按每15分钟均值</el-radio>
            <el-radio :label="9">按每小时均值</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="统计图剔除">
          <el-button type="warning" icon="el-icon-plus" class="add-btn"></el-button>
          <div class="reject-list">
            <div v-for="(item,index) in [{checked:true,value:''},{checked:true,value:''}]" :key="index" class="reject-item">
              <el-checkbox v-model="item.checked"></el-checkbox>
              <el-input v-model="item.value" style="width:60px"></el-input>
              <span>~</span>
              <el-input v-model="item.value" style="width:60px"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" style="width:100%">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="head-title">
        <span style="margin-right:10px">监测站点</span>
        <el-checkbox v-model="form.checked1">显示首页监测站点</el-checkbox>
        <el-checkbox v-model="form.checked2">显示选中监测站点</el-checkbox>
      </div>
      <div class="map-box">
        <ol-map ref="map"></ol-map>
      </div>
    </div>
    <div class="right-panel">
      <div class="head-title">
        <span style="margin-right:10px">监测曲线</span>
        <el-checkbox v-model="form.checked1">按监测点融合展示</el-checkbox>
        <el-checkbox v-model="form.checked2">按指标融合展示</el-checkbox>
      </div>
      <div class="right-chart-box" id="main-chart1"></div>
      <div class="right-chart-box" id="main-chart2"></div>
    </div>
  </div>
</template>

<script>
import olMap from '@/views/spectrum/common/olMap/index.vue'
import * as echarts from 'echarts'
export default {
  components: {
    olMap
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      form: {}
    }
  },
  mounted() {
    this.loadChart('main-chart1', '化学需氧量（单位：mg/L）')
    this.loadChart('main-chart2', '电导率（单位：ms/m）')
  },
  methods: {
    loadChart(domId, text) {
      var chartDom = document.getElementById(domId)
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          show: 'true',
          text: text,
          padding: [20, 20, 100, 30],
          textStyle: {
            color: '#3b82ea',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(115, 136, 244, 0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(140, 76, 228, 0.9)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-panel {
  width: 100%;
  height: 100%;
  background-color: #eff0f5 !important;
  box-sizing: border-box;
  padding: 10px;
  .head-title {
    font-size: 16px;
    // font-family: '宋体';
    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;
    }
  }
  .left-panel {
    float: left;
    width: 30%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 20px;
    padding-bottom: 20px;
    padding-top: 10px;
    overflow-y: auto;
    .add-btn {
      width: 20px;
      height: 20px;
      padding: 0;
      vertical-align: top;
      margin-top: 5px;
    }
    .reject-list {
      display: inline-block;
      width: calc(100% - 25px);
      .reject-item {
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 5px;
      }
    }
    .map-box {
      width: 100%;
      height: 440px;
      border: 1px solid #ccc;
      margin-top: 10px;
    }
  }
  .right-panel {
    float: left;
    width: calc(70% - 20px);
    margin-left: 20px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    .right-chart-box {
      width: 100%;
      height: calc(50% - 25px);
      //   background-color: rgb(158, 135, 135);
      &:first-child {
        margin-bottom: 5px;
      }
      &:last-child {
        margin-top: 5px;
      }
    }
  }
}
</style>