<template>
    <el-header>
        <el-icon @click="toggleCollapse">
            <Expand v-show="isCollapse" />
            <Fold v-show="!isCollapse" />
        </el-icon>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }" class="text-base">首页</el-breadcrumb-item>
        </el-breadcrumb>

        <div style="margin-left: auto;">
            <el-button type="info" @click="showAddCaseDialog">添加案例</el-button>
            <el-button type="info" @click="goToApiDocument">查看Api文档</el-button>
        </div>

        <el-dialog v-model="dialogVisible" title="添加案例" width="500">
            <el-row>
                <el-col :span="12">
                    <span>案例名称</span>
                </el-col>
                <el-col :span="12">
                    <el-input v-model="caseName" placeholder="请输入案例名称：" />
                </el-col>
            </el-row>
            <el-upload drag multiple>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    <em>上传案例图片</em>
                </div>
                <template #tip>
                <div class="el-upload__tip">
                    请上传jpg/png格式的文件
                </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addCase">添加</el-button>
                </div>
            </template>
        </el-dialog>
    </el-header>
</template>

<script setup>
import { ref } from "vue"
import { Expand, Fold } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
import { UploadFilled } from '@element-plus/icons-vue';

const props = defineProps({
    isCollapse: {
      type: Boolean,
    }
});
const emit = defineEmits(['update:isCollapse']);
const dialogVisible = ref(false)

const caseName = ref('')
const imageUrl = ref('/src/assets/PointOne.png')

const router = useRouter()

function goToApiDocument() {
    router.push(`/ApiDocument`)
}

const toggleCollapse = () => {
    emit('update:isCollapse', !props.isCollapse);
};

// 打开添加案例对话框
function showAddCaseDialog(){
    dialogVisible.value = true;
    caseName.value = '';
}

// 添加案例函数
function addCase(){
    const newCase = {
        title: caseName.value,
        pngUrl: imageUrl.value
    };
    console.log(newCase)
}
</script>

<style lang="scss" scoped>
.el-header{
    display: flex;
    align-items: center;
    background-color: #dedfe0;
    .el-icon{
        margin-right: 15px;
    }
}
</style>