<template>
    <div>
        <div type=info v-if="singleTrackEnable" class="single-preview" data-name="single_preview" @click="doSend">
            <img src="/image/route-preview.png" alt="">
        </div>
        <div v-if="singleTrackEnable" class="product">
            <div class="product-title">
                <p>总产量</p>
                <p>已完成</p>
                <p>未完成</p>
            </div>
            <div class="product-content">
                <p>{{ product['total'] || 0 }}</p>
                <p>{{ product['complete'] || 0 }}</p>
                <p>{{ product['uncomplete'] || 0 }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, toRefs, ref } from 'vue';

    const emits = defineEmits(['clearSinglePoint'])
    
    const props = defineProps({
        singleTrackEnable: Boolean
    })
    const data = reactive({
        product: {}
    })
    const { product } = toRefs(data)
    const isSinglePreview = ref(false)

    function doSend() {
        isSinglePreview.value = true
        emits('clearSinglePoint')
    }
</script>

<style lang="less" scoped>
    .single-preview {
        position: absolute;
        z-index: 999;
        bottom: 104px;
        right: 10px;
        background: #4A75A9;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        opacity: 1;
        width: 4vw;
        height: 4vw;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .product {
        position: absolute;
        z-index: 999;
        bottom: 24px;
        right: 10px;
        color: #fff;
        background: #000;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
        border-radius: 10px 10px 10px 10px;

        .product-title,
        .product-content {
            display: flex;

            p {
                padding: 5px;
                width: 100px;
                text-align: center;
            }
        }

        .product-content {
            p:nth-child(2) {
                color: #3CD84F;
            }

            p:nth-child(3) {
                color: #FF6363;
            }
        }
    }
</style>