<template>
	<view class="popupRadio">
		<u-popup :show="radioShow" :mode="mode">
			<view v-if="title" class="popupRadioTitle">
				<text>{{title}}</text>
			</view>
			<view v-if="!radioList.length" style="height: 10vh; line-height: 10vh; text-align: center;">
				暂无数据选择
			</view>
			<u-radio-group :value="currentSelect" placement="column" iconPlacement="right" @change="onChange" v-else>
				<u-radio :customStyle="{marginBottom: '8px', 'font-weight': 'bolder'}"
				 v-for="(item, index) in radioList" :key="index" :label="item.name" :name="item.name">
				</u-radio>
			</u-radio-group>

			<view class="popupRadioFoot">
				<button @click="cancel">取消</button>
				<button @click="confirm">确定</button>
			</view>

		</u-popup>

	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			radioShow: {
				type: Boolean,
				default: false
			},
			radioList: {
				type: Array,
				default: [
				]			
			},
			mode: {
				type: String,
				default: "bottom"
			},
			title: {
				type: String,
				default: ""
			},
			currentSelect: {
				type: String,
				default: ""
			}
		},
		name: "popupRadio",
		data() {
			return {
				currentSelectName: ""
			};
		},
		methods: {
			confirm() {
				this.$emit('confirm', this.currentSelectName)
			},
			cancel(){
				this.$emit('cancel')
			},
			onChange(value){
				this.currentSelectName = value
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.popupRadio {
		opacity: 1;

		/deep/.u-popup__content {
			border-radius: 32rpx 32rpx 0 0;
			padding-bottom: 50rpx;
		}

		.popupRadioTitle {
			margin-top: 48rpx;
			text-align: center;
			color: #8C8C8C;
			font-size: 32rpx;
		}

		/deep/.u-radio-group {
			margin: 24rpx;
			max-height: 50vh;
			overflow-y: scroll;

			.u-radio {
				height: 45rpx;
				line-height: 45rpx;
			}

			.u-radio__text {
				font-size: 32rpx !important;

			}

			.u-radio__icon-wrap {
				height: 32rpx !important;
				width: 32rpx !important;
				line-height: 32rpx;
			}
		}
		/deep/.popupRadioFoot{
			display: flex;
			justify-content: space-between;
			bottom: 100rpx;
			width: 100%;
			button{
				width: 339rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #2E75E6;
				padding: 0 24rpx;
				border: 3rpx solid transparent;
				position: relative;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image:  linear-gradient(90deg, #FAFAFA, #FAFAFA), linear-gradient(90deg, #2E75E6, #5E58EE);
				&:after{
					content: "";
				}
				&:last-child{
					background-image:  linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
					color: #FFFFFF;
				}
			}
			
		}
	}
</style>
