<template>
    <q-dialog v-model="visible" persistent>
        <!-- style="height: 750px; max-width: 50vw" -->
        <q-card style="max-width: 30vw">
            <q-card-section class="no-padding">
                <q-card-actions class="bg-light-blue-10 text-white">
                    <q-card-actions class="text-h6">{{ currObj.equipmentName }} 设备详情</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="closeDialog">
                        <q-tooltip content-class="bg-amber text-black shadow-4"> 关闭 </q-tooltip>
                    </q-btn>
                </q-card-actions>
                <q-form ref="myForm">
                    <q-card-section>
                        <div class="row q-col-gutter-md">
                            <div class="col-xl-6 col-lg-6 col-xs-12">
                                <q-input dense label="日期范围" ref="rangDateRef" readonly outlined v-model="rangDateText">
                                    <template v-slot:append>
                                        <q-icon name="event" class="cursor-pointer">
                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                                content-style="font-size: 12px">选择日期范围</q-tooltip>
                                            <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                                <q-date v-model="rangeDate" years-in-month-view landscape range
                                                    mask="YYYY-MM-DD" @update:model-value="rangeDateUpdate">
                                                    <div class="row">
                                                        <div class="col-3">
                                                            <q-btn v-close-popup label="本月" @click="setCurrMonth"
                                                                color="orange" flat />
                                                        </div>
                                                        <div class="col-3">
                                                            <q-btn v-close-popup label="本年" @click="setCurrYear" color="red"
                                                                flat />
                                                        </div>
                                                        <div class="col-3"></div>
                                                        <div class="col-3">
                                                            <q-btn v-close-popup label="关闭" color="primary" flat />
                                                        </div>
                                                    </div>
                                                </q-date>
                                            </q-popup-proxy>
                                        </q-icon>
                                    </template>
                                </q-input>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-xs-12">
                                <q-btn push color="primary" label="查询" icon="search" @click="getPage()">
                                    <q-tooltip content-class="bg-amber text-black shadow-4">查询</q-tooltip>
                                </q-btn>
                            </div>
                        </div>
                    </q-card-section>
                </q-form>
            </q-card-section>
            <q-separator />
            <q-card-section>
                <div class="row q-col-gutter-md items-center">
                    <div class="col-xl-6 col-lg-6 col-sm-6">
                        <q-input class="text-h6" outlined readonly label="总运行时间（小时）" v-model="formData.totalRunningTime" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-sm-6">
                        <q-input class="text-h6" outlined readonly label="总报警时间（小时）" v-model="formData.totalAlarmTime" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-sm-6">
                        <q-input class="text-h6" outlined readonly label="总待机时间（小时）" v-model="formData.totalStopTime" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-sm-6">
                        <q-input class="text-h6" outlined readonly label="OEE时序" v-model="formData.oee" />
                    </div>
                </div>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn color="white" text-color="black" @click="closeDialog">关闭</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script setup lang="ts">
import { Notify, date } from 'quasar'
import { EquipmentOEE, EquipmentOEEEntity } from 'src/api/equipmentRecord/model/equipmentRecord'
import { equipmentRecordApi } from 'src/api/equipmentRecord/equipmentRecordApi';
import { ref } from 'vue';

const rangeDate = ref();
const rangDateText = ref();
const visible = ref(false);
const currObj = ref();
const formData = ref(new EquipmentOEEEntity());

const equipmentOEE = ref(new EquipmentOEE());
const clickForm = (e: any) => {
    currObj.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
    equipmentOEE.value.equipmentId = e.id;
    setCurrMonthToDay();
    visible.value = true;
};

// 设置本月第一天 至当天
const setCurrMonthToDay = () => {
    var d = new Date(); // 获取当前日期时间
    var monthStart = date.formatDate(new Date(d.getFullYear(), d.getMonth(), 1), 'YYYY-MM-DD'); // 获取本月第一天的日期时间
    var monthEnd = date.formatDate(d, 'YYYY-MM-DD'); // 获取本月最后一天的日期时间（时间为23:59:59）
    rangDateText.value = `${monthStart} ~ ${monthEnd}`
    rangeDate.value = { from: `${monthStart}`, to: `${monthEnd}` }
    equipmentOEE.value.begDate = monthStart;
    equipmentOEE.value.endDate = monthEnd;
    getPage();
}

const getPage = () => {
    formData.value = new EquipmentOEEEntity();
    if (rangeDate.value) {
        equipmentOEE.value.begDate = rangeDate.value.from;
        equipmentOEE.value.endDate = rangeDate.value.to;
    }
    equipmentRecordApi.GetEquipmentOEEMonthTotal(equipmentOEE.value).then((res: any) => {
        formData.value.totalRunningTime = res.totalRunningTime; //(Math.random() * 100).toFixed(1)
        formData.value.totalAlarmTime = res.totalAlarmTime; // (Math.random() * 100).toFixed(1)
        formData.value.totalStopTime = res.totalStopTime; // (Math.random() * 100).toFixed(1)
        formData.value.oee = res.oee; // (res.totalRunningTime / 24).toFixed(2) + '%' // (Math.random() * 24).toFixed(1)
    })
}

const closeDialog = () => {
    visible.value = false;
};



// 设置本月
const setCurrMonth = () => {
    var d = new Date(); // 获取当前日期时间
    var monthStart = date.formatDate(new Date(d.getFullYear(), d.getMonth(), 1), 'YYYY-MM-DD'); // 获取本月第一天的日期时间
    var monthEnd = date.formatDate(new Date(d.getFullYear(), d.getMonth() + 1, 0), 'YYYY-MM-DD'); // 获取本月最后一天的日期时间（时间为23:59:59）
    rangDateText.value = `${monthStart} ~ ${monthEnd}`
    rangeDate.value = { from: `${monthStart}`, to: `${monthEnd}` }
}

// 设置本年
const setCurrYear = () => {
    var d = new Date(); // 获取当前日期时间
    var monthStart = date.formatDate(new Date(d.getFullYear(), 0, 1), 'YYYY-MM-DD'); // 获取本月第一天的日期时间
    var monthEnd = date.formatDate(new Date(d.getFullYear(), 12, 0), 'YYYY-MM-DD'); // 获取本月最后一天的日期时间（时间为23:59:59）
    rangDateText.value = `${monthStart} ~ ${monthEnd}`
    rangeDate.value = { from: `${monthStart}`, to: `${monthEnd}` }
}

// 日期范围 改变事件
const rangeDateUpdate = (value: any, reason: any, details) => {
    if (reason === 'add-range') {
        const start = value.from // 开始日期
        const end = value.to // 结束日期
        const diff = date.getDateDiff(new Date(end), new Date(start), 'days') // 计算日期差值
        // 判断 时间范围是否大于365天
        if (diff >= 366) {
            Notify.create({
                position: 'top',
                message: '日期范围不能大于365天！',
                icon: 'feedback',
                color: 'negative',
            })
            rangDateText.value = ''
            return
        }
        rangDateText.value = start + ' ~ ' + end
    }
    if (reason === 'add-day') {
        Notify.create({
            position: 'top',
            message: '日期范围不能为同一天！',
            icon: 'feedback',
            color: 'negative',
        })
        rangDateText.value = ''
        return
    }
}

defineExpose({
    clickForm
});
</script>