<template>
    <div class="device-header">
        <span class="device-header-title">{{ $t('message.device') }}</span>
        <el-select v-model="connection" style="width: 100px;margin-left: 10px;">
            <el-option :value="$t('message.wired_connection')">{{ $t('message.wired_connection') }}</el-option>
            <el-option :value="$t('message.wireless_connection')">{{ $t('message.wireless_connection') }}</el-option>
        </el-select>
        <el-tooltip v-if="uploader.uploaders.status" :content="$t('message.uploader_connection')">
            <img src="../../assets/img/uploader_connect.png" alt="">
        </el-tooltip>
        <el-tooltip v-else :content="$t('message.not_uploader_connection')">
            <img src="../../assets/img/uploader_disconnect.png" alt="" @click="uploaderDialog = true">
        </el-tooltip>
        <img class="device-header-img-right" src="../../assets/img/plugin_download.png" alt="">
        <img class="device-header-img-right" src="../../assets/img/firmware.png" alt="">
    </div>
    <el-dialog v-model="uploaderDialog">
        <div slot="header">
            <h1>环境检测</h1>
        </div>
        <div v-if="deviceDecetion" class="device-detect">
            <img src="../../assets/img/device-detect.svg" alt="">
        </div>
        <div v-else class="device-detect">
            <el-row class="device-detect-table">
                <el-col :span="5">设备</el-col>
                <el-col :span="5">结果</el-col>
                <el-col :span="5">支持</el-col>
                <el-col :span="9">建议</el-col>
            </el-row>
            <el-row class="device-detect-table-title">
                <el-col :span="5">系统</el-col>
                <el-col :span="5">{{ system }}</el-col>
                <el-col :span="5">
                    <i class="material-icons small" :style="systemSupport ? 'color:#00cf00;' : 'color:#ffcf00;'">{{
                        systemSupport ? 'check' : 'priority_high' }}</i>
                </el-col>
                <el-col :span="9">{{ systemSupport?'支持':"不支持" }}</el-col>
            </el-row>
            <el-row class="device-detect-table-title">
                <el-col :span="5">浏览器</el-col>
                <el-col :span="5">{{ browser }}</el-col>
                <el-col :span="5">
                    <i class="material-icons small" :style="systemSupport ? 'color:#00cf00;' : 'color:#ffcf00;'">{{
                        systemSupport ? 'check' : 'priority_high' }}</i>
                </el-col>
                <el-col :span="9">{{ systemSupport?'支持':"不支持" }}</el-col>
            </el-row>
            <el-row class="device-detect-table-title">
                <el-col :span="5">Uploader</el-col>
                <el-col :span="5">{{ version || "没有打开" }}</el-col>
                <el-col :span="5"><i class="material-icons small" :style="verBool ? 'color:#00cf00;' : 'color:#ffcf00;'">{{
                        verBool ? 'check' : 'priority_high' }}</i></el-col>
                <el-col :span="9">
                    {{ version ? 'uploader已连接':'Uploader 未连接' }}<br />
                    {{ verStr }}
                </el-col>
            </el-row>
            <el-row class="device-detect-table-title">
                <el-col :span="5">补丁</el-col>
                <el-col :span="5">
                    <a :href="downloadLink" target="_blank" download="kb2999226 64-bit"
                        style="color: #039be5;">kb2999226 64-bit</a>
                </el-col>
            </el-row>
        </div>
        <div class="device-detect-btn">
            <el-button type="primary" @click="getVersion">开始检测</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, watchEffect, onMounted } from 'vue'
import storeDevice from '@/stores/device'
import platform from 'platform'
import server from '../../config/index'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const connection = ref(t('message.wired_connection'))
const uploader = storeDevice.useUploaders()
const uploaderDialog = ref(false)
const deviceDecetion = ref(true)
const browser = ref(`${platform.name} ${platform.version}`)
const system = ref(platform.os.toString())
const version = ref('')
const systemSupport = ref(false)
const browserSupport = ref(false)
const verBool = ref(false)
const verStr = ref('')
const downloadLink = ref('')
onMounted(() => {
    console.log("navigator.userAgent")
    osSupportDetect(platform.os.family, platform.os.version)
    browserDetect(platform.name, platform.version)
    downloadLink.value = platform.os.toString().indexOf("64-bit") != -1 ?
        "//cocorobo.cn/downloads/Windows6.1-KB2999226-x64.msu" :
        "//cocorobo.cn/downloads/Windows6.1-KB2999226-x86.msu"
    uploaderVersion()
})
const getVersion = () => {
    deviceDecetion.value = false;
    osSupportDetect(platform.os.family, platform.os.version)
    browserDetect(platform.name, platform.version)
    uploaderVersion()
}
const osSupportDetect = (family, version) => {
    let mac = { int: 10, float: 9 };
    let win = {
        '10': 10,
        '10 Technical Preview': 6.4,
        '8.1': 6.3,
        '8': 6.2,
        '7': 6.1,
        'Vista': 6,
        'XP 64-bit': 5.2,
        'XP': 5.1,
        '2000 SP1': 5.01,
        '2000': 5.0,
        'NT': 4.0,
        'ME': 4.90
    };
    let result = false;
    if (family.toLowerCase().indexOf("windows") > -1) {
        win[version] >= 5.1 ? result = true : "";
    } else if (family.toLowerCase().indexOf("os x") > -1) {
        const ver = version.split(".");
        if (ver[0] > mac.int || (parseInt(ver[0]) === mac.int &&
            ver[1] >= mac.float)) {
            result = true;
        }
    }
    systemSupport.value = result;
}
const browserDetect = (name, version) => {
    let result = false;
    const versionParse = (sep, ver) => {
        const arr = version.split(sep);
        return arr[0] > ver;
    }
    if (name === "Chrome") {
        result = versionParse('.', 50);
    } else if (name === "Firefox") {
        result = versionParse('.', 50);
    } else if (name === "Opera") {
        result = versionParse('.', 43);
    } else if (name === 'Safari') {
        result = versionParse('.', 10);
    } else if (name === 'Maxthon') {
        result = versionParse('.', 4);
    }
    browserSupport.value = result;
}

const uploaderVersion = () => {
    console.log(uploader.uploaders.version, server.uploader)
    let ver = uploader.uploaders.version
    if (!ver) {
        version.value = ""
        verBool.value = false
        return false;
    }
    if(ver == server.uploader) {
        verBool.value = true;
    }else{
        const newVer = compareVersions(ver, server.uploader) > 0 ? true : false;
        verBool.value = newVer;
        verStr.value = !newVer ? "版本不是最新，建议更新" : "";
    }

    

}
const compareVersions = (v1, v2) => {
    const v1Parts = v1.split('.').map(Number);
    const v2Parts = v2.split('.').map(Number);
    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
        const v1Part = v1Parts[i] || 0;
        const v2Part = v2Parts[i] || 0;
        if (v1Part > v2Part) return 1;
        if (v1Part < v2Part) return -1;
    }
    return 0;
};
watchEffect(() => {
    console.log(uploader.uploaders.status)
    version.value = uploader.uploaders.version
})
</script>
<style scoped lang="scss">
.device-header {
    padding: 15px 10px 15px 5px;
    background-color: #f1f2f5;
    border-bottom: 1px solid #ddd;

    span {
        font-weight: 900;
        font-size: 20px;
        color: #000;
    }

    img {
        width: 22px;
        margin-left: 10px;
        cursor: pointer;
    }

    .device-header-img-right {
        float: right;
    }
}

.device-detect {
    margin-top: 20px;

    img {
        position: relative;
        width: 270px;
        left: 53%;
        transform: translateX(-50%);
    }

    .device-detect-table {
        text-align: center;
        border-bottom: 2.5px solid #0057ff6e;
        padding: 0.25rem 0;
        font-size: 1.45rem;
        color: #818181
    }

    .device-detect-table-title {
        text-align: center;
        padding: 0.25rem 0;
        font-size: 1.2rem;
        color: #000;
        margin-top: 1rem;
    }
}

.device-detect-btn {
    margin-top: 20px;
    text-align: center;

    button {
        width: 240px;
        font-size: 18px;
        height: 40px;
    }
}
</style>