<template>
    <div class="formula realTime historyData">
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                {{ deviceName }}—{{ $t('imageGallery.title') }}
            </div>
            <div class="flex-view">
                <div class="input-btn">
                    <span>{{ $t('imageGallery.quickQuery') }}</span>
                    <div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
                         {{ $t('imageGallery.today') }}
                    </div>
                    <div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
                        {{ $t('imageGallery.yesterday') }}
                    </div>
                    <div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
                         {{ $t('imageGallery.custom') }}
                    </div>
                </div>
                <div class="input-sel-time">
                    <span>{{ $t('imageGallery.timeRange') }}</span>
                     <el-date-picker v-model="dateRange" type="datetimerange" :range-separator="$t('imageGallery.to')"
                       :start-placeholder="$t('imageGallery.startTime')" :end-placeholder="$t('imageGallery.endTime')">
                    </el-date-picker>
                </div>
                <div class="input-btn ">
                    <div class="btn blue" @click="search">
                         {{ $t('imageGallery.query') }}
                    </div>
                    <div class="btn blue" @click="download">
                        {{ $t('imageGallery.downloadImages') }}
                    </div>
                    <!-- <div class="btn blue">
                        数据统计
                    </div>
                    <div class="btn blue">
                        日/夜平均时间范围设置
                    </div> -->
                </div>
            </div>

            <div class="table-view">
                <!-- <div class="table-title">
                    <div>{{ deviceName }}</div>
                    <span>共有{{ total }}张图片</span>
                </div> -->
                <div class="image-list">
                    <div v-for="item, index in tableData" :key="index">
                        <el-image :src="item.pictureUrl" :preview-src-list="srcList">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        {{ item.updateTime }}
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[12, 20, 28, 36]" :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 {
            deviceName: '',
            active: 0,
            dateRange: [],
            tableData: [],
            currentPage: 1,
            pageSize: 12,
            total: 0,
            loading: null,
            srcList: [],
        }
    },
    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:this.$t('message.loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var store = this.$store.state
            var index = store.equipmentIndex;
            this.deviceName = store.equipmentList[index - 1].deviceTypeName
            if (this.active == 0) {
                this.timeInit()
            } else if (this.active == 1) {
                this.yesterdayTime()
            }
            this.pageSize = 12
            this.currentPage = 1
            setTimeout(() => {
                this.getData()
            }, 0);
        },
        downloadImage(url, filename) {
            console.log(filename);
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            link.click();
        },
        async download() {
            // this.loading = this.$loading({
            //     lock: true,
            //     text: this.$t('message.loading'),
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            var store = this.$store.state
            var index = store.equipmentIndex;


            // var data = {
            //     deviceId: store.equipmentList[index - 1].deviceId,
            //     startTime: this.getTime(this.dateRange[0]),
            //     endTime: this.getTime(this.dateRange[1]),
            //     page: this.currentPage,
            //     pageSize: this.pageSize,
            // }
            // this.api.imageUploadImage(data).then(res=>{
            //     console.log(res,111);
            // })
            var index = 0
            // const pictureUrl = this.tableData[index].pictureUrl;
            // const filename = `image_${this.tableData[index].updateTime}.jpg`;
            // this.downloadImage(pictureUrl, filename);
            const timer =setInterval(() => {
                index += 1
                if (index <= this.tableData.length) {
                    
                    console.log(index, this.tableData,this.tableData.length);
                    const pictureUrl = this.tableData[index-1].pictureUrl;
                    const filename = `image_${this.tableData[index-1].updateTime}.jpg`;
                    this.downloadImage(pictureUrl, filename);
                }else{
                    clearInterval(timer);
                }
            }, 501);
            // this.tableData.forEach((item, index) => {
            //     const pictureUrl = item.pictureUrl;
            //     const filename = `image_${item.updateTime}.jpg`;

            //     this.downloadImage(pictureUrl, filename);
            // });
            // 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 = {
                deviceId: store.equipmentList[index - 1].deviceId,
                startTime: this.getTime(this.dateRange[0]),
                endTime: this.getTime(this.dateRange[1]),
                page: this.currentPage,
                pageSize: this.pageSize,
            }
            this.api.imageReadtoday(data).then(res => {
                this.loading.close()
                if (res.data.code == 200) {
                    this.tableData = res.data.data.baiduspiderimage
                    this.srcList = this.tableData.map(item => item.pictureUrl);
                    this.total = res.data.data.totalCount
                }
            })
        },
        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>