<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");
    .currencyTitle{
        position: relative;
        font-size: 32rpx;
        padding: 30rpx 0;
    }
    .Clear{
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }
    .currencyList{
        flex-wrap: wrap;
    }
    .currency-center{
        width: 150rpx;
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        border: 1px solid #fff;
        color: #000;
        background: #cccc;
        margin: 0 20rpx 10rpx 20rpx;
    }
    .currency-center.active{
        border-color: #3F82DD;
        background: #D3E5FD;
        color: #3F82DD;
    }
    .currencySure{
        padding: 0 20rpx;
        margin-top: 80rpx;
    }
    .currencySure view{
        background: #257BF2;
        border-radius: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        color: #fff;
    }
</style>
<template>
     <u-popup mode="bottom" border-radius="20" 
        :popup="false" 
        v-model="currencyVisible" :maskCloseAble="true" 
        length="auto" :safeAreaInsetBottom="true" 
        @close="popupCurrency" :z-index="9999">
        <view class="column">
            <view class="currencyTitle text-center">币种 
                <u-icon class="Clear" name="close" color="#A1A1A1" size="40" @click="close" />
            </view>
            <view class="currencyList row">
                <view v-for="(item,index) in currencyList" :key="index"
                class="currency-center text-center"
                :class="[item.id==newCurrent?'active':'']"
                @click="newCurrent=item.id">{{ item.name }}</view>
            </view>
            <view class="currencySure">
                <view class="text-center" @click="popupCurrency">确定</view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    props:['current','currencyList'],
    data() {
        return {
            currencyVisible: true,
            newCurrent: 1,
        }
    },
    watch: {
        current:{
            handler(newVal,oldVal){
                this.newCurrent = newVal
            },
            immediate:true,
        }
    },
    mounted() {
        this.currencyVisible = true
    },
    methods: {
        close(){
            this.currencyVisible = false
            this.$emit('close')
        },
        popupCurrency(){
            this.$emit('change',this.newCurrent)
        },
    }
}
</script>