<template>
    <view :style="{height:'100vh',overflow:'auto',backgroundColor:'#fff'}">
        <u-navbar :title="stnm" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
        </u-navbar>
        <view class="tab-bar" style="margin-top:70px">
            <view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
                监测数据
            </view>
            <view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
                统计数据
            </view>
        </view>
        <view style="padding:10px" v-if="activeOne == 0">
            <view class="time-ranger">
                <view class="start-time">
                    <text>开始时间</text>
                    <text @click="showTime=true" style="margin-left:10%;color:#3399ef">{{stm}}</text>
                </view>
                <view class="end-time">
                    <text>结束时间</text>
                    <text @click="showTime1=true" style="margin:0 10%;color:#3399ef">{{etm}}</text>
                    <view class="search-btn" @click="searchHandle">
                        搜索
                    </view>
                </view>

            </view>
            <view class="ylz-chart-area">
                <qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
            </view>
            <view class="ylz-table-area">
                <YlzTable :tableData="ylzData"></YlzTable>
            </view>
            <view>
                <view class="yl-dl-yb">
                    <text class="yl-bluetiao"></text>
                    <text>短临预报</text>
                </view>
                <view style="margin-top:5px;margin-left:10px">预报时间：{{projectTime}}</view>
                <view class="ylzpro-chart-area" v-if="projectData">
                    <view class="real-sw">
                        <text class="sw-name">1h</text>
                        <text style="font-size:22px;margin-right:5px;">{{projectData}}</text>
                        <text>mm</text>
                    </view>
                    <!-- <qiun-data-charts :chartData="projectBarData.chartData" :echartsApp="true" :eopts="projectBarData.eopts" /> -->
                </view>
                <view
                    style="height:250px;display: flex;align-items: center;justify-content: center;background-color: #fff;margin-top:10px"
                    v-else>
                    <image src="../../../static/empty.png" mode=""></image>
                </view>
            </view>

        </view>
        <view v-if="activeOne == 1" style="padding:10px">
            <Table></Table>
        </view>

        <u-datetime-picker :show="showTime" v-model="startTime" mode="datetime" @confirm="handleStartTime"
            @cancel="showTime=false"></u-datetime-picker>
        <u-datetime-picker :show="showTime1" v-model="endTime" mode="datetime" @confirm="handleEndTime"
            @cancel="showTime1=false"></u-datetime-picker>
    </view>
</template>
<script>
    import moment from 'moment';
    import Table from "./tjsjTable.vue"
    import YlzTable from "./jcTable.vue"
    import drpOptions from './jcOptions'
    import projectOptions from './barOptions'
    const stm = moment().subtract(7, 'days').set({
        minute: 0,
        second: 0
    }).format("YYYY-MM-DD HH:mm");
    const etm = moment().set({
        minute: 0,
        second: 0
    }).format("YYYY-MM-DD HH:mm");
    const projectTime = moment().set({
        minute: 0,
        second: 0
    }).format("YYYY-MM-DD HH:mm")
    export default {
        components: {
            Table,
            YlzTable
        },
        data() {
            return {
                startTime: stm,
                endTime: etm,
                stm,
                etm,
                showTime: false,
                showTime1: false,
                activeOne: 0,
                ylzData: [],
                chartData1: {},
                chartData: {},
                stnm: '',
                stcd:'',
                projectTime,
                projectData: '',
                projectBarData: {}
            }
        },
        methods: {

            // 获取雨量信息
            async getrainInfo() {
                try {
                    const {
                        data
                    } = await uni.$http.post(
                        "/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime", {
                            stcd: this.stcd,
                            startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
                            endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
                        })
                    if (data.code == 200) {
                        this.ylzData = data.data;
                    }
                } catch (error) {
                    uni.$showMsg();
                }
            },

            // 获取雨量图表信息
            async getrainChartInfo() {
                try {
                    const {
                        data
                    } = await uni.$http.post(
                        "/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime", {
                            stcd: "61610700",
                            startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
                            endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
                        })

                    if (data.code == 200) {
                        this.chartData1 = {
                            ...data.data
                        }
                    }
                } catch (error) {
                    uni.$showMsg();
                }
            },
            handleStartTime(e) {
                let time = moment(e.value).format("YYYY-MM-DD HH:mm")
                this.stm = time
                this.showTime = false
            },
            handleEndTime(e) {
                let time = moment(e.value).format("YYYY-MM-DD HH:mm")
                this.etm = time;
                this.showTime1 = false
            },

            searchHandle() {
                this.getrainInfo();
                this.getrainChartInfo();
            },
            // 获取预报数据
            async getPreReportData() {
                try {
                    const {
                        data
                    } = await uni.$http.post(
                        "/gunshiApp/tsg/weather/short/fore", {
                            tm: moment(this.projectTime).format('YYYYMMDDHHmm')
                        })
                    if (data.code == 200) {
                        //                 this.projectBarData = {
                        //     ...projectOptions(data.data)
                        // }
                        this.projectData = data.data.find(item => item.stcd == this.stcd).h2;
                    }

                } catch (error) {
                    uni.$showMsg();
                }
            }
        },
        watch: {
            chartData1(n, o) {
                this.chartData = {
                    ...drpOptions(n)
                }
            },
        },
        onLoad(options) {
            this.stnm = options.stnm
            this.stcd = options.stcd
        },
        mounted() {
            this.getrainInfo();
            this.getrainChartInfo();
            this.getPreReportData();

        }
    }
</script>

<style lang="scss" scoped>
    .tab-bar {
        display: flex;
        justify-content: space-around;
        padding: 10px 40px;
        border-bottom: 1px solid #dfdfdf;
        background-color: #fff;
    }

    .active {
        color: #39a6ff;
    }

    .ylz-chart-area {
        width: 100%;
        height: 230px;
        background-color: #fff;
    }

    .ylz-table-area {
        background-color: #fff;
    }

    .yl-dl-yb {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .yl-bluetiao {
        width: 5px;
        height: 15px;
        background-color: #02a7f0;
        margin-right: 10px;
    }

    .ylzpro-chart-area {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        background-color: #fff;
    }

    .real-sw {

        width: 50%;
        position: relative;
        border: 1px solid #efefef;
        height: 60px;
        text-align: center;
        line-height: 75px;
        margin-right: 10px;

        .sw-name {
            position: absolute;
            top: 0;
            left: 0;
            // padding: 0 5px;
            color: #49a7f0;
            background-color: #cbecfd;
            font-size: 12px;
            line-height: 20px;
            padding: 0 5px;
        }
    }
</style>