<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
    <view class="tips-wrapper">
      <view class="tips-text flex-center" v-if="title"> {{ title }} </view>
      <block v-for="v in list" :key="v[value]">
        <view class="single-text flex-center" hover-class="u-cell-hover" hover-stay-time="150" :style="{ color: v[value] == selected ? activeColor : v.color }" @tap="confirm(v)">{{
          v[label]
        }}</view>
      </block>
      <view class="line"></view>
      <view class="tips-text tips-cancel flex-center" hover-class="u-cell-hover" hover-stay-time="150" @tap="popup.close()"> 取消 </view>
    </view>
  </uni-popup>

  <JeepayPopupConfirm ref="jeepayPopupConfirm" />
</template>

<script setup>
import { reactive, ref, inject } from 'vue'
const emits = defineEmits(['confirm'])
const props = defineProps({
  title: { type: String }, //标题 传入展示 不传则隐藏
  activeColor: { type: String, default: '#2980FD' }, //选中后文字颜色
  textColor: { type: String }, //列表文字颜色
  textSize: { type: String }, //列表文字大小
  titleColor: { type: String }, //标题文字颜色
  titleSize: { type: String }, //标题文字大小
  list: { type: Array }, //渲染单选列表集合
  label: { type: String, default: 'label' }, //展示文字的键名 可传值复写
  value: { type: String, default: 'value' }, //展示文字的key 可传值复写
})
// 引入依赖 解决滚动穿透问题 配合JeepayWrapper 使用
const wrapperHidden = inject('wrapperHidden')
const selected = ref(undefined)
const popup = ref(null)

const jeepayPopupConfirm = ref()

// 打开弹窗 val 选中数据的key
const open = (val) => {
  selected.value = val
  popup.value.open()
}
const confirm = (listItem) => {
  popup.value.close()

  // 包含回调函数
  if (listItem.fun) {
    // 包含确认弹层。
    if (listItem.confirmText) {
      jeepayPopupConfirm.value
        .open(listItem.confirmText)
        .then(() => {
          listItem.fun()
        })
        .catch(() => {
          popup.value.open()
        })
    } else {
      listItem.fun()
    }
  } else {
    1
    emits('confirm', listItem)
  }
}
const change = (e) => {
  if (wrapperHidden) {
    wrapperHidden(e.show)
  }
}
const close = () => popup.value.close()
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.tips-wrapper {
  // overflow: hidden;
  border-radius: 32rpx 32rpx 0 0;
  padding-top: 20rpx;
  padding-bottom: 60rpx;
  background-color: #fff;
  .tips-text {
    text-align: center;
    height: 90rpx;
    font-size: 30rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
  }
  .single-text {
    height: 120rpx;
    color: #4d4d4d;
  }
  .line {
    height: 20rpx;
    background-color: rgba(0, 0, 0, 0.07);
  }
  .tips-cancel {
    height: 110rpx;
    color: #808080;
    font-size: 33rpx;
    border: none;
  }
  .u-cell-hover {
    background-color: #f8f9fa;
  }
}
</style>
