<template>
    <div class="UnityTrace">
        <header class="header">
            <h5>设备信息</h5>
            <ul>
                <el-row type="flex" class="row">
                    <el-col :span="8" class="col">
                        <span class="title">设备名字：</span>
                        <span class="content">{{ mainInfo.name }}</span>
                    </el-col>
                    <el-col class="col">
                        <span class="title">设备描述：</span>
                        <span class="content">{{ mainInfo.description }}</span>
                    </el-col>
                </el-row>
            </ul>
        </header>
        <section class="section">
            <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                @change="pickerChange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                class="date-picker"
            ></el-date-picker>
            <article v-if="temperatureData || humidityData">
                <chart-a
                    v-if="temperatureData"
                    :data="temperatureData"
                    :time="temperatureTime"
                    class="charts"
                ></chart-a>
                <p v-else class="hint">当前时间段无温度数据...</p>
                <chart-b
                    v-if="humidityData"
                    :data="humidityData"
                    :time="humidityTime"
                    class="charts"
                ></chart-b>
                <p v-else class="hint">当前时间段无温度数据...</p>
            </article>
        </section>
    </div>
</template>

<script>
// import { reqReportList } from "@/api/groupManagment";

import { mapActions } from "vuex";
import chart_a from "./charts/chart_a";
import chart_b from "./charts/chart_b";

const pickerOptions = {
    shortcuts: [
        {
            text: "最近一小时",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 1);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近半天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 12);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近一天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近三天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近一周",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
            }
        }
    ]
};

export default {
    name: "UnityTrace",
    components: {
        "chart-a": chart_a,
        "chart-b": chart_b
    },
    data() {
        return {
            mainInfo: {},
            temperatureData: [],
            temperatureTime: [],
            humidityData: [],
            humidityTime: [],

            pickerOptions,
            value2: null,
            SDate: Math.floor((new Date().getTime() - 3600 * 1000 * 6) / 1000), // 默认最近六小时
            EDate: Math.ceil(new Date().getTime() / 1000)
        };
    },
    created() {
        this.mainInfo = this.$route.query;
        // 一分钟更新一次   后端10分钟更新一次数据
        this.getHumitureList(1);
        this.getHumitureList(2);
    },
    mounted() {},

    methods: {
        ...mapActions(["fetch"]),
        // 事件选择器值改变
        pickerChange(value) {
            console.log(value);
            this.SDate = Math.floor(new Date(value[0]).getTime() / 1000);
            this.EDate = Math.ceil(new Date(value[1]).getTime() / 1000);
            console.log(this.SDate, this.EDate);
            this.getHumitureList(1);
            this.getHumitureList(2);
        },
        // 请求温湿度
        getHumitureList(type) {
            // type：1-温度 2-湿度
            this.fetch({
                api: "/analyse/hm/device/history/by-device-id",
                method: "GET",
                data: {
                    deviceId: this.mainInfo.id,
                    type,
                    fromDate: this.SDate,
                    toDate: this.EDate,
                    page: 1,
                    size: 10000
                },
                // data: { deviceId: 666, type },
                success: res => {
                    console.log(res);
                    console.log(type);
                    if (type == 1) {
                        res.content.forEach(item => {
                            this.temperatureData.push(item.value);
                            this.temperatureTime.push(item.created);
                        });
                        console.log(this.temperature);
                    } else if (type == 2) {
                        res.content.forEach(item => {
                            this.humidityData.push(item.value);
                            this.humidityTime.push(item.created);
                        });
                        console.log(this.temperature);
                    }
                },
                fail: err => {
                    console.log(err);
                    if (err.errCode == "request_not_authorize") {
                        this.$message({
                            message: "请重新登录",
                            type: "warning"
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.UnityTrace {
    .header {
        border: 1px solid #eee;
        padding: 10px;
        h5 {
            font-size: 18px;
        }
        .row {
            padding-left: 100px;
            margin-bottom: 10px;
            .col {
                overflow: ellipsis;
                .title {
                    font-size: 15px;
                }
                .content {
                    font-size: 14px;
                    color: #555;
                }
            }
        }
    }
    .section {
        .date-picker {
            margin-left: 48%;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .charts {
            border-top: 1px solid #ccc;
            padding-top: 25px;
        }
    }
}
</style>
