<template>
  <uni-popup ref="popup" type="bottom"  :safe-area="false"	>
	  
    <view class="list-wrapper">
      <view class="list-top">
		   <text>支付方式</text>
	  </view>
       <view class="store" >
		    <view class="store-inner-slot" v-for="(item,i) in props.list" @tap="selectFunc(item,i)" >
				<view class="left">
                     <image  class="left-img"  :src="item.img" mode="scaleToFill" />
					 <text class="left-text">
					   {{item.name}}
					   <text class="left-price" v-if="item.value == 5">（可用{{ item.price}}元）</text>
					 </text>
				</view>
				<view class="more-selected">	
					<image :src="item.checked ? '/static/img/success.png' : '/static/img/unselected.png'" mode="scaleToFill" />
				</view>
			</view>
	   </view>
	   <view class="footer-wrapper">
	     <view class="footer-main">
	       <view class="footer-button">
	         <!-- <view class="flex-center" hover-class="touch-button" @tap="close">取消</view> -->
	         <view @tap="confirmFunc" class="confirm flex-center" hover-class="touch-button">确认</view>
	       </view>
	     </view>
	   </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  list: {
    type: Array,
  },
});
const emits = defineEmits(["choiceValue"]);
const popup = ref();
console.log(props.list,'propspropspropsprops')
const open = () => {
  popup.value.open();
};
// const searchText = ref("");
// const filerBank = () => {
//   return props.list.filter((v) => v[props.value].includes(searchText.value));
// };
const choice = (val) => {
  popup.value.close();
};
function selectFunc(item,i){
	var list = props.list
	list.forEach((item,key)=>{
		if(key == i){
			item.checked = true
		}else{
			item.checked = false
		}
	})
  emits("choiceValue", i);
	props.list = list
}

function confirmFunc(){
  emits("choiceValue", null,1);
}
defineExpose({ open });
</script>

<style lang="scss" scoped>

.list-wrapper {
  // display: flex;
  // flex-direction: column;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fafafa;
  max-height: 1000rpx;
  padding: 30rpx;
  position: relative;
  bottom: 0;
  .search-input {
    input {
      border-bottom: 1px solid #ccc;
      text-indent: 1rem;
      padding: 10rpx 0;
    }
  }
  .list-mian {
    flex: 1;
    overflow-y: scroll;
    margin-top: 20rpx;
    .list-item {
      margin: 10rpx 0;
      padding: 10rpx;
      font-size: 28rpx;
    }
  }
}
 .store-inner-slot {
	  position: relative;
	  margin: 20rpx -10rpx;
	  background-color: #fff;
	  align-items: center;
	  // padding: 0 40rpx;
	  // height: 120rpx;
	  font-size: 30rpx;
	 border-radius: 10rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 24rpx;
      .left {
        display: flex;
        align-items: center;
      }
      .right {
        color: #999999;
      }
    }
	
	.left-img{
		width: 50rpx;
		height: 50rpx;
		margin-right: 6rpx;
		margin-top: 6rpx;
	}
	.left-text{
		
		    font-family: PingFang SC-Regular;
			font-size: 32rpx;
			font-weight: 400;
			.left-price{
				color: #8F97A9;
			    font-size: 24rpx;
			};
	}
	.more-selected {
	  width: 60rpx;
	  height: 60rpx;
	  // border-radius: 50%;
	  // margin-right: 20rpx;
	  // border: 2rpx solid rgba(217, 217, 217, 1);
	  image {
	    width: 100%;
	    height: 100%;
	  }
	}
	// .store {
	//   position: relative;
	// 	margin: 20rpx;
	// 	border-radius: 20rpx;
	//   background-color: #fafafa;
	//   display: flex;
	//   justify-content: flex-start;
	//   align-items: center;
	//   padding: 0 40rpx;
	//   // height: 120rpx;
	//   font-size: 30rpx;
	//   }
	  
	  .footer-wrapper {
	    // height: 186rpx;
		margin-top: 150rpx;
	    .footer-main {
	      position: fixed;
	      left: 0;
	      right: 0;
	      bottom: 0;
	      // border-top: 1rpx solid #ededed;
	      .tips {
	        margin: 20rpx;
	        text-align: center;
	        font-size: 27rpx;
	        color: #a6a6a6;
	      }
	      .footer-button {
	        padding: 0 30rpx;
	        margin-top: 30rpx;
	        padding-bottom: 30rpx;
	        display: flex;
	  
	        justify-content: space-between;
	        view {
	  		  text-align: center;
	  		  padding: 20rpx 0px;
	  		  font-size: 50rpx;
	          width: 100%;
	          // height: 110rpx;
	          font-size: 33rpx;
	          font-weight: 500;
	          color: rgba(0, 0, 0, 0.5);
	          border-radius: 20rpx;
	          background-color: #f7f7f7;
	        }
	        .confirm {
	          color: #fff;
	          background: #2980fd;
	        }
	      }
	    }
	  }
	  .list-top{
		  margin-bottom: 40rpx;
		  font-weight: 600;
	  }
</style>
