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

<template>
  <view class="floor-selector">
    <view
      class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
      @click="handleOpen"
    >
      <view class="selected-info">
        <view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedFloor }">
          {{ selectedFloor ? getFloorDisplayName(selectedFloor) : placeholderText }}
        </view>
      </view>
      <text class="tn-icon-right tn-color-gray"></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">{{ t('popupTitle') }}</text>
        </view>

        <scroll-view scroll-y class="floor-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">{{ t('loadingText') }}</view>
          </view>

          <view v-else-if="!floorList.length" class="empty-state tn-padding-xl tn-text-center">
            <text class="tn-color-gray">{{ t('emptyText') }}</text>
          </view>

          <view v-else class="floor-list">
            <view
              class="floor-item floor-item--clear"
              :class="{ 'is-active': !selectedFloor }"
              @click="handleClear"
            >
              <text class="floor-name">{{ t('clearSelection') }}</text>
              <text v-if="!selectedFloor" class="tn-icon-success-circle-fill floor-check"></text>
            </view>
            <view
              v-for="item in floorList"
              :key="item.value"
              class="floor-item"
              :class="{ 'is-active': selectedFloor && selectedFloor.value === item.value }"
              @click="handleSelect(item)"
            >
              <text class="floor-name">{{ getFloorDisplayName(item) }}</text>
              <text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-success-circle-fill floor-check"></text>
            </view>
          </view>
        </scroll-view>
      </view>
    </tn-popup>
  </view>
</template>

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

function pickFirstDefined(...values) {
  const matched = values.find(value => value !== undefined && value !== null && value !== '')
  return matched === undefined ? '' : matched
}

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

function resolveFloorList(response) {
  const payload = response && response.data !== undefined ? response.data : response

  if (Array.isArray(payload)) {
    const floorEnum = payload.find(item => item && item.code === 'FloorLevelEnum')
    if (floorEnum && Array.isArray(floorEnum.data)) {
      return floorEnum.data
    }
    return payload
  }

  if (payload && Array.isArray(payload.data)) {
    return payload.data
  }

  if (payload && payload.data && Array.isArray(payload.data.data)) {
    return payload.data.data
  }

  if (payload && Array.isArray(payload.items)) {
    return payload.items
  }

  if (payload && Array.isArray(payload.records)) {
    return payload.records
  }

  return []
}

function normalizeFloorItem(item = {}) {
  const code = normalizeFloorValue(pickFirstDefined(item.key, item.code, item.value))
  const name = normalizeFloorValue(pickFirstDefined(item.cname, item.nameZh, item.labelZh, item.name, item.value))
  const nameEn = normalizeFloorValue(pickFirstDefined(item.ename, item.nameEn, item.labelEn, item.descriptionEn, ''))
  return {
    value: code || name,
    code,
    name,
    nameEn,
    sort: Number(pickFirstDefined(item.sort, item.key, 0))
  }
}

export default {
  name: 'FloorSelector',
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      showPopup: false,
      isLoading: false,
      floorList: [],
      selectedFloor: null
    }
  },
  computed: {
    language() {
      return this.$getLanguage ? this.$getLanguage() : 'zh'
    },
    placeholderText() {
      return this.t('selectFloor')
    }
  },
  watch: {
    value() {
      this.syncSelection()
    },
    language() {
      this.loadData(true)
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    t(key, params) {
      return this.$tm('pkgService.submit_request.components.FloorSelector', key, params)
    },
    handleOpen() {
      this.showPopup = true
      this.loadData()
    },
    loadData(force = false) {
      if (!force && this.floorList.length) {
        this.syncSelection()
        return Promise.resolve()
      }

      this.isLoading = true
      return getEnums({}, this.language)
        .then((res) => {
          const rawList = resolveFloorList(res)
          this.floorList = rawList
            .map(item => normalizeFloorItem(item))
            .filter(item => item.value)
            .sort((a, b) => a.sort - b.sort || a.value.localeCompare(b.value))
          this.syncSelection()
        })
        .catch((error) => {
          console.error('load floor list error', error)
          this.floorList = []
          this.selectedFloor = null
          uni.showToast({
            title: this.t('loadFailed'),
            icon: 'none'
          })
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    syncSelection() {
      const currentValue = normalizeFloorValue(this.value)
      if (!currentValue || !this.floorList.length) {
        this.selectedFloor = null
        return
      }
      this.selectedFloor = this.floorList.find(item => item.value === currentValue) || null
    },
    handleSelect(item) {
      this.selectedFloor = item
      this.$emit('input', item.value)
      this.$emit('change', { floor: item })
      this.showPopup = false
    },
    handleClear() {
      this.selectedFloor = null
      this.$emit('input', '')
      this.$emit('change', { floor: null })
      this.showPopup = false
    },
    getFloorDisplayName(item = {}) {
      if (this.language === 'en') {
        return item.nameEn || item.name || item.code || ''
      }
      return item.name || item.nameEn || item.code || ''
    }
  }
}
</script>

<style scoped lang="scss">
.floor-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;
}

.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;
}

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

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

.floor-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);
  }
}

.floor-item--clear {
  border-style: dashed;
}

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

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