<template>
    <div class="headerLeft">
        <img :src="LOGO" />
        <el-input v-model="inputMode" placeholder="" @input="getInputName()" style="--el-input-width:150px"></el-input>
        <el-button round @click="saveXmlFile()">保存</el-button>
        <i class="material-icons" @click="shareLink()">share</i>
        <i class="material-icons" @click="deleteBlockly()">delete</i>
        <i class="material-icons" @click="saveBlocklyPhoto()">photo_camera</i>
    </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import LOGO from '../../assets/img/logo1.png'
import store from '../../stores/blockly'
import { exportFileGlobal } from '../../gloabl/globalMethods'
const props = defineProps({
    exportImportFileName: {
        type: String,
        require: true,
        default: "未命名"
    }
})
const emit = defineEmits(["setFileName"])


const inputMode = ref(props.exportImportFileName)
const xmlStr = store.useyXmlStore()
const saveXmlFile = () => {
    console.log(inputMode.value, xmlStr.xmlStr)
    if (xmlStr.xmlStr && xmlStr.xmlStr !=`<xml xmlns="https://developers.google.com/blockly/xml"></xml>`) {
        exportFileGlobal(xmlStr.xmlStr, inputMode.value+".xml")
    } else {
        ElMessage({
            message: '导出内容为空',
            type: 'warning',
        })
    }
}
const shareLink = () => {
    console.log("分享")
}
const deleteBlockly = () => {
    console.log("删除当前页面积木")
}
const saveBlocklyPhoto = () => {
    console.log("保存当前积木图片")
}
const getInputName = () => {
    emit("setFileName", inputMode.value)
}
watchEffect(() => {
    if (props.exportImportFileName) {
        inputMode.value = props.exportImportFileName
    }

})
</script>
<style lang="scss" scoped>
.headerLeft {
    margin-left: 10px;
    display: flex;
    padding: 10px 0;

    img {
        height: 40px;
        margin-right: 10px;
        border-right: 1px solid #fff;
    }

    .el-button {
        margin-left: 10px;
        margin-right: 5px;
        margin-top: 5px;
        background: #fff;
        color: #2c4fcd;
    }

    .material-icons {
        cursor: pointer;
        margin-top: 8px;
        margin-right: 3px;
    }
}
</style>