<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;
    }
    .newName{
        padding-left: 66rpx;
    }
    .newNameImg img{
        width: 35rpx;
        height: 35rpx;
    }
</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">
                    <view class="column MB20" v-for="(item, index) in list">
                        <label class="row items-center justify-center MB10" 
                         :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>
                        <view v-if="item.newName" class="MT10">
                            <view class="newNameImg row justify-center"> <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638890399900642324.png"/> </view>
                            <view class="newName">{{ item.newName }}</view>
                        </view>
                    </view>
                </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>