<template>
    <div class="python-header">
        <el-row>
            <el-col :span="12" class="python-header-left">
                <el-tooltip :content="$t('message.python_code')">
                    <span :class="active?'active':''" @click="switchValue(true)">{{ $t('message.python_code') }}</span>
                </el-tooltip>
                <el-tooltip :content="$t('message.serial_port')">
                    <span :class="!active?'active':''" style="margin-left: 10px;" @click="switchValue(false)">{{ $t('message.serial_port') }}</span>
                </el-tooltip>
                <el-tooltip :content="$t('message.clear_print_data')" v-if="!active">
                    <img @click="clearPrintData" style="width: 20px;position: absolute;top: 20px;" src="../../assets/img/clear.png" :alt="$t('message.clear_print_data')">
                </el-tooltip>
            </el-col>
            <el-col :span="12" class="python-header-right">
                <el-tooltip :content="$t('message.edit_mode')">
                    <el-switch v-model="value1" @change="switchEdit"></el-switch>
                </el-tooltip>
                <el-tooltip :content="$t('message.copy_code')">
                    <img src="../../assets/img/copy.png" :alt="$t('message.copy_code')" @click="copyCode">
                </el-tooltip>
                <el-tooltip :content="$t('message.download_code')">
                    <img src="../../assets/img/download_code.png" :alt="$t('message.download_code')" @click="downloadCode">
                </el-tooltip>
                <el-tooltip :content="$t('message.upload_code')">
                    <img src="../../assets/img/uploader_code.png" :alt="$t('message.upload_code')" @click="uploadFile">
                </el-tooltip>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import {ref } from 'vue'
import Blocklys from '@/stores/blockly'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
const {t} = useI18n()

const value1 = ref(false)
const active = ref(true)
const emit = defineEmits(["getSwitchs","getCodemirror","getPythonCode"])
const pythonCode = Blocklys.useyPythonCodeStore()
const copyCode = () => {
    console.log("复制代码",pythonCode.pythonCode)
    navigator.clipboard.writeText(pythonCode.pythonCode).then(()=>{
        ElMessage.success(t('message.copy_code_success'))
    }).catch(err=>{
        ElMessage.error(t('message.copy_code_error'))
    })
}
const downloadCode = () => {
    console.log("下载代码",pythonCode.pythonCode)
    const blob = new Blob([pythonCode.pythonCode], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'code.py';
    a.click();
    URL.revokeObjectURL(url);
}
const uploadFile = () => {
    console.log("上传代码")
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.py';
    input.onchange = async (event) => {
        const file = event.target.files[0];
        if (file) {
            const text = await file.text();
            emit("getPythonCode", text)
            ElMessage.success(t('message.upload_code_success'));
        } else {
            ElMessage.error(t('message.upload_code_error'));
        }
    };
    input.click();
}
const clearPrintData = () => {
    document.getElementById("serialoutput").innerText = ""
}
const switchValue = (val) => {
    emit("getSwitchs", val)
    active.value = val
}
const switchEdit = (val) => {
    emit("getCodemirror", val)
}
</script>
<style scoped lang="scss">
.python-header {
    height: 50px;

    .box-item {
        width: 110px;
        margin-top: 10px;
    }

    .python-header-left {
        span {
            display: inline-block;
            margin-top: 10px;
            padding: 0 10px;
            cursor: pointer;
            line-height: 40px;
            max-width: 150px;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        span.active {
            background-color: #fff;
            color: #2b2b73;
            border-radius: 13px 15px 0px 0px;
        }
    }

    .python-header-right {
        text-align: right;
        line-height: 50px;
        padding-right: 15px;
    }

    img {
        width: 30px;
        margin-left: 10px;
        cursor: pointer;
    }
}
</style>