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

  https://www.mall4j.com/

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

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

<template>
  <view
    class="Mall4j component-select-popup"
    @touchmove.stop.prevent="moveHandle"
  >
    <view
      class="mask"
      @tap="cancal"
    />
    <view class="content-box">
      <view class="select-item-box">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
        >
          <view
            v-for="item in data"
            :key="item.value"
            class="item"
            :class="{ active: value === item.value, forbid: item.ishidden !== undefined }"
            @tap="item.ishidden === undefined ? submit(item.value) : ''"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
      <view
        class="cancal-btn"
        @tap="cancal"
      >
        {{ $t('quXiao') }}
      </view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['cancal', 'submitData'])
defineProps({
  /**
     * 数据格式 { name: 显示的按钮, value:唯一标识符 }
     */
  data: {
    type: Array,
    default () {
      return []
    }
  },
  /**
     * 回显的数据
     */
  value: {
    type: Number,
    default: 0
  }
})

const moveHandle = () => { }

// 取消弹框
const cancal = () => {
  emit('cancal')
}

const submit = (value) => {
  emit('submitData', value)
}
</script>

<style lang="scss" scoped>
.component-select-popup {
  @keyframes window-open {
    0% {
      bottom: -5.5rem;
    }

    100% {
      bottom: 0;
    }
  }

  .content-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f2f3f5;
    animation: window-open 0.4s 1;
    z-index: 1000 !important;

    .select-item-box {
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      padding: 0 30rpx;

      .item {
        box-sizing: border-box;
        min-height: 86rpx;
        font-size: 28rpx;
        line-height: 40px;
        color: #333333;
        display: flex;
        word-break: break-all;
        justify-content: center;
        align-items: center;
        border-bottom: 2rpx solid #f2f2f2;
      }

      .item.active {
        color: #082ba6;
      }

      .item:last-child {
        border: none;
      }
    }

    .cancal-btn {
      height: 100rpx;
      border-radius: 10rpx 10rpx 0rpx 0rpx;
      background: #fff;
      font-size: 28rpx;
      line-height: 40px;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .forbid {
    color: #C0C4CC !important;
  }
}

.scroll-Y {
  max-height: calc(100vh - 120rpx);

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
}
</style>
