<script setup name="DataEDBCalculateIndex">
import {ref} from 'vue'
import { Dialog } from 'vant';
import { useRouter } from 'vue-router';
import {calculateTypeTipsMap,calculateType,calculateBatchType} from '../util/config'
import { useWindowSize } from '@vueuse/core'


const { width } = useWindowSize()

const router=useRouter()

const showTips=ref(false)
const tipsTitle=ref('')
const tipsContent=ref('')
function handleShowTips(item){
    tipsTitle.value=`【${item.name}】公式说明`
    tipsContent.value=calculateTypeTipsMap.get(item.type)
    showTips.value=true
}

function handleGoDetail(item){
    router.push({
        path:'/dataEDB/calculate/detail',
        query:{
            source:item.type,
            name:item.name
        }
    })
}

function handleGoBatchDetail(item){
    router.push({
        path:'/dataEDB/calculate/batchDetail',
        query:{
            source:item.type,
            name:item.name
        }
    })
}

</script>

<template>
    <div class="calculate-index-page">
        <van-tabs sticky :offset-top="width>650?60:0" swipeable border title-active-color="#0052D9" title-inactive-color="#333" line-width="16px">
            <van-tab title="常规计算">
                <ul class="type-list-wrap">
                    <li 
                        class="type-item" 
                        v-for="item in calculateType" 
                        :key="item.type"
                        @click="handleGoDetail(item)"
                    >
                        <!-- <div class="tips-box" @click.stop="handleShowTips(item)"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                                <path d="M18.75 10.5C18.75 15.3325 14.8325 19.25 10 19.25C5.16751 19.25 1.25 15.3325 1.25 10.5C1.25 5.66751 5.16751 1.75 10 1.75C14.8325 1.75 18.75 5.66751 18.75 10.5ZM10.625 5.50038H9.375V12.375H10.625V5.50038ZM9.24286 14.25V15.75H10.7429V14.25H9.24286Z" fill="#0052D9"/>
                            </svg>
                            <span>公式说明</span>
                        </div> -->
                        <h3 class="name">{{item.name}}</h3>
                    </li>
                </ul>
            </van-tab>
            <!-- <van-tab title="批量计算">
                <ul class="type-list-wrap">
                    <li 
                        class="type-item" 
                        v-for="item in calculateBatchType" 
                        :key="item.type"
                        @click="handleGoBatchDetail(item)"
                    >
                        <div class="tips-box" @click.stop="handleShowTips(item)"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                                <path d="M18.75 10.5C18.75 15.3325 14.8325 19.25 10 19.25C5.16751 19.25 1.25 15.3325 1.25 10.5C1.25 5.66751 5.16751 1.75 10 1.75C14.8325 1.75 18.75 5.66751 18.75 10.5ZM10.625 5.50038H9.375V12.375H10.625V5.50038ZM9.24286 14.25V15.75H10.7429V14.25H9.24286Z" fill="#0052D9"/>
                            </svg>
                            <span>公式说明</span>
                        </div>
                        <h3 class="name">{{item.name}}</h3>
                    </li>
                </ul>
            </van-tab> -->
        </van-tabs>
    </div>
    <!-- 公式说明 -->
    <van-dialog 
        v-model:show="showTips" 
        :title="tipsTitle"
        confirmButtonText='知道啦'
    >
        <div class="edb-formula-tips-html-box" v-html="tipsContent"></div>
    </van-dialog>
</template>

<style lang="scss" scoped>
.type-list-wrap{
    padding: $page-padding;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .type-item{
        padding: 30px 20px;
        border-radius: 16px;
        background: #F8F9FF;
        width: 331px;
        .tips-box{
            width: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            height: 31px;
            border-radius: 42px;
            font-size: 22px;
            color: $theme-color;
            line-height: 1;
            svg{
                width: 20px;
                height: 20px;
            }
        }
        .name{
            margin-top: 9px;
            margin-bottom: 0;
            font-size: 28px;
        }
    }
}
@media screen and (min-width:$media-width){
    .type-list-wrap{
        padding: $page-padding;
        gap: 10px;
        .type-item{
            padding: 15px 10px;
            border-radius: 8px;
            width: 166px;
            .tips-box{
                width: 70px;
                height: 15px;
                border-radius: 21px;
                font-size: 11px;
                svg{
                    width: 10px;
                    height: 10px;
                }
            }
            .name{
                margin-top: 5px;
                font-size: 14px;
            }
        }
    }
}
</style>