<script setup name="DataEDBReplaceEDB">
import {ref} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import SelectEDB from './calculate/components/SelectEDB.vue'
import { useRouter } from 'vue-router'
import { showDialog, showToast } from 'vant'

const router=useRouter()

const beforeEDB=ref(null)
const afterEDB=ref(null)
const showSelectEDB=ref(false)
let selectType='before'
function handleShowSelectEDB(type){
    selectType=type
    showSelectEDB.value=true
}
function handleConfirmSelectEDB(e){
    if(selectType==='before'){
        beforeEDB.value=e
    }else{
        afterEDB.value=e
    }
}

const saveBtnLoading=ref(false)
function handleSave(){
    if(!beforeEDB.value){
        showToast('原指标不能为空')
        return
    }
    if(!afterEDB.value){
        showToast('替换指标不能为空')
        return
    }
    showDialog({
        title:'提示',
        message:'本次替换将持续较长时间，是否确认替换？',
        showCancelButton:true
    }).then(()=>{
        apiDataEDB.replaceEDB({
            OldEdbInfoId:beforeEDB.value.EdbInfoId,
            NewEdbInfoId:afterEDB.value.EdbInfoId,
        }).then(res=>{
            if(res.Ret===200){
                setTimeout(() => {
                    router.back()
                }, 500);
            }
        })
    })

}

</script>

<template>
    <div class="replace-edb-page">
        <van-field 
            :modelValue="beforeEDB?.EdbName"
            readonly
            label="原指标" 
            placeholder="请选择指标"
            input-align="right"
            right-icon="arrow"
            required
            @click-input="handleShowSelectEDB('before')"
        />
        <van-field 
            :modelValue="afterEDB?.EdbName"
            readonly
            label="替换为" 
            placeholder="请选择指标"
            input-align="right"
            right-icon="arrow"
            required
            @click-input="handleShowSelectEDB('after')"
        />
        <p class="tips">提示：替换后，图、表、计算指标和逻辑图引用到原指标的会全部由替换指标替代。</p>

        <div class="opt-btns">
            <van-button class="primary2" @click="$router.back()">取消</van-button>
            <van-button 
                type="primary" 
                :loading="saveBtnLoading"
                loading-text="替换中..."
                @click="handleSave"
            >全部替换</van-button>
        </div>
    </div>

    <!-- 选择指标 -->
    <SelectEDB v-model:show="showSelectEDB" @select="handleConfirmSelectEDB"/>
</template>

<style lang="scss" scoped>
.replace-edb-page{
    min-height: 90vh;
    background-color: $page-bg-grey;
    padding-bottom: 210px ;
    .tips{
        color: $font-grey;
        line-height: 1.7;
        padding: var(--van-cell-horizontal-padding);
    }
}
.opt-btns{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    padding: 48px;
    display: flex;
    justify-content: space-between;
    .van-button{
        width: 48%;
        max-width: 300PX;
    }
}

@media screen and (min-width:$media-width){
    .replace-edb-page{
        padding-bottom: 105px;
    }
    .formula-intro-btn{
        width: 90px;
        height: 30px;
        gap: 2px;
        border-radius: 16px;
        .icon{
            width: 12px;
            height: 12px;
        }
    }
    .opt-btns{
        padding: 24px;
        justify-content: center;
        gap: 10px;
    }
}
</style>