<template>
  <hs-popup :show="props?.show" @close="handleClose" mode="bottom" :closeable="true" :round="20">
    <view
      :class="
        props?.pageSource === 'archive_houses'
          ? 'popup_content archive_houses_content'
          : 'popup_content'
      "
    >
      <view class="popup_title"> 我的房屋 </view>
      <view v-if="dataList?.length" class="popup_list">
        <scroll-view scroll-y="true" class="scroll_view_style">
          <view
            class="popup_list_item"
            v-for="(i, index) in dataList"
            :key="index"
            @click="handleSelectedHouse(i)"
          >
            <view>
              <view class="label"> {{ i?.asset_house?.full_name }} </view>
              <view class="role">
                你的身份是：<hs-enum-tag
                  :value="i?.house_relation"
                  :Enums="HouseOccupantsHouseRelationEnum"
                />
              </view>
            </view>
            <uni-icons
              v-if="i?.asset_houses_id === auth?.data?.selected_house?.id"
              type="checkbox-filled"
              size="20"
              :color="getStyleColorValueInfo()"
            ></uni-icons>
            <uni-icons v-else type="circle" size="20" color="#999"></uni-icons>
          </view>
        </scroll-view>
      </view>
      <view class="add_bind_house" @click="hadnleNewBindingHouse">
        <up-icon name="plus-circle" size="25" color="#3D3D3D" /> <text>新增入户登记房屋</text>
      </view>
    </view>
  </hs-popup>
</template>

<script setup lang="ts">
const props = defineProps(['show', 'dataList', 'pageSource', 'defaultHouseId'])
const emit = defineEmits(['close', 'change'])
import { getStyleColorValueInfo } from '@/common/libraries/getPageConfig'
import getUserLogin from '@/common/libraries/userUserLogin'
import { ref, watch } from 'vue'
import { showToastBack, showToast } from '@/common/libraries/naviHelper'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { HouseOccupantsHouseRelationEnum } from '@/gen/Enums'
import { useWeAppAuthStore } from '@/common'
const dataList = ref<any>([])
const formData = ref({ page: 1 })
const metaData = ref({})
const auth = useWeAppAuthStore()

watch(
  () => props?.show,
  () => {
    if (props?.show) {
      formData.value.page = 1
      dataList.value = []
      getHouseList()
    }
  }
)

const handleClose = () => {
  emit('close')
}
const hadnleNewBindingHouse = () => {
  uni.navigateTo({
    url: auth?.data?.user ? '/INDEX/binding/index' : '/pages/login'
  })
}

const getHouseList = () => {
  if (!getUserLogin?.getLoginStatus()) return
  getApiLoading(Apis.Archive.HouseOccupants.List, formData?.value).then(res => {
    dataList.value = [...dataList.value, ...res?.data]
    metaData.value = res?.meta
    console.log(res)
  })
}

const handleSelectedHouse = (e: any) => {
  if (e?.asset_houses_id === auth?.data?.selected_house?.id) {
    showToast('已是该房屋！')
    return
  }
  getApiLoading(Apis.Archive.HouseOccupants.UpdateSelectedHouse, {
    asset_houses_id: e?.asset_houses_id
  }).then(res => {
    auth?.me(() => {
      emit('change', e)
    })
    console.log(res)
  })
}

// const handleSelectedHouse = (e: { asset_houses_id: string }) => {
//   emit('change', e)
// }
</script>

<style lang="scss" scoped>
.popup_content {
  background-color: #f8f8f8;
  // background:
  //   linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, rgba(255, 255, 255, 0) 56%),
  //   linear-gradient(159deg, #d3d7ff 0%, rgba(255, 255, 255, 0) 35%),
  //   linear-gradient(193deg, #dffff3 -4%, #f7f7f7 37%);
  min-height: 500rpx;
  // padding-bottom: 120rpx;
  padding-bottom: 130rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  .popup_title {
    padding: 0 30rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
  .popup_list {
    padding: 0 30rpx;
    .scroll_view_style {
      max-height: 700rpx;
    }
    .popup_list_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 20rpx;
      border-radius: 15rpx;
      margin-bottom: 30rpx;
      line-height: 50rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        color: #333;
        font-size: 28rpx;
      }
      .role {
        color: #666;
        font-size: 24rpx;
      }
    }
  }
  .add_bind_house {
    height: 140rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin: 30rpx;
    border-radius: 20rpx;
    border: 1px dashed #d3d3d3;
    background-color: #fff;
    color: #333;
    font-size: 28rpx;
    text {
      padding-left: 10rpx;
    }
  }
}
.archive_houses_content {
  padding-bottom: 30rpx;
}
</style>
