<template>
  <view>
    <view class="hs_modal_picker">
      <view class="select_day_btn" @click="onPopupShow">
        <view class="name" :style="props?.baseStyle || {}">{{ selectEd?.name }}</view>
        <uni-icons v-if="selectEd?.name === '全部楼栋'" type="down" color="#333" size="12" />
      </view>
      <view class="close_btn" v-if="selectEd?.name !== '全部楼栋'" @click="handleClose">
        <uni-icons type="close" color="#666" size="18" />
      </view>
    </view>

    <hs-popup :show="popupShow" @close="handleonClose" 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="#2A7EFB"></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { showToast } from '@/common/libraries/naviHelper'
import { Apis } from '@/gen/Apis'
import { ref } from 'vue'
const props = defineProps(['Apis', 'baseStyle', "params"])
const emit = defineEmits(['close', 'change'])
const selectEd = ref({ name: '全部楼栋', id: 0 })
const formData = ref({ page: 1 })
const pickerList = ref<any>([])
const meta = ref<any>({})
const popupShow = ref(false)

const onPopupShow = () => {
  console.log(props?.params, '成都市 ')
  if (!popupShow.value && props?.params?.asset_projects_id) {
    popupShow.value = !popupShow.value
    getPickerList()
  } else {
    showToast('请先选择项目！')
  }
}

const handleScrollLower = (e: { page: number }) => {
  formData.value.page = e?.page
  getPickerList()
}

const getPickerList = () => {
  getApiLoading(Apis?.Asset?.AssetHouses?.SelectBuilding, { ...formData.value, ...props?.params }).then(res => {
    pickerList.value = res?.data
    console.log(res)
  })
}
const handleonClose = () => {
  popupShow.value = !popupShow.value
}

const onSelectMerchant = (i: {
  name: string
  id: number
  asset_houses_id: number
  asset_house: { name: string }
}) => {
  selectEd.value = i
  emit('change', { asset_buildings_id: i?.id })
  handleonClose()
}

const handleClose = () => {
  selectEd.value = { name: '全部楼栋', id: 0 }
  emit('change', { asset_buildings_id: undefined })
}
</script>

<style lang="scss" scoped>
.hs_modal_picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.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;
  border-radius: 50rpx;
  text-align: center;
  font-size: 28rpx;
  padding: 14rpx 0;
  color: #666;

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