<template>
    <section class="LockScreen" v-if="lockScreen" :class="afterUnlock">
        <div v-if="lockImg" class="bg" :class="isClickedUnlockBtn ? 'unlockClicked' : ''"
            :style="{ backgroundImage: `url(${lockImg})` }"></div>
        <div class="content">
            <!-- 点击解锁后出现输入框 -->
            <div class="iptPassword" v-if="isClickedUnlockBtn">
                <!-- <UserOutlined style="color:grey" class="avatar" /> -->
                <img :src="userinfo.avatar" class="avatar" />
                <div class="username">{{ userinfo.username }}</div>
                <a-input-search v-model:value="password" placeholder="密码" style="width: 300px" @search="onUnlockScreen">
                    <template #enterButton>
                        <a-button type="link">
                            <template #icon>
                                <div class="ArrowRightOutlined">
                                    <ArrowRightOutlined />
                                </div>
                            </template>
                        </a-button>
                    </template>
                </a-input-search>
                <div class="wrongPwd" v-if="isWrongPwd">密码不正确</div>
            </div>
            <!-- 未点击解锁可修改背景图片 -->
            <a-upload :before-upload="onChangeBg" :showUploadList="false" v-else>
                <div class="uploadTxt">
                    <SearchOutlined class="changeBg" />
                    <div class="txt">点击更换背景图片</div>
                </div>
            </a-upload>
            <!-- 左下角时间 -->
            <div class="timeZone">
                <div class="currentTime">{{ currentTime }}</div>
                <div class="dateTime">{{ dateTime }}</div>
            </div>
            <!-- 右下角三个按钮 -->
            <div class="deviceStatus">
                <!-- 是否联网 -->
                <span class="onlineStatus">
                    <img src="/icons/onLine.ico" v-show="isOnline" />
                    <img src="/icons/offLine.ico" v-show="!isOnline" />
                </span>
                <!-- 是否充电 -->
                <SvgIcon :name="charging ? 'batteryCharge' : 'battery'" color="#fff" width="33px" height="33px"
                    class="charge" />
                <!-- 解锁按钮 -->
                <a-tooltip>
                    <template #title>{{ isClickedUnlockBtn ? '返回' : '点击解锁' }}</template>
                    <LockOutlined class="unlock" @click="onClickLockBtn" v-if="isClickedUnlockBtn" />
                    <UnlockOutlined class="unlock" @click="onClickUnlockBtn" v-else />
                </a-tooltip>
            </div>
        </div>
    </section>
</template>
<script lang="ts" setup name="LockScreen">
import { onMounted, ref } from 'vue'
import { systemConfig } from '@/store/reactiveState'
import useSiteSettings from '@/store/useSiteSettings'
import { SET_LOCK_SCREEN } from '@/store/mutation-types'
import indexdb from '@/utils/indexDB'
import dayjs from 'dayjs';
import { getWeek } from '@/utils/util'
import { useBattery, useNetwork } from '@vueuse/core'
import SvgIcon from '@/components/SvgIcon/index.vue'
import {
    SearchOutlined,
    UnlockOutlined,
    LockOutlined,
    ArrowRightOutlined,
    UserOutlined
} from '@ant-design/icons-vue'
import { USER_INFO } from '@/store/mutation-types'
import ls from '@/utils/Storage'
import * as api from './service'

const userinfo = ls.get(USER_INFO)
const initBg =
    'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g6/M00/03/0B/ChMkKWECB-OIKeSVAFU590PRoH0AASPhQB7J0oAVToP393.jpg'

const isClickedUnlockBtn = ref(false)
const { lockScreen } = useSiteSettings()
const onClickUnlockBtn = () => {
    isClickedUnlockBtn.value = true
}
const onClickLockBtn = () => {
    isClickedUnlockBtn.value = false
}

// 获取锁屏壁纸
const lockImg = ref(null)
onMounted(async () => {
    setTimeout(async () => {
        const bg = await indexdb.get('lockImg')
        lockImg.value = bg?.value || initBg
    }, 100)
})

// 获取左下角日期时间
const getDateTime = () => {
    const week = dayjs().weekday()
    const formatedWeek = getWeek(week, false)
    const day = dayjs().date()
    const month = dayjs().month() + 1
    return month + '月' + day + '日' + ', ' + formatedWeek
}
const dateTime = ref(getDateTime())
const currentTime = ref(dayjs().format('HH:mm'))
setInterval(() => {
    currentTime.value = dayjs().format('HH:mm')
    dateTime.value = getDateTime()
}, 1000)

// 获取电池状态
const { charging } = useBattery()
// 获取网络状态
const { isOnline } = useNetwork()

const onChangeBg = (file) => {
    if (file.type.indexOf('image') < 0) {
        alert('只能传图片!')
    }
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function () {
        indexdb.set('lockImg', this.result)
        lockImg.value = this.result
    }
    return false
}

const password = ref()
const isWrongPwd = ref(false)
const afterUnlock = ref()

const onUnlockScreen = () => {
    api.userLogin({ username: userinfo.username, password: password.value }).then((res: any) => {
        if (!password.value) {
            isWrongPwd.value = true
            return false
        } else {
            isWrongPwd.value = false
        }
        if (res) {
            if (res.unlocked) {
                afterUnlock.value = 'afterUnlock'
                setTimeout(() => {
                    systemConfig.commit('SET_LOCK_SCREEN', false)
                    afterUnlock.value = null
                    isWrongPwd.value = false
                    isClickedUnlockBtn.value = false
                    password.value = null
                }, 300)
            } else {
                isWrongPwd.value = true
            }
        } else {
            isWrongPwd.value = true
        }
    })
}
</script>
<style lang="less" scoped>
.afterUnlock {
    opacity: 0 !important;
    transition: opacity 0.3s;
}

.LockScreen {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 106;
    overflow: hidden;

    .bg {
        width: 100%;
        position: absolute;
        z-index: 1;
        background-color: #fff;
        background-size: 100% auto;
        background-repeat: no-repeat;
        height: 100%;
    }

    .unlockClicked {
        transform: scale(1.1);
        filter: blur(10px);
        transition: all 0.1s;
    }

    .content {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;

        .iptPassword {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            .avatar {
                width: 130px;
                height: 130px;
                background-color: #e8eceb;
                border-radius: 50%;
                font-size: 80px;
                line-height: 130px;
                padding: 5px;
            }

            .username {
                color: #fff;
                font-size: 40px;
                margin: 10px auto 15px auto;
            }

            .wrongPwd {
                color: #f88070;
                font-size: 16px;
                text-align: left;
                margin: 5px 0;
                width: 100%;
            }

            ::v-deep(.ant-input) {
                border-radius: 0;

                &:hover {
                    border-color: grey;
                }
            }

            .ant-btn.ant-btn-link {
                width: 32px;
                height: 32px;
                background-color: grey;
                border: 2px solid #fff;

                &:hover {
                    color: #fff;
                    border-color: #fff;
                }

                .ArrowRightOutlined {
                    color: #fff;

                    &:hover {
                        color: rgba(0, 0, 0, 0.6);
                    }
                }
            }
        }

        .uploadTxt {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 45%;
            top: 50%;
            color: #fff;

            &:hover {
                color: #0094ff;
            }

            .changeBg {
                font-size: 20px;
                cursor: pointer;
                margin-right: 15px;
            }

            .txt {
                cursor: pointer;
            }
        }

        .timeZone {
            position: absolute;
            bottom: 50px;
            left: 20px;
            color: #fff;

            .currentTime {
                font-size: 100px;
                font-weight: 100;
                height: 90px;
                line-height: 90px;
            }

            .dateTime {
                font-size: 60px;
                font-weight: 300;
            }
        }

        .deviceStatus {
            position: absolute;
            bottom: 30px;
            right: 50px;

            .onlineStatus {
                margin-right: 20px;
                display: inline-block;

                img {
                    width: 25px;
                    height: 25px;
                }
            }

            .onlineStatus,
            .charge,
            .unlock {
                vertical-align: middle;
            }

            .unlock {
                font-size: 23px;
                color: #fff;
                margin-left: 20px;
                font-weight: 500;

                &:hover {
                    color: #0094ff;
                }
            }
        }
    }
}
</style>
