<template>
  <view>
    <hs-cell :title="props?.title" isLink @click="onPopupShow" isPlaceholder required borderTop
      :value="showProjectName" />
    <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" @input="handleSearch" @confirm="handleSearch"
            placeholder-style="font-size:27rpx;color:#ccc;" v-model="searchValue" />
        </view>
        <view class="popup_tabs" v-if="popupShow">
          <up-tabs :list="itemsList" :current="currentValue || 0" @click="handleSwitchClick" />
        </view>
        <scroll-view scroll-y="true" class="scroll-Y">
          <view class="popup_merchant_body">
            <hs-empty v-if="!pickerList?.length" />
            <template v-if="currentValue === 0">
              <view v-for="(i, index) in pickerListProject" 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="#FBA60D"></uni-icons>
              </view>
            </template>
            <template v-if="currentValue === 1">
              <view v-for="(i, index) in pickerListBuilding" class="merchant_item" :key="`key_${index}`"
                @click="onSelectBuildingt(i)">
                <view>{{ i?.name }}</view>
                <uni-icons type="checkmarkempty" size="20" v-if="selectEd?.id === i?.id" color="#FBA60D"></uni-icons>
              </view>
            </template>

            <template v-if="currentValue === 2">
              <view v-for="(i, index) in pickerListUnit" class="merchant_item" :key="`key_${index}`"
                @click="onSelectUnit(i)">
                <view>{{ i?.name }}</view>
                <uni-icons type="checkmarkempty" size="20" v-if="selectEd?.id === i?.id" color="#FBA60D"></uni-icons>
              </view>
            </template>
            <template v-if="currentValue === 3">
              <view v-for="(i, index) in pickerListHouse" class="merchant_item" :key="`key_${index}`"
                @click="onSelectHouse(i)">
                <view>{{ i?.name }}</view>
                <uni-icons type="checkmarkempty" size="20" v-if="selectEd?.id === i?.id" color="#FBA60D"></uni-icons>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { debounce } from '@/common/libraries/tools'
import { Apis } from '@/gen/Apis'
import { ref, watch } from 'vue'
let keywordStore = ''
const formData = ref({ page: 1 })
const props = defineProps(['title', 'defaultValueName'])
const emit = defineEmits(['close', 'change'])
const searchValue = ref('')
const selectEd = ref({ name: '', id: 0 })
const pickerList = ref<any>([])
const pickerListProject = ref<any>([])
const pickerListBuilding = ref<any>([])
const pickerListUnit = ref<any>([])
const pickerListHouse = ref<any>([])
const showProjectName = ref('')
const popupShow = ref(false)
const currentValue = ref(0)
const itemsList = ref([{ name: '小区' }])
const selectValueEd = ref<any>([])

watch(
  () => props?.defaultValueName,
  () => {
    showProjectName.value = props?.defaultValueName
  }
)

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

const onPopupShow = () => {
  popupShow.value = !popupShow.value
  if (popupShow.value) {
    setTimeout(() => {
      currentValue.value = 0
      pickerListProject.value = []
      getPickerList()
    }, 300)
  }
}

const handleSwitchClick = (e: any) => {
  searchValue.value = ''
  currentValue.value = e?.index
  console.log(e, 'eee')
}

watch(
  () => currentValue.value,
  e => {
    handleTransfer(e)
  }
)

const handleTransfer = (idx: number) => {
  if (idx === 0) {
    getPickerList()
  }
  if (idx === 1) {
    handleGetBuilding(selectValueEd.value[0])
  }
  if (idx === 2) {
    handleGetUnit(selectValueEd.value[1])
  }
  if (idx === 3) {
    handleGetHouse(selectValueEd.value[2])
  }
}

const getPickerList = () => {
  getApiLoading(Apis.Asset.AssetHouses.SelectProject, {
    name: searchValue.value,
    ...formData.value
  }).then(res => {
    pickerListProject.value = res?.data
    pickerList.value = res?.data
    console.log(res)
  })
}

const onSelectMerchant = (i: { name: string; id: number }) => {
  //选择项目
  searchValue.value = ''
  currentValue.value = 1
  itemsList.value = [{ name: '小区' }, { name: '楼栋' }]
  selectValueEd.value[0] = i
  // selectEd.value = i
  // emit('change', i)
  // onPopupShow()
}

const handleGetBuilding = (data: any) => {
  getApiLoading(Apis.Asset.AssetHouses.SelectBuilding, {
    asset_projects_id: data?.id,
    name: searchValue.value,
    ...formData.value
  }).then(res => {
    pickerListBuilding.value = res?.data
    pickerList.value = res?.data
    console.log(res)
  })
}

const onSelectBuildingt = (i: { name: string; id: number }) => {
  //选择楼栋
  searchValue.value = ''
  currentValue.value = 2
  itemsList.value = [{ name: '小区' }, { name: '楼栋' }, { name: '单元' }]
  selectValueEd.value[1] = i
}

const handleGetUnit = (data: any) => {
  //获取单元
  getApiLoading(Apis.Asset.AssetHouses.SelectUnit, {
    asset_projects_id: selectValueEd.value[0]?.id,
    asset_buildings_id: data?.id,
    name: searchValue.value,
    ...formData.value
  }).then(res => {
    pickerListUnit.value = res?.data
    pickerList.value = res?.data
    console.log(res)
  })
}

const onSelectUnit = (i: { name: string; id: number }) => {
  searchValue.value = ''
  currentValue.value = 3
  itemsList.value = [{ name: '小区' }, { name: '楼栋' }, { name: '单元' }, { name: '房屋' }]
  selectValueEd.value[2] = i
}

const handleGetHouse = (data: any) => {
  //获取房屋
  getApiLoading(Apis.Asset.AssetHouses.SelectHouse, {
    asset_projects_id: selectValueEd.value[0]?.id,
    asset_buildings_id: selectValueEd.value[1]?.id,
    asset_units_id: data?.id,
    name: searchValue.value,
    ...formData.value
  }).then(res => {
    pickerListHouse.value = res?.data
    pickerList.value = res?.data
    console.log(res)
  })
}

const onSelectHouse = (i: { name: string; id: number }) => {
  searchValue.value = ''
  selectValueEd.value[3] = i
  showProjectName.value = selectValueEd?.value.map((res: any) => res?.name).join('')
  emit('change', selectValueEd.value)
  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: 15rpx 20rpx;
  margin: 20rpx 30rpx 0 30rpx;
  border-radius: 100rpx;
  border: 1rpx solid #eee;
}

.popup_tabs {}
</style>
