<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-18 16:34:15
 * @FilePath: /jgdl/src/pages/myCar/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="my-car-page">
    <!-- 车辆列表 -->
    <view class="flex-1">
      <!-- 滚动列表 -->
      <scroll-view
        :style="scrollStyle"
        :scroll-y="true"
        @scrolltolower="loadMore"
        @scroll="scroll"
        :lower-threshold="50"
        :enable-flex="false"
      >
        <!-- 空状态 -->
        <view v-if="!loading && carList.length === 0" class="empty-state">
          <!-- <image src="/static/images/empty-car.png" class="empty-image" mode="aspectFit" /> -->
          <text class="empty-text">暂无车源信息</text>
          <!-- <nut-button color="#f97316" @click="goToSell">发布车源</nut-button> -->
        </view>

        <!-- 车辆列表 -->
        <view v-else class="space-y-4">
          <view
            v-for="car in carList"
            :key="car.id"
            @tap="() => goToCarDetail(car.id)"
            style="border-bottom: 1px solid #e5e7eb"
          >
            <view class="flex p-4">
              <view class="w-24 h-24 relative">
                <image
                  :src="car.front_photo"
                  mode="aspectFill"
                  class="w-full h-full object-cover rounded-lg"
                />
              </view>
              <view class="flex-1 ml-4">
                <text class="font-medium text-base block"><text v-if="car.manufacture_year">{{ car.manufacture_year }}款</text> <text v-if="car.brand">{{ car.brand }}</text> <text v-if="car.model">{{ car.model }}</text></text>
                <!-- 状态标识 -->
                <view class="status-badges">
                  <!-- <view v-if="car.verification_status" class="status-badge" :class="getVerificationStatusClass(car.verification_status)">
                    <text>{{ verifyStatus[car.verification_status] }}</text>
                  </view> -->
                  <!-- 审核状态为3时显示上架/下架状态，否则显示审核状态 -->
                  <view v-if="car.review_status === 3 && car.status === 5" class="status-badge offline">
                    <text>{{ carStatus[car.status] }}</text>
                  </view>
                  <view v-else-if="car.review_status && car.review_status !== 3" class="status-badge review">
                    <text>{{ reviewStatus[car.review_status] }}</text>
                  </view>
                </view>
                <text class="text-sm text-gray-500 mt-1 block"><text v-if="car.range_km">续航{{ car.range_km }}km</text>  <text v-if="car.max_speed_kmh">最高时速{{ car.max_speed_kmh }}km/h</text></text>
                <!-- 审核原因 -->
                <view v-if="car.review_reason" class="verification-reason mt-1">
                  <nut-config-provider :theme-vars="themeVars">
                    <nut-ellipsis :content="'审核结果: ' + car.review_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
                  </nut-config-provider>
                </view>
                <view class="mt-2 flex justify-between items-center">
                  <view>
                    <text v-if="car.price" class="text-orange-500 font-bold" style="font-size: 1.2rem;" :class="{ 'sold-price': car.is_sold }">
                      ¥{{ car.price.toLocaleString() }}
                    </text>
                    <text v-if="car.is_sold" class="sold-label ml-2" style="color: red; font-size: 26rpx;">已售出</text>
                    <text v-if="car.market_price && !car.is_sold" class="text-gray-400 text-xs line-through ml-2">
                      ¥{{ car.market_price.toLocaleString() }}
                    </text>
                  </view>
                </view>
                <!-- 操作按钮 只能修改未卖出的车 -->
                <view v-if="!car.is_sold" class="action-buttons mt-4">
                  <nut-button
                    @click.stop="editCar(car.id)"
                    size="small"
                    type="default"
                    class="px-3 py-1 rounded-full text-sm mr-2"
                  >
                    编辑
                  </nut-button>
                  <!-- 只有审核状态为3时才显示上架/下架按钮 -->
                  <nut-button
                    v-if="car.review_status === 3"
                    @click.stop="toggleOffline(car)"
                    size="small"
                    :type="car.status === 5 ? 'success' : 'warning'"
                    class="px-3 py-1 rounded-full text-sm mr-2"
                  >
                    {{ car.status === 5 ? '上架' : '下架' }}
                  </nut-button>
                  <nut-button
                    v-if="car.review_status === 5"
                    @click.stop="toggleOnline(car)"
                    size="small"
                    type="success"
                    class="px-3 py-1 rounded-full text-sm mr-2"
                  >
                    上架
                  </nut-button>
                  <!-- <nut-button
                    v-if="car.verification_status === 1 || car.verification_status === 7 || car.verification_status === 2"
                    @click.stop="authCar(car.id)"
                    size="small"
                    type="primary"
                    color="orange"
                    class="px-3 py-1 rounded-full text-sm"
                  >
                    认证
                  </nut-button> -->
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- Loading indicator -->
        <view v-if="loading" class="loading-container py-4 text-center">
          <text class="loading-text text-gray-500">加载中...</text>
        </view>

        <!-- 没有更多数据 -->
        <view v-if="!hasMore && carList.length > 0" class="no-more-container py-4 text-center">
          <text class="text-gray-400 text-sm no-more-text">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>

    <!-- 下架确认弹窗 -->
    <nut-dialog
      v-model:visible="offlineDialogVisible"
      title="温馨提示"
      @ok="confirmOffline"
      @cancel="cancelOffline"
    >
      <template #default>
        <view>
          <text style="font-size: 1rem;">{{ offlineDialogContent }}</text>
        </view>
      </template>
      <template #footer>
        <view class="flex gap-4 p-4">
          <nut-button plain class="flex-1" size="small" @click="cancelOffline">
            取消
          </nut-button>
          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="confirmOffline">
            确认
          </nut-button>
        </view>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import './index.less'
// 导入接口
import { getMyListingVehicleAPI, changeVehicleStatusAPI } from '@/api/car';

const themeVars = {
  ellipsisExpandCollapseColor: '#f97316'
}

// 认证状态映射
const verifyStatus = ref({
  1: '未认证',
  2: '认证待付款',
  3: '认证待审核',
  5: '已认证',
  7: '认证失败'
})

// 上架状态映射
const carStatus = ref({
  3: '已上架',
  5: '已下架',
})

// 审核状态映射
const reviewStatus = ref({
  1: '待审核',
  3: '审核成功',
  5: '审核失败'
})

/**
 * 获取认证状态样式类
 * @param {number} status - 认证状态 (1=未认证, 3=认证待审核, 5=已认证, 7=认证失败)
 */
const getVerificationStatusClass = (status) => {
  const classMap = {
    1: 'unverified',
    3: 'review',
    5: 'verified',
    7: 'failed'
  }
  return classMap[status] || 'unverified'
}

/**
 * 滚动样式 - 考虑header和TabBar的高度
 */
const scrollStyle = computed(() => {
  return {
    height: 'calc(92vh)' // 减去header和TabBar的高度
  }
})



// 页面状态
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(0)
const pageSize = ref(10)

// 车辆列表数据
const carList = ref([])

// 下架确认弹窗
const offlineDialogVisible = ref(false)
const offlineDialogContent = ref('')
const currentOfflineCar = ref(null)



/**
 * 跳转到发布车源页面
 */
// const goToSell = () => {
//   Taro.navigateTo({
//     url: '/pages/sell/index'
//   })
// }

/**
 * 编辑车源
 */
const editCar = (carId) => {
  Taro.navigateTo({
    url: `/pages/sell/index?id=${carId}&mode=edit&type=myCar`
  })
}

/**
 * 认证车源
 */
const authCar = (carId) => {
  Taro.navigateTo({
    url: `/pages/setAuthCar/index?id=${carId}&mode=edit`
  })
}

/**
 * 切换上下架状态
 */
const toggleOffline = (car) => {
  currentOfflineCar.value = car
  offlineDialogContent.value = car.status === 5 ? '确认要上架此车源吗？' : '确认要下架此车源吗？'
  offlineDialogVisible.value = true
}

// 上架
const toggleOnline = (car) => {
  currentOfflineCar.value = car
  offlineDialogContent.value = '确认要上架此车源吗？'
  offlineDialogVisible.value = true
}

/**
 * 确认上下架操作
 */
const confirmOffline = async () => {
  if (currentOfflineCar.value) {
    const car = currentOfflineCar.value
    let status = car.status
    if (car.status === 3) {
      car.status = 5
      status = 5
    } else {
      status = 3
    }

    // 调用API更新车源状态
    const { code, msg, data } = await changeVehicleStatusAPI({ id: car.id, status: status })
    if (code) {
      car.status = data.status;
      Taro.showToast({
        title: status === 5 ? '下架成功' : msg,
        icon: 'none',
        duration: 2000
      })
    }
  }
  offlineDialogVisible.value = false
  currentOfflineCar.value = null
}

/**
 * 取消上下架操作
 */
const cancelOffline = () => {
  offlineDialogVisible.value = false
  currentOfflineCar.value = null
}

/**
 * 获取车辆列表数据
 */
const fetchCarList = async (page = 0, append = false) => {
  loading.value = true

  try {
    // 调用真实API获取车辆列表
    const response = await getMyListingVehicleAPI({ page, limit: pageSize.value, review_status: [1, 3, 5] })

    if (response.code === 1) {
      const { list, total } = response.data

      if (append) {
        carList.value.push(...list)
      } else {
        carList.value = list
      }

      // 根据总数和当前数据量判断是否还有更多数据
      const currentTotal = append ? carList.value.length : list.length
      hasMore.value = currentTotal < total

      currentPage.value = page
    } else {
      showToast(response.msg || '获取车辆列表失败', 'error')
    }
  } catch (error) {
    console.error('获取车辆列表失败:', error)
    showToast('加载失败，请重试', 'error')
  } finally {
    loading.value = false
  }
}

/**
 * 滚动事件处理
 */
const scroll = (e) => {
  // 可以在这里处理滚动事件，比如记录滚动位置
}

/**
 * 加载更多数据
 */
const loadMore = () => {
  if (!hasMore.value || loading.value) return
  fetchCarList(currentPage.value + 1, true)
}

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
  Taro.showToast({
    title: message,
    icon: type === 'success' ? 'success' : 'none'
  })
}

/**
 * 跳转到车源详情页
 */
const goToCarDetail = (carId) => {
  Taro.navigateTo({
    url: `/pages/productDetail/index?id=${carId}`
  })
}

// 页面加载时获取数据
useDidShow(() => {
  fetchCarList(0, false)
})
</script>

<script>
export default {
  name: "demoPage",
};
</script>