<template>
    <div class="formula realTime historyData">
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                历史数据
            </div>
            <div class="flex-view">
                <div class="input-btn">
                    <span>快速查询</span>
                    <div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
                        今日
                    </div>
                    <div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
                        昨日
                    </div>
                    <div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
                        自定义
                    </div>
                </div>
                <div class="input-sel-time">
                    <span>时间段</span>
                    <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </div>
                <div class="input-btn ">
                    <div class="btn blue" @click="search">
                        查询
                    </div>
                    <div class="btn blue" @click="download">
                        下载
                    </div>
                    <!-- <div class="btn blue">
                        数据统计
                    </div>
                    <div class="btn blue">
                        日/夜平均时间范围设置
                    </div> -->
                </div>
            </div>

            <div class="table-view">
                <el-table :data="tableData" :row-class-name="tableRowClassName" max-height="520" style="width: 100%">
                    <el-table-column min-width='150' prop="time" label="时间"></el-table-column>
                    <el-table-column min-width='150' :label="item" v-for="item, index in tableList" :key="index">
                        <template slot-scope="scope">
                            <div>{{ scope.row['data' + index] }}</div>
                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100, 200, 500, 1000,1500]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { Loading } from 'element-ui';
export default {
    data() {
        return {
            active: 0,
            dateRange: [],
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            tableList: [],
            total: 0,
            loading:null,
        }
    },
    watch: {
        active(newVal, oldVal) {
            if (newVal != 2) {
                this.dataInit()
            }
        },
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state

            this.dataInit()
        },
    },

    mounted() {

        this.dataInit()
    },
    methods: {
        getTime(time) {
            // 中国标准时间
            var chinaTime = new Date(time);

            // 将中国标准时间转换为UTC时间
            var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);

            // 将UTC时间转换为2024-02-17 00:00:00格式
            var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
            return formattedTime
        },
        dataInit() {
            this.loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
            if (this.active == 0) {
                this.timeInit()
            } else if (this.active == 1) {
                this.yesterdayTime()
            }
            this.pageSize = 10
            this.currentPage = 1
            setTimeout(() => {
                this.getData()
            }, 0);
        },
        download() {
                this.loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
            var store = this.$store.state
            var index = store.equipmentIndex;
            var data = {
                equipmentId: store.equipmentList[index - 1].deviceId,
                startTime: this.getTime(this.dateRange[0]),
                endTime: this.getTime(this.dateRange[1]),
                page: this.currentPage,
                pageSize: this.pageSize,
                isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
            }
            this.api.loadHistorydata(data).then(res => {
                // 创建一个blob对象
                      this.loading.close()
                const blob = new Blob([res.data], { type: 'text/csv' });

                // 创建一个a标签
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;

                // 设置文件名
                link.setAttribute('download', 'filename.csv');

                // 模拟点击下载
                document.body.appendChild(link);
                link.click();

                // 清理资源
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            })
        },
        getData() {
            var store = this.$store.state
            var index = store.equipmentIndex;
            var data = {
                equipmentId: store.equipmentList[index - 1].deviceId,
                startTime: this.getTime(this.dateRange[0]),
                endTime: this.getTime(this.dateRange[1]),
                page: this.currentPage,
                pageSize: this.pageSize,
                isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
            }
            this.api.selFsTime(data).then(res => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.tableList = []
                    this.tableData = []
                    this.total = res.data.data.totalCount
                    res.data.data.data[0].equipment.forEach((el, index) => {
                        this.tableList.push(el.environmentDataId + '(' + el.formula
                            + ')')
                    })

                    res.data.data.data.forEach((el, index) => {
                        const processedData = {
                            time: el.updateTime
                        };

                        el.equipment.forEach((item, index) => {
                            processedData[`data${index}`] = item.environmentData;
                        });
                        this.tableData.push(processedData)
                    })


                }
            })
        },
        yesterdayTime() {
            // 获取当前日期
            var today = new Date();

            // 获取昨天的日期
            var yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);

            // 设置时间为00:00
            yesterday.setHours(0, 0, 0, 0);
            var start = yesterday.toISOString();

            // 设置时间为23:59
            yesterday.setHours(23, 59, 59, 999);
            var end = yesterday.toISOString();
            this.dateRange = [start, end]
        },
        timeInit() {
            const start = new Date()
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            this.dateRange = [start, end]
        },
        search() {
            this.dataInit()
        },
        handleSizeChange(val) {
            this.pageSize = val
            setTimeout(() => {
                this.getData()
            }, 0);
        },
        handleCurrentChange(val) {
            this.currentPage = val
            setTimeout(() => {
                this.getData()
            }, 0);
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'warning-row';
            } else if (rowIndex % 2 == 0) {
                return 'success-row';
            }
            return '';
        }
    },

}
</script>
<style lang="scss"></style>