<template>
    <div class="python-header">
        <el-row>
            <el-col :span="12" class="python-header-left">
                <span :class="active?'active':''" @click="switchValue(true)">Python 源代码</span>
                <span :class="!active?'active':''" style="margin-left: 10px;" @click="switchValue(false)">串口交互窗</span>
                <el-tooltip content="清除打印数据" v-if="!active">
                    <img @click="clearPrintData" style="width: 20px;" src="../../assets/img/clear.png" alt="清除打印数据">
                </el-tooltip>
            </el-col>
            <el-col :span="12" class="python-header-right">
                <el-tooltip content="是否启用编辑模式">
                    <el-switch v-model="value1" @change="switchEdit"></el-switch>
                </el-tooltip>
                <el-tooltip content="复制代码">
                    <img src="../../assets/img/copy.png" alt="复制代码" @click="copyCode">
                </el-tooltip>
                <el-tooltip content="下载代码">
                    <img src="../../assets/img/download_code.png" alt="下载代码" @click="downloadCode">
                </el-tooltip>
                <el-tooltip content="上传代码">
                    <img src="../../assets/img/uploader_code.png" alt="上传代码" @click="uploadFile">
                </el-tooltip>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import {ref, defineEmits } from 'vue'
import Blocklys from '@/stores/blockly'
import { ElMessage } from 'element-plus'
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("复制成功")
    }).catch(err=>{
        ElMessage.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("上传成功");
        } else {
            ElMessage.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: 60px;

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

    .python-header-left {
        span {
            display: inline-block;
            margin-top: 20px;
            padding: 0 10px;
            cursor: pointer;
            line-height: 40px;
        }

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

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

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