<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .List{
        background: #fff;
        padding: 30rpx 20rpx 10rpx 20rpx;
        border-radius: 8rpx;
    }
    .custom-radio {
        transform: scale(.7);
        margin-right: 5px;
    }
</style>
<template>
     <u-popup mode="center" border-radius="20" 
        :popup="false" 
        v-model="currencyVisible" :maskCloseAble="true" 
        length="80%" :safeAreaInsetBottom="true" 
        @close="close" :z-index="9999">
        <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" 
        style="max-height: 60vh;">
            <view class="List column">
                <radio-group @change="radioChange">
                    <label class="row items-center justify-center MB20" 
                    v-for="(item, index) in list" :key="item.value">
                        <view>
                            <radio :value="item.id" :checked="item.id == newCurrent" 
                            color="#295EEB"
                            borderColor="#333"
                            class="custom-radio"/>
                        </view>
                        <view class="flex1">{{item.name}}</view>
                    </label>
                </radio-group>
            </view>
        </scroll-view>
    </u-popup>
</template>
<script>
export default {
    props:['current','list'],
    data() {
        return {
            currencyVisible: true,
            newCurrent: 0,
        }
    },
    watch: {
        current:{
            handler(newVal,oldVal){
                this.newCurrent = newVal
            },
            immediate:true,
        },
        list:{
            handler(newVal,oldVal){
                
            },
            deep: true,
            immediate:true,
        }
    },
    mounted() {
        this.currencyVisible = true
    },
    methods: {
        close(){
            this.currencyVisible = false
            this.$emit('close')
        },
        radioChange(value){
            this.$emit('change',Number(value.detail.value))
        },
    }
}
</script>