<template>
  <view class="jcsj-box">
    <view class="time-ranger">
      <uni-datetime-picker  type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
      <view class="search-btn" @click="searchHandle">
        搜索
      </view>
    </view>
<!--    <view class="" style="width: 100%; height: 3px; background-color: #dfdfdf; margin-bottom: 2px;">
      
 "   </view> -->
   <view style="text-align: right; margin-bottom: -15px;">
      <text :class="{'active':selactOne == 0}" @click="selactOne = 0" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">图</text>
      <text :class="{'active':selactOne == 1}" @click="selactOne = 1" style="display: inline-block; padding: 2px 20px; text-align: center; border: 1px solid #dfdfdf;">表</text>
    </view>
    <view class="jcsj-charts" v-if="selactOne == 0">
      <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
    </view>
   <view style="margin-top: 20px;" v-if="selactOne == 1">
      <JcsjTable :tableData="tableData" />
    </view>
  </view>
</template>

<script>
  import moment from "moment"
  import JcsjTable from "./jcsjTable"
  import drpOption from "./chartOption.js"  
  const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
  const etm =  moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
  export default {
    props:{
      stcd:String,
      source:String,
      wrz:String,
      grz:String,
      default:''
    },
    data() {
      return {
        tm:[stm,etm],
        tableData:[],
        chartData: {},
        rainChartData:[],
        selactOne:0
      }
    },
    components:{
      JcsjTable
    },
    watch:{
      rainChartData(newV, oldV){
        this.chartData = {...drpOption(newV,this.grz,this.wrz)}
        this.tableData = [...newV]
      }
    },
    methods: {
      handleRanger(e){
        console.log(e);
        this.tm = [...e]
      },
      // 搜索
      async getJcsjData(){
        try{ 
          const {data} = await uni.$http.post(
          "/gunshiApp/xfflood/reservoir/water/monitor/data",
          {
            stcd:this.stcd,
            stm:moment(this.tm[0]).format("YYYY-MM-DD HH:mm:ss"),
            etm:moment(this.tm[1]).format("YYYY-MM-DD HH:mm:ss"),
            source:this.source
          })
          if(data.code == 200){
            this.rainChartData = [...data.data];
          }
        }catch(e){
         uni.$showMsg();
        }
      },
    // 搜索
      searchHandle(){
        this.getJcsjData();
      }
    },
    mounted() {
       this.getJcsjData();
    },
  }
</script>

<style lang="scss" scoped>
.jcsj-box{
  .time-ranger{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .search-btn{
      margin: 3px 0 0 5px;
      color: #3399ef;
    }
  }
  .jcsj-charts{
    width:100%;
    height: 530px;
    margin-top: 20px;
  }
  .active{
    border-color: #68bbff !important;
    color: #68bbff;
  }
}
</style>
