QSY-lvjuxcx/pkgService/submit_request/components/BuildingSelector.vue

<template>
  <view class="building-selector">
    <view
      class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
      :class="{ 'selector-header--disabled': !areaCode }"
      @click="handleOpen"
    >
      <view class="selected-info">
        <view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedBuilding }">
          {{ selectedBuilding ? getBuildingDisplayName(selectedBuilding) : placeholderText }}
        </view>
      </view>
      <text class="tn-icon-right" :class="areaCode ? 'tn-color-gray' : 'tn-color-disabled'"></text>
    </view>

    <tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ $tr('选择意向楼栋') }}</text>
        </view>

        <scroll-view scroll-y class="building-list-scroll">
          <view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
            <tn-loading mode="circle"></tn-loading>
            <view class="tn-margin-top-sm tn-color-gray">{{ $tr('楼栋加载中...') }}</view>
          </view>

          <view v-else-if="!buildingList.length" class="empty-state tn-padding-xl tn-text-center">
            <text class="tn-color-gray">{{ $tr('暂无可选楼栋') }}</text>
          </view>

          <view v-else class="building-list">
            <view
              v-for="item in buildingList"
              :key="item.code"
              class="building-item"
              :class="{ 'is-active': selectedBuilding && selectedBuilding.code === item.code }"
              @click="handleSelect(item)"
            >
              <text class="building-name">{{ getBuildingDisplayName(item) }}</text>
              <text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-success-circle-fill building-check"></text>
            </view>
          </view>
        </scroll-view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import { buildingPagination } from '@/api/index.js'

function normalizeText(value) {
  if (value === undefined || value === null) {
    return ''
  }
  return String(value).trim()
}

function normalizeBuildingItem(item = {}) {
  return {
    areaCode: normalizeText(item.areaCode),
    code: normalizeText(item.code),
    name: normalizeText(item.name),
    nameEn: normalizeText(item.nameEn),
    sort: Number(item.sort || 0),
    buildingSections: Array.isArray(item.buildingSections) ? item.buildingSections : []
  }
}

export default {
  name: 'BuildingSelector',
  props: {
    value: {
      type: String,
      default: ''
    },
    areaCode: {
      type: String,
      default: ''
    },
    roomTypeCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPopup: false,
      isLoading: false,
      buildingList: [],
      selectedBuilding: null
    }
  },
  computed: {
    language() {
      return this.$getLanguage ? this.$getLanguage() : 'zh'
    },
    placeholderText() {
      return this.areaCode ? this.$tr('请选择楼栋') : this.$tr('请先选择区域')
    }
  },
  watch: {
    value() {
      this.syncSelection()
    },
    language() {
      this.loadData(true)
    },
    areaCode() {
      this.handleAreaChange()
    },
    roomTypeCode(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.handleRoomTypeChange()
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleOpen() {
      if (!this.areaCode) {
        uni.showToast({
          title: this.$tr('请先选择区域'),
          icon: 'none'
        })
        return
      }
      this.showPopup = true
      this.loadData()
    },
    handleAreaChange() {
      this.buildingList = []
      this.selectedBuilding = null
      if (this.value) {
        this.$emit('input', '')
        this.$emit('change', { building: null })
      }
      if (!this.areaCode) {
        return
      }
      this.loadData(true)
    },
    handleRoomTypeChange() {
      this.buildingList = []
      this.selectedBuilding = null
      if (this.value) {
        this.$emit('input', '')
        this.$emit('change', { building: null })
      }
      if (!this.areaCode) {
        return
      }
      this.loadData(true)
    },
    loadData(force = false) {
      if (!this.areaCode) {
        return Promise.resolve()
      }
      if (!force && this.buildingList.length) {
        this.syncSelection()
        return Promise.resolve()
      }

      this.isLoading = true
      return buildingPagination({
        AreaCode: this.areaCode,
        PageIndex: 1,
        PageSize: 100
      }, this.language)
        .then((res) => {
          const payload = res && res.data ? res.data : res
          const rawList = Array.isArray(payload && payload.data)
            ? payload.data
            : (Array.isArray(payload) ? payload : [])
          this.buildingList = rawList
            .map(item => normalizeBuildingItem(item))
            .filter(item => item.code)
            .sort((a, b) => a.sort - b.sort || a.code.localeCompare(b.code))
          this.syncSelection()
        })
        .catch((error) => {
          console.error('load building list error', error)
          this.buildingList = []
          this.selectedBuilding = null
          uni.showToast({
            title: this.$tr('楼栋列表加载失败'),
            icon: 'none'
          })
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    syncSelection() {
      if (!this.value || !this.buildingList.length) {
        this.selectedBuilding = null
        return
      }
      this.selectedBuilding = this.buildingList.find(item => item.code === this.value) || null
    },
    handleSelect(item) {
      this.selectedBuilding = item
      this.$emit('input', item.code)
      this.$emit('change', { building: item })
      this.showPopup = false
    },
    getBuildingDisplayName(item = {}) {
      if (this.language === 'en') {
        return item.nameEn || item.name || item.code || ''
      }
      return item.name || item.nameEn || item.code || ''
    }
  }
}
</script>

<style scoped lang="scss">
.building-selector {
  width: 100%;
}

.selector-header {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 26rpx 32rpx;
  border: 1rpx solid rgba($brand-primary, 0.15);
  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
  min-height: 100rpx;
}

.selector-header--disabled {
  opacity: 0.72;
}

.selected-info {
  flex: 1;
  overflow: hidden;
}

.selected-name {
  font-size: 28rpx;
  color: #1A2233;
  font-weight: 600;

  &.is-empty {
    color: #A0B0C0;
    font-weight: normal;
  }
}

.popup-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F8FAFF;
}

.popup-header {
  padding: 40rpx 30rpx 20rpx;
  text-align: center;
  border-bottom: 1px dashed rgba($brand-primary, 0.15);
  background: #FFFFFF;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1A2233;
}

.building-list-scroll {
  flex: 1;
  height: 0;
  padding: 20rpx 30rpx 60rpx;
}

.building-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.building-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 28rpx 30rpx;
  border: 1rpx solid rgba($brand-primary, 0.12);
  transition: all 0.2s ease;

  &.is-active {
    border-color: rgba($brand-primary, 0.5);
    box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.08);
  }
}

.building-name {
  font-size: 28rpx;
  color: #1A2233;
}

.building-check {
  color: $brand-primary;
  font-size: 30rpx;
}
</style>