<template>
  <view class="sssw-box">
    <view class="time-ranger">
      <uni-datetime-picker 
      type="datetimerange" 
      v-model="tm" 
      @change="handleRanger"
      @open="onPickerOpen"
      hide-second
      :clear-icon="false"
      rangeSeparator="至"
      ></uni-datetime-picker>
      <view class="select-bar">
        <uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
        </uni-data-select>
      </view>
    </view>
    <view class="realWater-content">
       <qiun-data-charts canvasId="myChart"  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
    </view>
  </view>
</template>

<script>
  import moment from "moment"
  import waterOptions from './swOption'
  const stm = moment().subtract(1, 'days').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:00:00");
  const etm =  moment().set({minute: 0, second: 0}).format("YYYY-MM-DD HH:00:00");
  export default {
    props:{
      stcd:String,
      resCode:String,
    },
    data() {
      return {
        tm:[stm,etm],
        list:[],
        value: "",
        chartData: waterOptions(),
        chartOpts: {
        tooltip: {
          show: true
        },
      },
      }
    },
  methods: {
     onPickerOpen() {
      this.chartOpts.tooltip.show = false
    },
      handleRanger(e){
        this.tm = [...e]
      
      },
      change(e) {
        this.value = e;
        this.chartOpts.tooltip.show = false
      }
    },
    mounted() {
     
    }
  }
</script>
<style lang="scss" scoped>
.sssw-box {
  .time-ranger {
    margin: 10px 0;
  }
  .select-bar{
    margin: 10px 0;
  }

  .realWater-content{
    height: 320px;
  }
}
</style>