<template>
    <!-- <transition appear enter-active-class="animated fadeIn"> -->
    <q-card>
        <!-- 搜索条件 -->
        <q-card-section :style="{ height: '100%' }">
            <div class="row q-col-gutter-md">
                <!-- 刷新 查询 -->
                <div class="col-xl-2 col-lg-2 col-sm-3">
                    <q-btn-group push glossy>
                        <q-btn push label="刷新" icon="refresh" @click="reFresh()">
                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
                        </q-btn>
                        <q-btn push label="查询" icon="search" @click="getPage()">
                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                content-style="font-size: 12px">按条件查询数据</q-tooltip>
                        </q-btn>
                    </q-btn-group>
                </div>
                <!-- 搜索条件 -->
                <div class="col-xl-2 col-lg-2 col-sm-3">
                    <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 items-center justify-end">
                                                        <q-btn v-close-popup label="关闭" color="primary" flat />
                                                    </div> -->
                                        <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>
        </q-card-section>
        <q-card-section style="padding:0 10px 15px 10px;">
            <div class="row q-col-gutter-md">
                <div class="col-xl-12 col-lg-12 col-sm-12">
                    <q-table class="my-sticky-header-column-table" :rows="list" row-key="id" separator="cell"
                        :loading="loading" :columns="columns" @request="onRequest"
                        :table-style="{ height: (Platform.is.android ? screenStore.CurrentAppFullscreen == true ? Number(Screen.height) + 350 + 'px' : Number(Screen.height) + 300 + 'px' : Number(Screen.height) - 190 + 'px') }"
                        flat bordered v-model:pagination="pagination" :rows-per-page-options="[20, 30, 40, 50, 100]">
                        <template v-slot:body="props">
                            <q-tr :props="props" class="tr_hover">
                                <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
                                }}</q-td>
                                <q-td style="font-size: 16px;" key="equipmentCode" :props="props">{{
                                    props.row.equipmentCode }}</q-td>
                                <q-td style="font-size: 16px;" key="equipmentName" :props="props">{{
                                    props.row.equipmentName }}</q-td>
                                <q-td style="font-size: 16px;" key="equipmentType" :props="props">{{
                                    props.row.equipmentType
                                }}</q-td>
                                <q-td style="font-size: 16px;" key="furnaceNum" :props="props">{{ props.row.furnaceNum
                                }}</q-td>
                                <q-td style="font-size: 16px;" key="totalRunningTime" :props="props">{{
                                    props.row.totalRunningTime }}</q-td>
                                <q-td style="font-size: 16px;" key="totalAlarmTime" :props="props">{{
                                    props.row.totalAlarmTime }}</q-td>
                                <q-td style="font-size: 16px;" key="totalStopTime" :props="props">{{
                                    props.row.totalStopTime }}</q-td>
                            </q-tr>
                        </template>
                    </q-table>
                </div>
            </div>
        </q-card-section>
    </q-card>
    <!-- </transition> -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Notify, Screen, date, Platform } from 'quasar';
import { Pagination, cconvert } from 'src/api/class';
import { EquipmentRecord } from 'src/api/equipmentRecord/model/equipmentRecord'
import { equipmentRecordApi } from 'src/api/equipmentRecord/equipmentRecordApi'
import { useScreenStore } from 'src/stores/useScreenStore'

//公共
const screenStore = useScreenStore();
const loading = ref(false);
const rangeDate = ref();
const rangDateText = ref();

const columns = ref([
    {
        name: 'index',
        label: '序号',
        field: 'index',
        align: 'center',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    {
        name: 'equipmentCode',
        align: 'center',
        label: '设备编码',
        field: 'equipmentCode',
        headerClasses: 'text-h4 text-weight-bold',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    {
        name: 'equipmentName',
        align: 'center',
        label: '设备名称',
        field: 'equipmentName',
        headerClasses: 'text-h4 text-weight-bold',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    {
        name: 'equipmentType',
        align: 'center',
        label: '设备类型',
        field: 'equipmentType',
        headerClasses: 'text-h4 text-weight-bold',
        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
    },
    { name: 'furnaceNum', align: 'center', label: '开炉次数', field: 'furnaceNum', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'totalRunningTime', align: 'center', label: '总运行时长（小时）', field: 'totalRunningTime', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'totalAlarmTime', align: 'center', label: '总报警时长（小时）', field: 'totalAlarmTime', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
    { name: 'totalStopTime', align: 'center', label: '总待机时长（小时）', field: 'totalStopTime', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
])

const list = ref([]);

onMounted(() => {
    getPage();
})

const reFresh = () => {
    pagination.value.data = new EquipmentRecord();
    rangDateText.value = ''
    rangeDate.value = ''
    getPage();
};

const onRequest = (props: any) => {
    const { page, rowsPerPage, rowsNumber } = props.pagination;
    pagination.value.page = page;
    pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
    getPage();
};

const pagination = ref(new Pagination(new EquipmentRecord()));
const getPage = () => {
    if (rangeDate.value) {
        pagination.value.data.begTime = rangeDate.value.from + ' 00:00:00';
        pagination.value.data.endTime = rangeDate.value.to + ' 23:59:59';
    }
    equipmentRecordApi.getEquipmentRecordTotalPageList(pagination.value).then((res: any) => {
        list.value = res.data;
        cconvert(pagination.value, res);
    })
}


// 设置本月
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
    }
}


</script>
<style scoped>
/* .tr_hover {
    background: #aaaaaa;
  } */

.tr_hover:hover {
    background: #e8e8e8;
}

.click-hover {
    cursor: pointer;
    color: #1976d2;
}

.click-hover:hover {
    color: #2196f3;
    /* background-color: yellow; */
}
</style>