<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <uni-popup
    ref="presalePopupRef"
    type="bottom"
  >
    <view class="optionType">
      <view class="title">
        <text>{{ title }}</text>
        <view
          class="close iconfont"
          @tap="moldClose(1)"
        >
          &#xe60e;
        </view>
      </view>
      <view
        class="content-box"
        :style="{height}"
      >
        <block
          v-for="item in lists"
          :key="item[options.key]"
        >
          <view
            :class="['list',{'active':isActive(item),disabled:item.disabled}]"
            @tap="moleChange(item)"
          >
            <view class="left">
              {{ item[options.label] }}
            </view>
            <view class="right iconfont">
              {{ item.disabled ? '' : '&#xe659;' }}
            </view>
          </view>
          <view
            v-if="item.hintTxt"
            class="hint"
          >
            {{ item.hintTxt }}
          </view>
        </block>
      </view>

      <view
        v-if="tips"
        class="hint tips"
      >
        {{ tips }}
      </view>

      <button
        class="button"
        type="primary"
        @tap="moldClose"
      >
        {{ $t('queDing') }}
      </button>
    </view>
  </uni-popup>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    default: $t('qingXuanZe')
  },
  lists: {
    type: Array,
    default: () => ([])
  },
  options: {
    type: Object,
    default: () => ({
      key: 'value',
      label: 'label', // 列表显示的label字段
      value: 'value' // 列表选取的value字段
    })
  },
  height: {
    type: String,
    default: ''
  },
  // 是否支持多选
  isMult: {
    type: Boolean,
    default: false
  },
  tips: {
    type: String,
    default: ''
  },
  nullTips: {
    type: String,
    default: $t('qingXuanZeShuXingZhi')
  }
})
const emits = defineEmits(['change'])

const isActive = (curItem) => {
  return (!props.isMult && curSelectVal.value === curItem[props.options.value]) || (props.isMult && curItem.checked)
}

const curSelectVal = ref('')
const presalePopupRef = ref(null)
// 商品类型弹出层
const open = (val) => {
  curSelectVal.value = val
  selectObj = props.lists.find(f => f[props.options.value] === curSelectVal.value)
  presalePopupRef.value.open('share')
}

let selectObj = null
const moleChange = (curItem) => {
  if (curItem.disabled) return
  if (props.isMult) {
    curItem.checked = !curItem.checked
    return
  }
  curSelectVal.value = curItem[props.options.value]
  selectObj = curItem
}

let multList = []
const verifySelected = () => {
  let verifyRes = false
  if (props.isMult) {
    for (const item of props.lists) {
      if (item.checked) {
        verifyRes = true
        multList.push(item)
      }
    }
  } else if (selectObj) {
    verifyRes = true
  }
  return verifyRes
}

// type 1为取消这次选择
const moldClose = (type) => {
  if (type !== 1) {
    if (!verifySelected()) {
      uni.showToast({
        title: props.nullTips,
        icon: 'none'
      })
      return
    }
    emits('change', props.isMult ? multList : selectObj)
    curSelectVal.value = ''
    selectObj = null
    multList = []
  }
  presalePopupRef.value.close()
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
// 去除滚动条
/* #ifndef APP-PLUS */
::-webkit-scrollbar{
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
  color: transparent;
  -webkit-appearance: none;
}
// 去除火狐浏览器滚动条
:deep(.uni-scroll-view) {
  scrollbar-width: none;
}
/* #endif */
.optionType {
  border-radius: 20rpx 20rpx 0px 0px;
  padding: 30rpx;
  background-color: #fff;
  box-sizing: border-box;

    .title {
      text-align: center;
      font-weight: bold;
      position: relative;
      margin-bottom: 54rpx;

      .close {
        width: 36rpx;
        height: 36rpx;
        background: #F5F5F5;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        font-size: 12rpx;
        line-height: 36rpx;
        color: #999999;
      }
    }

    .content-box{
      width: 100%;
      // height: 50vh;
      overflow-y: auto;
    }

    .list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 48rpx;

      .left {
        flex: 1;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .right {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #D1D1D1;
        box-sizing: border-box;
        text-align: center;
        font-size: 12rpx;
        line-height: 36rpx;
        color: #fff;
      }
    }

    .active {
      .right {
        border: none;
        background-color: #082BA6;
      }
    }
    .disabled{
      .right {
        border: none;
        background-color: #e4e7ed;
        content: normal;
      }
    }

    .hint{
      padding: 20rpx;
      background-color: #f7f8fa;
      color: #909399;
      font-size: 24rpx;
      margin-top: -28rpx;
      margin-bottom: 48rpx;
      &.tips{
        margin-top: 0;
      }
    }

    button {
      margin-top: 32rpx;
      background-color: #082BA6;
    }
  }
</style>
