<template>
    <div class="formula history dataAnalysis">
        <!-- 数据分析 -->
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/analysis.png" alt="" />
                {{ $t('imageGallery.title2') }}
            </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>
            </div>

            <div class="analysis-charts">
                <div class="charts" id="realTime-line"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { realTimeLine1 } from '@/assets/js/charts'
  import {  changeLanguage, getLanguage } from '@/utils/language'
export default {
    data() {
        return {
            active: 0,
            value1: '',
            indexs: 1,
            dateRange: [],
        }
    },
    watch:{
        active(newVal, oldVal) {
            if (newVal != 2) {
                this.dataInit()
            }
        },
        $route(newVal, oldVal) {
            const that = this;
            const store = this.$store.state

            this.dataInit()
        },
         '$i18n.locale'() {
    this.dataInit()
  }
    },
    mounted() {
        this.indexs = this.$route.query.index ? this.$route.query.index : 1;
        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
        },
        search() {
            this.dataInit()
        },
        timeInit() {
            const start = new Date()
            start.setHours(0, 0, 0, 0)
            const end = new Date()
            this.dateRange = [start, end]
        },
        dataInit() {
                this.loading = this.$loading({
          lock: true,
          text: this.$t('message.loading'),
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
            if (this.active == 0) {
                this.timeInit()
            } else if (this.active == 1) {
                this.yesterdayTime()
            }
            setTimeout(() => {
                this.getData()
            }, 0);

        },
        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]
        },
        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: 1,
                pageSize: 999,
                isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0,
                  enName:getLanguage()
            }
                var data1 = store.equipmentList[index - 1].deviceId
            this.api.selFsTime(data).then(res => {
                  this.loading.close()
                if (res.data.code == 200) {
                    var chartsData = res.data.data.data.map(item => {
                        return {
                            time: item.updateTime,
                            value: item.equipment.map(equipmentItem => {
                                return {
                                    name: equipmentItem.environmentDataId,
                                    value: equipmentItem.environmentData,
                                    time: equipmentItem.updateTime
                                };
                            })
                        };
                    });
                
                    realTimeLine1('realTime-line', chartsData,data1)
                } else {
                     var chartsData=[]
                     realTimeLine1('realTime-line', chartsData,data1)
                    this.$message.error(res.data.msg);
                }
            })
        },
    },

}
</script>

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