<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 class="jcsj-charts">
      <qiun-data-charts  :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts"/>
    </view>
    <view class="jcsj-table">
      <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,
      default:''
    },
    data() {
      return {
        tm:[stm,etm],
        tableData:[],
        chartData: {},
        rainChartData:{},
      }
    },
    components:{
      JcsjTable
    },
    watch:{
      rainChartData(newV, oldV){
        this.chartData = {...drpOption(newV)}
      }
    },
    methods: {
      handleRanger(e){
        console.log(e);
        this.tm = [...e]
      },
      // 搜索
      async getJcsjData(){
        try{ 
          const {data} = await uni.$http.post(
          "/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",
          {
            stcd:this.stcd,
            startTime:moment(this.tm[0]).format("YYYY-MM-DD HH:mm:ss"),
            endTime:moment(this.tm[1]).format("YYYY-MM-DD HH:mm:ss"),
          })
          if(data.code == 200){
            this.tableData = [...data.data]
          }
        }catch(e){
         uni.$showMsg()
        }
      },
          // 获取图表数据
      async getRainChartData(){
            try{
              const {data} = await uni.$http.post(
              "/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",
              {
                stcd:this.stcd,
                startTime:moment(this.tm[0]).format("YYYY-MM-DD HH:mm:ss"),
                endTime:moment(this.tm[1]).format("YYYY-MM-DD HH:mm:ss"),
              })
              console.log("data",data);
              if(data.code == 200){
                this.rainChartData = {...data.data}
              }
            }catch(e){
              uni.$showMsg()
            }
          },
    // 搜索
      searchHandle(){
        this.getJcsjData();
        this.getRainChartData()
      }
    },
    mounted() {
       this.getJcsjData()
       this.getRainChartData()
    },
  }
</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: 300px;
  }
}
</style>
