<template>
  <view>
    <view class="select_day_btn" @click="onPopupShow">
      <view class="name">{{ selectEd?.name }}</view>
      <uni-icons type="down" color="#333" size="12" />
    </view>
    <nchl-popup :show="popupShow" @close="onPopupShow" mode="bottom" closeable :round="20">
      <view class="popup_merchant_select_body">
        <view class="popup_merchant_select_title"> 选择商户 </view>

        <scroll-view scroll-y="true" class="scroll-Y">
          <view class="popup_merchant_body">
            <view v-for="(i, index) in pickerList" class="merchant_item" :key="`key_${index}`"
              @click="onSelectMerchant(i)">
              <view>{{ i?.name }}</view>
              <uni-icons type="checkmarkempty" size="20" v-if="selectEd?.id === i?.id" color="#345CA1"></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </nchl-popup>
  </view>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { ref } from 'vue'
const props = defineProps(['Apis'])
const emit = defineEmits(['close', 'change'])
const selectEd = ref({ name: '全部商户', id: 0 })
const pickerList = ref<any>([])
const popupShow = ref(false)

const onPopupShow = () => {
  popupShow.value = !popupShow.value
  if (popupShow.value) {
    getPickerList()
  }
}

const getPickerList = () => {
  getApiLoading(props?.Apis, {}).then(res => {
    pickerList.value = [...[{ name: '全部商户', id: 0 }], ...res?.data]
    console.log(res)
  })
}

const onSelectMerchant = (i: { name: string; id: number }) => {
  selectEd.value = i
  emit('change', i)
  onPopupShow()
}
</script>

<style lang="scss" scoped>
.popup_merchant_select_body {
  background-color: #fff;
  padding-bottom: calc(48px + constant(safe-area-inset-bottom));
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;

  .popup_merchant_select_title {
    text-align: center;
    padding: 30rpx 0;
    font-size: 30rpx;
    background-color: #f8f8f8;
    border-bottom: 1rpx solid #eee;
  }

  .scroll-Y {
    width: 100%;
    height: 660rpx;
  }

  .popup_merchant_body {
    font-size: 30rpx;
    color: #333;

    .merchant_item {
      padding: 30rpx;
      border-bottom: 1rpx solid #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .popup_merchant_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 50rpx;

    .btn {
      flex: 1;

      &:last-child {
        margin-left: 30rpx;
      }
    }
  }
}

.select_day_btn {
  display: flex;
  align-items: center;
  background-color: #eee;
  border-radius: 50rpx;
  text-align: center;
  font-size: 28rpx;
  padding: 14rpx 20rpx;

  .name {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 用省略号表示被隐藏的文本 */
    padding-right: 10rpx;
    max-width: 180rpx;
  }
}
</style>
