<template>
  <view>
    <!-- 品牌选择弹框 -->
    <nut-popup v-model:visible="brandPickerVisible" position="bottom" :style="{ height: '80%' }">
      <view class="brand-model-picker">
        <view id="picker-header" class="picker-header">
          <text class="picker-title">选择品牌型号</text>
          <nut-button size="small" type="primary" @click="closePicker">关闭</nut-button>
        </view>
        <view id="search-container" class="search-container">
          <nut-searchbar
            v-model="searchKeyword"
            placeholder="搜索品牌名称"
            shape="round"
            background="transparent"
            class="search-bar"
          />
        </view>
        <view class="brand-container">
          <scroll-view
            class="brand-content"
            :scroll-y="true"
            :style="{ height: contentHeight + 'rpx' }"
            :catch-move="true"
            ref="brandContentRef"
          >
            <view class="brand-list">
              <view
                v-for="brand in filteredBrands"
                :key="brand.value"
                class="brand-item"
                @click="selectBrand(brand)"
              >
                <view class="brand-info">
                  <view class="brand-icon">
                    <text class="brand-initial">{{ brand.text.charAt(0) }}</text>
                  </view>
                  <text class="brand-name">{{ brand.text }}</text>
                </view>
                <Right class="brand-arrow" />
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </nut-popup>

    <!-- 型号选择弹框 -->
    <nut-popup v-model:visible="modelPickerVisible" position="bottom" :style="{ height: '50%' }">
      <view class="model-picker">
        <view class="picker-header">
          <nut-button size="small" @click="goBackToBrandPicker">返回</nut-button>
          <text class="picker-title">选择{{ selectedBrandName }}型号</text>
          <nut-button size="small" type="primary" @click="closePicker">关闭</nut-button>
        </view>
        <view class="model-list">
          <view
            v-for="model in currentBrandModels"
            :key="model.value"
            class="model-item"
            @click="selectModel(model)"
          >
            <text class="model-name">{{ model.text }}</text>
          </view>
          <!-- 自定义型号选项 -->
          <view
            class="model-item"
            @click="showCustomModelInput"
          >
            <text class="model-name">自定义型号</text>
            <Right />
          </view>
        </view>
      </view>
    </nut-popup>

    <!-- 自定义输入弹框 -->
    <nut-popup v-model:visible="customInputVisible" position="bottom" :style="{ height: '60%' }">
      <view class="custom-input-picker">
        <view class="picker-header">
          <nut-button size="small" @click="goBackToBrandPicker">返回</nut-button>
          <text class="picker-title">自定义品牌型号</text>
          <nut-button size="small" type="primary" @click="closePicker">关闭</nut-button>
        </view>
        <view class="custom-input-content">
          <view class="input-group">
            <text class="input-label">品牌名称</text>
            <nut-input
              v-model="customBrand"
              placeholder="请输入品牌名称"
              class="custom-input"
              :cursorSpacing="50"
            />
          </view>
          <view class="input-group">
            <text class="input-label">型号名称</text>
            <nut-input
              v-model="customModel"
              placeholder="请输入型号名称"
              class="custom-input"
              :cursorSpacing="50"
            />
          </view>
          <view class="button-group">
            <nut-button
              type="primary"
              size="large"
              color="orange"
              @click="confirmCustomInput"
              :disabled="!customBrand.trim() || !customModel.trim()"
              class="confirm-button"
            >
              确认
            </nut-button>
          </view>
        </view>
      </view>
    </nut-popup>

    <!-- 自定义型号输入弹框 -->
    <nut-popup v-model:visible="customModelInputVisible" position="bottom" :style="{ height: '50%' }">
      <view class="custom-model-input-picker">
        <view class="picker-header">
          <nut-button size="small" @click="goBackToModelPicker">返回</nut-button>
          <text class="picker-title">自定义{{ selectedBrandName }}型号</text>
          <nut-button size="small" type="primary" @click="closePicker">关闭</nut-button>
        </view>
        <view class="custom-input-content">
          <view class="input-group">
            <text class="input-label">型号名称</text>
            <nut-input
              v-model="customModelOnly"
              placeholder="请输入型号名称"
              class="custom-input"
              :cursorSpacing="50"
            />
          </view>
          <view class="button-group">
            <nut-button
              type="primary"
              size="large"
              color="orange"
              @click="confirmCustomModelInput"
              :disabled="!customModelOnly.trim()"
              class="confirm-button"
            >
              确认
            </nut-button>
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Right } from '@nutui/icons-vue-taro'
import { $ } from '@tarojs/extend'

// 定义props
const props = defineProps({
  brandOptions: {
    type: Array,
    default: () => []
  }
})

// 定义事件
const emit = defineEmits(['confirm', 'cancel'])

// 响应式数据
const brandPickerVisible = ref(false)
const modelPickerVisible = ref(false)
const customInputVisible = ref(false)
const customModelInputVisible = ref(false)
const selectedBrandName = ref('')
const currentBrandModels = ref([])
const contentHeight = ref(800) // 默认高度 rpx
const searchKeyword = ref('') // 搜索关键词
const customBrand = ref('') // 自定义品牌
const customModel = ref('') // 自定义型号
const customModelOnly = ref('') // 只自定义型号

// 使用父组件传入的品牌数据，并添加"其他"选项
const allBrands = computed(() => {
  const brands = [...props.brandOptions]
  // 添加"其他"选项
  brands.push({ text: '其他', value: 'other' })
  return brands
})

// 根据API数据构建品牌型号映射
const brandModelMap = computed(() => {
  const map = {}
  props.brandOptions.forEach(brand => {
    if (brand.models && brand.models.length > 0) {
      map[brand.value] = brand.models.map(model => ({
        text: model.name,
        value: model.id
      }))
    }
  })
  return map
})

// 过滤后的品牌列表
const filteredBrands = computed(() => {
  if (!searchKeyword.value.trim()) {
    return allBrands.value
  }
  return allBrands.value.filter(brand =>
    brand.text.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 计算内容高度
const calculateContentHeight = async () => {
  try {
    // 获取窗口信息
    const windowInfo = Taro.getWindowInfo()
    const windowHeight = windowInfo.windowHeight

    // 使用 setTimeout 确保 DOM 元素已渲染
    setTimeout(async () => {
      try {
        // 获取弹框头部高度
        const headerHeight = await $('.picker-header').height() || 120
        // 获取搜索框高度
        const searchHeight = await $('.search-container').height() || 100

        // 计算可用高度：窗口高度的80% - 头部高度 - 搜索框高度 - 额外边距
        const availableHeight = windowHeight * 0.8 - headerHeight - searchHeight - 40

        // 转换为 rpx 单位 (假设设计稿宽度为750rpx)
        const factor = 750 / windowInfo.windowWidth
        contentHeight.value = Math.max(availableHeight * factor, 600) // 最小高度600rpx
      } catch (error) {
        console.warn('计算高度时出错，使用默认值:', error)
        // 降级方案：使用相对安全的默认值
        contentHeight.value = windowHeight * 0.5 * (750 / windowInfo.windowWidth)
      }
    }, 100)
  } catch (error) {
    console.warn('获取窗口信息失败，使用固定高度:', error)
    // 完全降级方案：使用固定值
    contentHeight.value = 800
  }
}

// 显示品牌选择器
const show = () => {
  calculateContentHeight() // 计算内容高度
  searchKeyword.value = '' // 清空搜索关键词
  brandPickerVisible.value = true
}

// 选择品牌
const selectBrand = (brand) => {
  if (brand.value === 'other') {
    // 选择其他，显示自定义输入弹窗
    brandPickerVisible.value = false
    customInputVisible.value = true
    // 清空之前的自定义输入
    customBrand.value = ''
    customModel.value = ''
  } else {
    selectedBrandName.value = brand.text
    currentBrandModels.value = brandModelMap.value[brand.value] || []
    brandPickerVisible.value = false
    modelPickerVisible.value = true
  }
}

// 选择型号
const selectModel = (model) => {
  // 找到对应的品牌ID
  const selectedBrand = props.brandOptions.find(brand => brand.text === selectedBrandName.value)

  const result = {
    brand: selectedBrandName.value,
    model: model.text,
    brandValue: selectedBrand ? selectedBrand.value : selectedBrandName.value,
    modelValue: model.value
  }

  // 发送确认事件
  emit('confirm', result)

  // 关闭所有弹框
  closeAllPickers()
}

/**
 * 确认自定义输入
 */
const confirmCustomInput = () => {
  if (!customBrand.value.trim() || !customModel.value.trim()) {
    return
  }

  const result = {
    brand: customBrand.value.trim(),
    model: customModel.value.trim(),
    brandValue: customBrand.value.trim(),
    modelValue: customModel.value.trim()
  }

  // 发送确认事件
  emit('confirm', result)

  // 关闭所有弹框
  closeAllPickers()
}

/**
 * 显示自定义型号输入弹窗
 */
const showCustomModelInput = () => {
  modelPickerVisible.value = false
  customModelInputVisible.value = true
  customModelOnly.value = '' // 清空之前的输入
}

/**
 * 确认自定义型号输入
 */
const confirmCustomModelInput = () => {
  if (!customModelOnly.value.trim()) {
    return
  }

  // 找到对应的品牌ID
  const selectedBrand = props.brandOptions.find(brand => brand.text === selectedBrandName.value)

  const result = {
    brand: selectedBrandName.value,
    model: customModelOnly.value.trim(),
    brandValue: selectedBrand ? selectedBrand.value : selectedBrandName.value,
    modelValue: customModelOnly.value.trim()
  }

  // 发送确认事件
  emit('confirm', result)

  // 关闭所有弹框
  closeAllPickers()
}

/**
 * 返回型号选择器
 */
const goBackToModelPicker = () => {
  customModelInputVisible.value = false
  modelPickerVisible.value = true
}

// 返回品牌选择
const goBackToBrandPicker = () => {
  modelPickerVisible.value = false
  customInputVisible.value = false
  brandPickerVisible.value = true
}

// 关闭选择器
const closePicker = () => {
  closeAllPickers()
  emit('cancel')
}

// 关闭所有弹框
const closeAllPickers = () => {
  brandPickerVisible.value = false
  modelPickerVisible.value = false
  customInputVisible.value = false
  customModelInputVisible.value = false
  selectedBrandName.value = ''
  currentBrandModels.value = []
  customBrand.value = ''
  customModel.value = ''
  customModelOnly.value = ''
}

// 组件挂载时初始化
onMounted(() => {
  // 初始化高度计算
  calculateContentHeight()
})

// 暴露方法给父组件
defineExpose({
  show,
  close: closeAllPickers
})
</script>

<style lang="less">
.brand-model-picker {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 20rpx;

    .picker-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .search-container {
    padding: 0 0 24rpx 0;
    margin-bottom: 20rpx;

    .search-bar {
      // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 20rpx;
      padding: 4rpx;
      // box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.15);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.25);
        transform: translateY(-2rpx);
      }

      :deep(.nut-searchbar__search-input) {
        background-color: white;
        border-radius: 16rpx;
        border: none;
        padding: 24rpx 20rpx;
        font-size: 28rpx;
        color: #333;
        transition: all 0.3s ease;

        &::placeholder {
          color: #999;
          font-weight: 400;
        }

        &:focus {
          background-color: #fafbfc;
          box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
        }
      }

      :deep(.nut-searchbar__search-icon) {
        color: #666;
        width: 32rpx;
        height: 32rpx;
      }

      :deep(.nut-searchbar__input-clear) {
        color: #ccc;

        &:hover {
          color: #999;
        }
      }
    }
  }

  .brand-container {
    flex: 1;
    height: 100%;

    .brand-content {
      background-color: #f8f9fa;

      .brand-list {
        padding: 20rpx;
        padding-bottom: 60rpx; /* 增加底部内边距，确保最后一个项目完全可见 */

        .brand-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 24rpx 30rpx;
          margin-bottom: 16rpx;
          background-color: white;
          border-radius: 16rpx;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          }

          &:last-child {
            margin-bottom: 0;
          }

          .brand-info {
            display: flex;
            align-items: center;

            .brand-icon {
              width: 80rpx;
              height: 80rpx;
              border-radius: 40rpx;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 24rpx;

              .brand-initial {
                font-size: 32rpx;
                color: white;
                font-weight: bold;
              }
            }

            .brand-name {
              font-size: 32rpx;
              color: #333;
              font-weight: 500;
            }
          }

          .brand-arrow {
            width: 32rpx;
            height: 32rpx;
            color: #ccc;
          }
        }
      }
    }
  }
}

.model-picker {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 20rpx;

    .picker-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .model-list {
    flex: 1;
    overflow-y: auto;

    .model-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 20rpx;
      border-bottom: 1rpx solid #f8f8f8;
      transition: background-color 0.2s;

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

      .model-name {
        font-size: 30rpx;
        color: #333;
      }


    }
  }
}

/* 自定义输入弹窗样式 */
.custom-input-picker {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 20rpx;

    .picker-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .custom-input-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .input-group {
      margin-bottom: 40rpx;

      .input-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }

      .custom-input {
        width: 100%;
        height: 80rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background: #fff;

        &:focus {
          border-color: #1890ff;
        }
      }
    }

    .button-group {
      margin-top: auto;
      padding-top: 40rpx;

      .confirm-button {
        width: 100%;
        height: 80rpx;
        border-radius: 8rpx;
      }
    }
  }
}

/* 自定义型号输入弹窗样式 */
.custom-model-input-picker {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 20rpx;

    .picker-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .custom-input-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .input-group {
      margin-bottom: 40rpx;

      .input-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }

      .custom-input {
        width: 100%;
        height: 80rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background: #fff;

        &:focus {
          border-color: #1890ff;
        }
      }
    }

    .button-group {
      margin-top: auto;
      padding-top: 40rpx;

      .confirm-button {
        width: 100%;
        height: 80rpx;
        border-radius: 8rpx;
      }
    }
  }
}
</style>