<template>
  <view>
    <hs-cell
      :title="props?.title"
      isLink
      @click="onPopupShow"
      isPlaceholder
      required
      borderTop
      :value="selectEd?.name"
    />
    <hs-popup :show="popupShow" @close="onPopupShow" mode="bottom" closeable :round="20">
      <view class="popup_merchant_select_body">
        <view class="popup_merchant_select_title"> 选择房屋 </view>
        <view class="popup_search_input">
          <input
            placeholder="请输入房屋"
            confirm-type="search"
            @confirm="handleSearch"
            placeholder-style="font-size:27rpx;color:#ccc;"
            v-model="searchValue"
          />
        </view>
        <scroll-view scroll-y="true" class="scroll-Y">
          <view class="popup_merchant_body">
            <hs-empty v-if="!pickerList?.length" />
            <view
              v-for="(i, index) in pickerList"
              class="merchant_item"
              :key="`key_${index}`"
              @click="onSelectMerchant(i)"
            >
              <view>{{ i?.full_name }} - {{ i?.name }}</view>
              <uni-icons
                type="checkmarkempty"
                size="20"
                v-if="selectEd?.id === i?.id"
                color="#FBA60D"
              ></uni-icons>
            </view>
          </view>
        </scroll-view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { debounce } from '@/common/libraries/tools'
let keywordStore = ''
const formData = ref({ page: 1, asset_projects_id: '' })
const props = defineProps(['title', 'formData'])
const emit = defineEmits(['close', 'change'])
const searchValue = ref('')
const selectEd = ref({ name: '', id: 0 })
const pickerList = ref<any>([])
const popupShow = ref(false)

const onPopupShow = () => {
  popupShow.value = !popupShow.value
  if (popupShow.value) {
    pickerList.value = []
    formData.value.asset_projects_id = props?.formData?.asset_project_id
    getPickerList()
  }
}

const handleSearch = debounce((e: any) => {
  if (e === keywordStore) {
    //输入框值没变，不搜索
    return
  }
  keywordStore = e
  formData.value.page = 1
  pickerList.value = []
  getPickerList()
}, 500)

const getPickerList = () => {
  getApiLoading(Apis.Asset.AssetHouses.SelectHouse, {
    name: searchValue.value,
    ...formData.value
  }).then(res => {
    pickerList.value = [...pickerList.value, ...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: 860rpx;
  }
  .popup_merchant_body {
    font-size: 30rpx;
    color: #333;
    border-top: 1rpx solid #f8f8f8;
    .merchant_item {
      padding: 30rpx;
      border-bottom: 1rpx solid #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.popup_search_input {
  padding: 20rpx 30rpx;
  margin: 20rpx 30rpx;
  border-radius: 100rpx;
  border: 1rpx solid #eee;
}
</style>
