<template>
    <div class="device-header">
        <span class="device-header-title">设备</span>
        <el-select v-model="connection" style="width: 100px;margin-left: 10px;">
            <el-option value="有线连接">有线连接</el-option>
            <el-option value="无线连接">无线连接</el-option>
        </el-select>
        <img v-if="uploader.uploaders.status" src="../../assets/img/uploader_connect.png" alt="">
        <img v-else src="../../assets/img/uploader_disconnect.png" alt="">
        <img class="device-header-img-right" src="../../assets/img/firmware.png" alt="">
        <img class="device-header-img-right" src="../../assets/img/plugin_download.png" alt="">
    </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import storeDevice from '@/stores/device'
const connection = ref('有线连接')
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
    }

    .device-header-img-right {
        float: right;
    }
}
</style>