<template>
	<sh-popup :popupShow="cardPopup"  :popupTitle="popupTitle" >
		<view slot="content">
			<u-empty v-if="isEmpty"  mode="car"  icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无卡包" > </u-empty>
			<view v-else class="sashier-card p-20">
				<view class="card-item p-36 b-r m-b-20" v-for="(item,index) in list" :key="item.cardNo">
					<u-checkbox-group    >
						<view class="sh-autoFullHig ">
							<view class="p-b-17">
								{{item.accountName}}：{{item.cardNo}}
							</view>
							<view >
								余额：<text class="t-color">{{item.balance}}</text>
							</view>
						</view>
						<u-checkbox :checked="item.selected"  shape="circle" :activeColor="item.selected?'red':'none'" @change="choiceCard(index)"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view slot="footer">
			<u-button type="primary" size="small" class="btn-h" shape="circle" color="linear-gradient(to right, rgb(242, 24, 12), rgb(242, 58, 12))" text="确定" @click="confirmCard"></u-button>
		</view>
	</sh-popup>
</template>
<script>
/**
 * 卡包列表卡片
 * @property {Array} list - 商品信息
 * @property {Boolean} isEmpty - 是空的
 * @property {Boolean} cardPopup - 显示pop
 */
import shPopup from '@/components/sh-popup/sh-popup';
export default {
	props:{
		cardPopup:{
			type:Boolean,
			default:false
		},
		list:{
			type:Array,
			default:{}
		} 
	},
	components: {
		shPopup
	},
	computed:{
		isEmpty() {
			return !this.list.length;
		}
	},
	data(){
		return {
			// isEmpty:false,
			popupScroll:'600rpx',
			popupTitle:'卡包'
		}
	},
	methods:{
		//选择卡
		choiceCard(i){
			this.$emit('choiceCard',i);
		},
		// 确认卡
		confirmCard(){
			this.$emit("confirmCard");
		}
	}
}
</script>
<style lang="scss" scoped>
	.card-item{
		border: 1px solid #f5f5f5;
		box-shadow: 3px 6px 10px 5px #f5f5f5;
	}
</style>