eta_mobile_front/src/views/dataEDB/calculate/components/SelectEDB.vue

<script setup>
import {reactive, ref, watch} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import { showToast } from 'vant'
import { useNoAuth } from '@/hooks/useNoAuth'

const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    source:{//计算类型
        type:Number,
        default:0
    },
    params:{},//传来的参数
})
const emits=defineEmits(['update:show','select'])

function handleClose(){
    emits('update:show',false)
}

const listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    finished:false,
    loading:false,
})
async function getEDBList(){
    listState.loading=true
    const filterMap = {
		5: 2,
		14: 3,
		63: 6
	}
    const params=props.source?{
        FilterSource:filterMap[props.source] ? filterMap[props.source] : 1,
        Frequency:props.source===61?'季度':''
    }:{}
    const res=await apiDataEDB.edbSearchList({
        KeyWord:searchEDBTxt.value,
        CurrentIndex:listState.page,
        PageSize:listState.pageSize,
        ...params,
        ...props.params,
    })
    listState.loading=false
    if(res.Ret===200){
        if(!res.Data){
            listState.finished=true
            return
        }
        
        listState.finished=res.Data.Paging.IsEnd
        const arr=res.Data.List||[]
        listState.list=[...listState.list,...arr]
    }
}
function onLoad(){
    listState.page++
    getEDBList()
}
const searchEDBTxt=ref('')
function onSearch(){
    listState.page=1
    listState.list=[]
    listState.finished=false
    getEDBList()
}


const checked=ref('')
function handleSave(){
    let selectItem=null
    listState.list.forEach(item=>{
        if(item.EdbInfoId===checked.value){
            selectItem=item
        }
    })
    if(!selectItem){
        showToast('请选择指标')
        return
    }
    emits('select',selectItem)
    handleClose()
}

watch(
    ()=>props.show,
    ()=>{
        if(props.show){
            listState.page=1
            listState.list=[]
            listState.finished=false
            checked.value=''
            searchEDBTxt.value=''
        }
    }
)


// 指标详情
const showEDBInfo=ref(false)
const edbInfo=ref(null)
function handleShowEDBInfo(item){
    edbInfo.value=item
    showEDBInfo.value=true
}

</script>

<template>
    <van-popup 
        :show="props.show"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="select-edb-box">
            <div class="search-box">
                <van-search
                    v-model="searchEDBTxt"
                    show-action
                    shape="round"
                    placeholder="指标ID/名称"
                    @clear="searchEDBTxt=''"
                    @search="onSearch"
                >
                    <template #action>
                        <span class="right-btn" @click="onSearch">查询</span>
                    </template>
                </van-search>
            </div>
            <div class="list-wrap" v-if="props.show">
                <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
                <van-list
                    v-model:loading="listState.loading"
                    :finished="listState.finished"
                    :finished-text="listState.list.length>0?'没有更多了':'暂无数据'"
                    :immediate-check="false"
                    @load="onLoad"
                >   
                    <van-radio-group v-model="checked">
                        <ul class="list-box">
                            <li class="item" v-for="item in listState.list" :key="item.EdbInfoId">
                                <van-radio :name="item.EdbInfoId" :disabled="!item.HaveOperaAuth">
                                    <div class="con">
                                        <img :src="useNoAuth().noAuthIco" width="18" height="18" v-if="!item.HaveOperaAuth">
                                        <div class="name" v-html="item.SearchText"></div>
                                        <svg-icon @click.stop="handleShowEDBInfo(item)" class="icon" name="error-circle-filled" size="16px" color="#999"/>
                                    </div>
                                </van-radio>
                            </li>
                        </ul>
                    </van-radio-group>
                </van-list>
            </div>
            <div class="btns-box">
                <van-button @click="handleClose">取消</van-button>
                <van-button type="primary" @click="handleSave">保存</van-button>
            </div>
        </div>
    </van-popup>
    <!-- 指标信息详情 -->
    <van-popup 
        v-model:show="showEDBInfo"
        round
    >
        <div class="edb-info-wrap" v-if="edbInfo">
            <h3 class="van-multi-ellipsis--l2 name">{{edbInfo.EdbName}}</h3>
            <ul class="info-list">
                <li class="item">
                    <span class="label">指标ID：</span>
                    <span class="con">{{edbInfo.EdbCode}}</span>
                </li>
                <li class="item">
                    <span class="label">频度：</span>
                    <span class="con">{{edbInfo.Frequency}}</span>
                </li>
                <li class="item">
                    <span class="label">单位：</span>
                    <span class="con">{{edbInfo.Unit}}</span>
                </li>
                <li class="item">
                    <span class="label">起始时间：</span>
                    <span class="con">{{edbInfo.StartDate}}</span>
                </li>
                <li class="item">
                    <span class="label">更新日期：</span>
                    <span class="con">{{edbInfo.LatestDate}}</span>
                </li>
                <li class="item">
                    <span class="label">最新值：</span>
                    <span class="con">{{edbInfo.LatestValue}}</span>
                </li>
                <li class="item">
                    <span class="label">最近更新：</span>
                    <span class="con">{{edbInfo.ModifyTime}}</span>
                </li>
                <li class="item">
                    <span class="label">数据来源：</span>
                    <span class="con">{{edbInfo.SourceName}}</span>
                </li>
            </ul>
            <van-button block type="primary" @click="showEDBInfo=false">知道了</van-button>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.select-edb-box{
    display: flex;
    flex-direction: column;
    height: 100%;
    .list-wrap{
        flex: 1;
        overflow-y: auto;
        padding-left: var(--van-padding-md);
        .item{
            :deep(.van-radio__label){
                flex: 1;
            }
            .con{
                padding: 32px 32px 32px 0;
                border-bottom: 1PX solid $border-color;
                display: flex;
                .name{
                    flex: 1;
                }
                .icon{
                    margin-left: 20px;
                }
            }
        }
    }
    .btns-box{
        padding: 20px var(--van-padding-md);
        display: flex;
        justify-content: space-between;
        .van-button{
            width: 48%;
            max-width: 300PX;
        }
    }
}
.search-box{
    padding: var(--van-padding-md);
    .van-search{
        padding: 6px;
        background-color: #F0F2F6;
        border-radius: var(--van-radius-max);
    }
    :deep(.van-search__content){
        background: transparent !important;
        border: none;
    }
    :deep(.van-search__field .van-field__left-icon){
        color: #333;
    }
    .right-btn{
        display: inline-block;
        color: #fff;
        background-color: $theme-color;
        width: 112px;
        height: 56px;
        text-align: center;
        line-height: 56px;
        border-radius: var(--van-radius-max);
    }
}
.edb-info-wrap{
    padding: 48px;
    width: 80vw;
    max-width: 500PX;
    .name{
        text-align: center;
        margin-top: 0;
        font-size: 36px;
    }
    .info-list{
        max-height: 60vh;
        overflow-y: auto;
        .item{
            margin-bottom: 32px;
            display: flex;
            .label{
                width: 50%;
                flex-shrink: 0;
            }
            .con{
                width: 50%;
                flex-shrink: 0;
                color: $font-grey;
                word-wrap: break-word;
                word-break: break-all;
            }
        }
    }
}

@media screen and (min-width:$media-width){
    .select-edb-box{
        .list-wrap{
            .item{
                .con{
                    padding: 16px 16px 16px 0;
                    .icon{
                        margin-left: 10px;
                    }
                }
            }
        }
        .btns-box{
            padding: 10px var(--van-padding-md);
            justify-content: center;
            gap: 10px;
        }
    }
    .search-box{
        .van-search{
            padding: 3px;
        }
        .right-btn{
            width: 56px;
            height: 28px;
            line-height: 28px;
        }
    }
    .edb-info-wrap{
        padding: 24px;
        .name{
            font-size: 18px;
        }
        .info-list{
            .item{
                margin-bottom: 16px;
            }
        }
    }
}

</style>