<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="">
        </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>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import storeDevice from '@/stores/device'
import { useI18n } from 'vue-i18n'
const {t} = useI18n()

const connection = ref(t('message.wired_connection'))
const uploader = storeDevice.useUploaders()
watchEffect(() => {
    console.log(uploader.uploaders.status)
})
</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;
    }
}
</style>