<template>
  <view>
    <!-- 地址选择弹窗 -->
    <nut-popup
      :visible="visible"
      position="bottom"
      :style="{ height: '100%' }"
      close-icon-position="top-right"
      @close="closeModal"
    >
      <view class="address-modal">
        <view class="address-modal-header">
          <text class="address-modal-title">选择地址</text>
        </view>

        <view class="address-modal-content">
          <!-- 省市县选择 -->
          <view class="address-section">
            <text class="address-section-title">选择省市县</text>
            <view
              class="area-selector"
              @click="showAreaPicker = true"
            >
              <text class="area-text" :class="{ 'area-selected': selectedAreaText }">
                {{ selectedAreaText || '请选择省市县' }}
              </text>
              <ArrowRight color="#9ca3af" size="12" />
            </view>
          </view>

          <!-- 详细地址输入 -->
          <view class="address-section">
            <text class="address-section-title">详细地址</text>
            <nut-textarea
              v-model="detailAddress"
              placeholder="请输入详细地址（街道、门牌号等）"
              rows="3"
              class="detail-address-input"
            />
          </view>
        </view>

        <view class="address-modal-footer">
          <nut-button
            type="primary"
            color="orange"
            block
            @click="confirmAddress"
            :disabled="!selectedAreaText || !detailAddress.trim()"
          >
            确定
          </nut-button>
        </view>
      </view>
    </nut-popup>
    
    <!-- 省市县级联选择器 - 放在popup外面避免层级冲突 -->
    <nut-cascader
      v-model="selectedAreaCodes"
      v-model:visible="showAreaPicker"
      :options="areaData"
      @change="onAreaChange"
      @path-change="onAreaPathChange"
      title="请选择省市县"
    />
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { RectRight, ArrowRight } from '@nutui/icons-vue-taro'
import { regionData } from 'element-china-area-data'

/**
 * 转换地区数据格式以适配NutUI Cascader组件
 * @param {Array} data - element-china-area-data的原始数据
 * @returns {Array} - 转换后的数据格式
 */
const transformAreaData = (data) => {
  return data.map(item => ({
    value: item.value,
    text: item.label,
    children: item.children ? transformAreaData(item.children) : undefined
  }))
}

/**
 * 组件属性定义
 */
const props = defineProps({
  // 当前选中的地址信息
  modelValue: {
    type: Object,
    default: () => ({
      province: '',
      city: '',
      county: '',
      detail_address: '',
      full_address: ''
    })
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '请选择省市县并填写详细地址'
  },
  // 控制弹窗显示状态
  visible: {
    type: Boolean,
    default: false
  }
})

/**
 * 组件事件定义
 */
const emit = defineEmits(['update:modelValue', 'change', 'update:visible'])

/**
 * 地址选择相关状态
 */
const showAreaPicker = ref(false)
const selectedAreaCodes = ref([])
const selectedAreaText = ref('')
const detailAddress = ref('')
const areaData = ref(transformAreaData(regionData))

/**
 * 计算完整地址
 */
const fullAddress = computed(() => {
  if (selectedAreaText.value && detailAddress.value.trim()) {
    return `${selectedAreaText.value} ${detailAddress.value.trim()}`
  }
  return ''
})

/**
 * 初始化地址数据
 * @param {Object} addressData - 地址数据对象
 */
const initAddressData = (addressData) => {
  if (addressData.province && addressData.city && addressData.county) {
    selectedAreaText.value = `${addressData.province}${addressData.city}${addressData.county}`
    detailAddress.value = addressData.detail_address || ''
  } else {
    selectedAreaText.value = ''
    detailAddress.value = ''
  }
}

/**
 * 监听props变化，初始化组件数据
 */
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    initAddressData(newValue)
  }
}, { immediate: true, deep: true })

/**
 * 地区选择变化回调（选中值改变时触发）
 * @param {Array} value - 选中的值数组
 * @param {Array} pathNodes - 选中的路径节点数组
 */
const onAreaChange = (value, pathNodes) => {
  if (pathNodes && Array.isArray(pathNodes) && pathNodes.length === 3) {
    selectedAreaCodes.value = value
    selectedAreaText.value = pathNodes
      .filter(node => node && node.text)
      .map(node => node.text)
      .join('')
    // 选择完三级地址后自动关闭选择器
    showAreaPicker.value = false
  }
}

/**
 * 地区路径选择变化回调（选中项改变时触发）
 * @param {Array} pathNodes - 选中的路径节点数组
 */
const onAreaPathChange = (pathNodes) => {
  if (pathNodes && Array.isArray(pathNodes)) {
    selectedAreaText.value = pathNodes
      .filter(node => node && node.text)
      .map(node => node.text)
      .join('')
  }
}



/**
 * 关闭地址选择弹窗
 */
const closeModal = () => {
  emit('update:visible', false)
}

/**
 * 确认地址选择
 */
const confirmAddress = () => {
  if (selectedAreaText.value && detailAddress.value.trim()) {
    const codes = selectedAreaCodes.value
    const addressData = {
      province: getProvinceFromText(selectedAreaText.value),
      city: getCityFromText(selectedAreaText.value),
      county: getCountyFromText(selectedAreaText.value),
      province_code: codes[0] || '',
      city_code: codes[1] || '',
      county_code: codes[2] || '',
      detail_address: detailAddress.value.trim(),
      full_address: fullAddress.value
    }

    // 触发更新事件
    emit('update:modelValue', addressData)
    emit('change', addressData)

    // 关闭弹窗
    emit('update:visible', false)
  }
}

/**
 * 从选中文本中提取省份
 * @param {String} text - 选中的地区文本
 * @returns {String} - 省份名称
 */
const getProvinceFromText = (text) => {
  // 这里可以根据实际需要实现更精确的解析逻辑
  // 暂时使用简单的方式
  const codes = selectedAreaCodes.value
  if (codes.length >= 1) {
    const provinceNode = findNodeByCode(areaData.value, codes[0])
    return provinceNode ? provinceNode.text : ''
  }
  return ''
}

/**
 * 从选中文本中提取城市
 * @param {String} text - 选中的地区文本
 * @returns {String} - 城市名称
 */
const getCityFromText = (text) => {
  const codes = selectedAreaCodes.value
  if (codes.length >= 2) {
    const provinceNode = findNodeByCode(areaData.value, codes[0])
    if (provinceNode && provinceNode.children) {
      const cityNode = findNodeByCode(provinceNode.children, codes[1])
      return cityNode ? cityNode.text : ''
    }
  }
  return ''
}

/**
 * 从选中文本中提取县区
 * @param {String} text - 选中的地区文本
 * @returns {String} - 县区名称
 */
const getCountyFromText = (text) => {
  const codes = selectedAreaCodes.value
  if (codes.length >= 3) {
    const provinceNode = findNodeByCode(areaData.value, codes[0])
    if (provinceNode && provinceNode.children) {
      const cityNode = findNodeByCode(provinceNode.children, codes[1])
      if (cityNode && cityNode.children) {
        const countyNode = findNodeByCode(cityNode.children, codes[2])
        return countyNode ? countyNode.text : ''
      }
    }
  }
  return ''
}

/**
 * 根据编码查找节点
 * @param {Array} nodes - 节点数组
 * @param {String} code - 编码
 * @returns {Object|null} - 找到的节点或null
 */
const findNodeByCode = (nodes, code) => {
  return nodes.find(node => node.value === code) || null
}
</script>

<style lang="less">
// 地址选择器样式
.address-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  border: 1px solid #e5e7eb;
  border-radius: 24rpx;
  background-color: white;
  min-height: 96rpx;
  transition: all 0.2s ease;

  &:active {
    background-color: #f9fafb;
  }

  .address-text {
    font-size: 28rpx;
    color: #9ca3af;
    flex: 1;
    line-height: 1.6;
    word-break: break-all;

    &.address-selected {
      color: #111827;
    }
  }
}

// 地址选择弹窗样式
.address-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;

  .address-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    border-bottom: 1px solid #f3f4f6;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 10;

    .address-modal-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #111827;
    }
  }

  .address-modal-content {
    flex: 1;
    padding: 32rpx;
    padding-bottom: 120rpx; // 为底部固定按钮预留空间
    overflow-y: auto;

    .address-section {
      margin-bottom: 48rpx;

      .address-section-title {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        color: #374151;
        margin-bottom: 24rpx;
      }

      .area-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        border: 1px solid #e5e7eb;
        border-radius: 24rpx;
        background-color: white;
        transition: all 0.2s ease;

        &:active {
          background-color: #f9fafb;
        }

        .area-text {
          font-size: 28rpx;
          color: #9ca3af;
          flex: 1;
          line-height: 1.6;
          word-break: break-all;

          &.area-selected {
            color: #111827;
          }
        }
      }

      .detail-address-input {
        width: 100%;

        :deep(.nut-textarea) {
          border: 1px solid #e5e7eb;
          border-radius: 24rpx;

          .nut-textarea__textarea {
            padding: 24rpx 32rpx;
            font-size: 28rpx;
            line-height: 1.6;
            min-height: 160rpx;
          }
        }
      }
    }
  }

  .address-modal-footer {
    padding: 32rpx;
    border-top: 1px solid #f3f4f6;
    background-color: white;
    position: sticky;
    bottom: 0;
    z-index: 10;

    :deep(.nut-button) {
      border-radius: 24rpx;
      font-weight: 500;
      height: 88rpx;
    }
  }
}
</style>