<template>
    <!-- 固定 -->
    <template v-if="icon == '固定'">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" :class="class"
            @click.stop="clickStop">
            <mask id="path-1-inside-1_22849_40056" fill="white">
                <rect x="1" y="2" width="18" height="16" rx="1" />
            </mask>
            <rect x="1" y="2" width="18" height="16" rx="1" fill="#D9D9D9" fill-opacity="0.01" stroke="white"
                stroke-width="3" mask="url(#path-1-inside-1_22849_40056)" />
            <rect x="9" y="5" width="7" height="5" fill="white" />
        </svg>
    </template>

    <!-- 放大 -->
    <template v-if="icon == '放大'">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" :class="class"
            @click.stop="clickStop">
            <path
                d="M11.3054 3.39557H15.4646L11.8944 6.8807L11.8944 6.88068L11.8923 6.88281C11.7377 7.03738 11.6759 7.2515 11.6759 7.45338C11.6759 7.65758 11.7381 7.87294 11.8611 8.05744L11.8888 8.09904L11.9304 8.12678C12.1149 8.24978 12.3303 8.31196 12.5345 8.31196C12.7363 8.31196 12.9505 8.25011 13.105 8.09554L16.5923 4.6083V8.77794C16.5923 9.00244 16.702 9.20602 16.8445 9.34851C16.987 9.49099 17.1905 9.60072 17.4151 9.60072C17.6396 9.60072 17.8431 9.49099 17.9856 9.34851C18.1281 9.20602 18.2378 9.00244 18.2378 8.77794V3.5396C18.2871 3.02389 18.1855 2.58065 17.9514 2.25868C17.7118 1.92926 17.3491 1.75 16.9377 1.75H11.3054C11.0809 1.75 10.8773 1.85973 10.7348 2.00222C10.5923 2.1447 10.4826 2.34828 10.4826 2.57278C10.4826 2.79729 10.5923 3.00087 10.7348 3.14335C10.8773 3.28583 11.0809 3.39557 11.3054 3.39557ZM9.77794 15.6877H5.6083L9.09554 12.2005C9.2485 12.0475 9.31196 11.8347 9.31196 11.6419C9.31196 11.4566 9.25337 11.2528 9.11311 11.1015C8.97067 10.9011 8.75564 10.7952 8.52497 10.7952C8.29228 10.7952 8.06427 10.9018 7.88281 11.0832L4.39557 14.5705V10.019C4.39557 9.79447 4.28583 9.59089 4.14335 9.44841C4.00087 9.30592 3.79729 9.19619 3.57278 9.19619C3.34828 9.19619 3.1447 9.30592 3.00222 9.44841C2.85973 9.59089 2.75 9.79447 2.75 10.019V15.4604C2.75 15.8987 2.91219 16.3805 3.19379 16.756C3.47667 17.1332 3.90175 17.4288 4.43196 17.4288H9.77794C10.0024 17.4288 10.206 17.319 10.3485 17.1765C10.491 17.0341 10.6007 16.8305 10.6007 16.606C10.6007 16.1115 10.2265 15.6877 9.77794 15.6877Z"
                fill="white" stroke="white" stroke-width="0.5" />
        </svg>
    </template>

    <!-- 缩小 -->
    <svg v-if="icon == '缩小'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
        :class="class" @click.stop="clickStop">
        <g clip-path="url(#clip0_22829_232305)">
            <path
                d="M2.57362 11.9381H6.74327L3.25602 15.4254C3.10307 15.5783 3.0396 15.7912 3.0396 15.984C3.0396 16.1693 3.09819 16.373 3.23846 16.5244C3.38089 16.7248 3.59592 16.8307 3.82659 16.8307C4.05929 16.8307 4.28729 16.7241 4.46875 16.5426L7.956 13.0554V17.6069C7.956 17.8314 8.06573 18.035 8.20821 18.1775C8.3507 18.32 8.55428 18.4297 8.77878 18.4297C9.00328 18.4297 9.20686 18.32 9.34934 18.1775C9.49183 18.035 9.60156 17.8314 9.60156 17.6069V12.1655C9.60156 11.7271 9.43937 11.2454 9.15777 10.8699C8.87489 10.4927 8.44981 10.1971 7.9196 10.1971H2.57362C2.34912 10.1971 2.14554 10.3068 2.00306 10.4493C1.86057 10.5918 1.75084 10.7954 1.75084 11.0199C1.75084 11.5144 2.12504 11.9381 2.57362 11.9381Z"
                fill="white" stroke="white" stroke-width="0.5" />
            <path
                d="M16.6276 2.25602L13.1403 5.74327V1.57362C13.1403 1.34912 13.0306 1.14554 12.8881 1.00306C12.7456 0.860574 12.542 0.750839 12.3175 0.750839C12.093 0.750839 11.8894 0.860574 11.747 1.00306C11.6045 1.14554 11.4947 1.34912 11.4947 1.57362V6.81196C11.4455 7.32767 11.5471 7.77091 11.7812 8.09288C12.0208 8.4223 12.3835 8.60156 12.7948 8.60156H18.4272C18.6517 8.60156 18.8553 8.49183 18.9978 8.34934C19.1403 8.20686 19.25 8.00328 19.25 7.77878C19.25 7.55427 19.1403 7.3507 18.9978 7.20821C18.8553 7.06573 18.6517 6.956 18.4272 6.956H14.268L17.8381 3.47087L17.8382 3.47088L17.8403 3.46875C17.9949 3.31418 18.0567 3.10006 18.0567 2.89818C18.0567 2.69398 17.9945 2.47862 17.8715 2.29412L17.8438 2.25252L17.8022 2.22479C17.6177 2.10179 17.4023 2.0396 17.1981 2.0396C16.9962 2.0396 16.7821 2.10145 16.6276 2.25602Z"
                fill="white" stroke="white" stroke-width="0.5" />
        </g>
        <defs>
            <clipPath id="clip0_22829_232305">
                <rect width="18" height="18" fill="white" transform="translate(1 1)" />
            </clipPath>
        </defs>
    </svg>

    <!-- 关闭 -->
    <svg v-if="icon == '关闭'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
        :class="class" @click.stop="clickStop">
        <line y1="-1" x2="16.7592" y2="-1" transform="matrix(-0.698077 0.716023 -0.698077 -0.716023 15.1914 4)"
            stroke="white" stroke-width="2" />
        <line y1="-1" x2="16.7592" y2="-1" transform="matrix(0.698077 0.716022 0.698077 -0.716022 4.79297 4)"
            stroke="white" stroke-width="2" />
    </svg>


</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const emits = defineEmits("back");
let props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    class: {
        type: String,
        default: ''
    }
})
const clickStop = () => {
    emits("clickStop");
}

</script>
<style>
</style>
