<script setup>
import { ref } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getShootingList } from "@/api/shooting";

const list = ref([]);
const page = ref(1);
const total = ref(0);
const loading = ref(false);
const finished = ref(false);

const city = ref("");
const style = ref("");
const roleFilter = ref("");
const isFree = ref(null);
const showFilter = ref(false);

const roleOptions = [
  { label: "全部", value: "" },
  { label: "摄影师", value: "photographer" },
  { label: "Coser", value: "cosplayer" },
  { label: "不限", value: "both" },
];

const roleLabels = {
  photographer: "找摄影",
  cosplayer: "找Coser",
  both: "不限",
};

const statusLabels = {
  open: "招募中",
  matched: "已匹配",
  closed: "已关闭",
};

const statusColors = {
  open: "#22c55e",
  matched: "#f59e0b",
  closed: "#9ca3af",
};

async function fetchList(reset = false) {
  if (loading.value) return;
  if (reset) {
    page.value = 1;
    finished.value = false;
    list.value = [];
  }
  loading.value = true;
  try {
    const params = { page: page.value, page_size: 20 };
    if (city.value) params.city = city.value;
    if (style.value) params.style = style.value;
    if (roleFilter.value) params.role_needed = roleFilter.value;
    if (isFree.value !== null) params.is_free = isFree.value;
    params.status = "open";

    const res = await getShootingList(params);
    const items = res.items || [];
    if (reset) {
      list.value = items;
    } else {
      list.value.push(...items);
    }
    total.value = res.total || 0;
    if (list.value.length >= total.value) finished.value = true;
    page.value++;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
}

function applyFilter() {
  showFilter.value = false;
  fetchList(true);
}

function resetFilter() {
  city.value = "";
  style.value = "";
  roleFilter.value = "";
  isFree.value = null;
  showFilter.value = false;
  fetchList(true);
}

function goDetail(id) {
  uni.navigateTo({ url: `/pages/shooting/detail?id=${id}` });
}

function goCreate() {
  uni.navigateTo({ url: "/pages/shooting/create" });
}

function formatDate(d) {
  if (!d) return "时间待定";
  const dt = new Date(d);
  return `${dt.getMonth() + 1}月${dt.getDate()}日`;
}

function formatBudget(item) {
  if (item.is_free) return "互免";
  if (item.budget_min && item.budget_max)
    return `¥${item.budget_min}-${item.budget_max}`;
  if (item.budget_min) return `¥${item.budget_min}起`;
  if (item.budget_max) return `¥${item.budget_max}以内`;
  return "面议";
}

onPullDownRefresh(async () => {
  await fetchList(true);
  uni.stopPullDownRefresh();
});

onReachBottom(() => {
  if (!finished.value) fetchList();
});

fetchList(true);
</script>

<template>
  <view class="shooting-page">
    <view class="top-bar">
      <view class="bar-left">
        <text class="bar-title">约拍广场</text>
        <text class="bar-count">{{ total }}条约拍</text>
      </view>
      <view class="bar-right">
        <view class="bar-btn" @tap="showFilter = !showFilter">
          <uni-icons type="settings" size="18" color="#6366f1" />
          <text>筛选</text>
        </view>
        <view class="bar-btn primary" @tap="goCreate">
          <uni-icons type="plusempty" size="16" color="#fff" />
          <text>发布</text>
        </view>
      </view>
    </view>

    <view v-if="showFilter" class="filter-panel">
      <view class="filter-row">
        <text class="filter-label">城市</text>
        <input
          v-model="city"
          class="filter-input"
          placeholder="输入城市"
        />
      </view>
      <view class="filter-row">
        <text class="filter-label">风格</text>
        <input
          v-model="style"
          class="filter-input"
          placeholder="如：古风、JK、洛丽塔"
        />
      </view>
      <view class="filter-row">
        <text class="filter-label">角色</text>
        <view class="role-tags">
          <view
            v-for="opt in roleOptions"
            :key="opt.value"
            class="role-tag"
            :class="{ active: roleFilter === opt.value }"
            @tap="roleFilter = opt.value"
          >
            {{ opt.label }}
          </view>
        </view>
      </view>
      <view class="filter-row">
        <text class="filter-label">预算</text>
        <view class="role-tags">
          <view
            class="role-tag"
            :class="{ active: isFree === null }"
            @tap="isFree = null"
          >全部</view>
          <view
            class="role-tag"
            :class="{ active: isFree === true }"
            @tap="isFree = true"
          >互免</view>
          <view
            class="role-tag"
            :class="{ active: isFree === false }"
            @tap="isFree = false"
          >付费</view>
        </view>
      </view>
      <view class="filter-actions">
        <view class="filter-btn reset" @tap="resetFilter">重置</view>
        <view class="filter-btn apply" @tap="applyFilter">应用</view>
      </view>
    </view>

    <view class="card-list">
      <view
        v-for="item in list"
        :key="item.id"
        class="shoot-card"
        @tap="goDetail(item.id)"
      >
        <view class="card-header">
          <view class="card-title-row">
            <text class="card-title">{{ item.title }}</text>
            <view
              class="status-tag"
              :style="{ background: statusColors[item.status] || '#9ca3af' }"
            >
              {{ statusLabels[item.status] || item.status }}
            </view>
          </view>
          <view class="card-creator" v-if="item.creator">
            <text class="creator-name">{{ item.creator.nickname }}</text>
          </view>
        </view>
        <view class="card-info">
          <view class="info-item">
            <uni-icons type="location" size="14" color="#6366f1" />
            <text>{{ item.city }}</text>
          </view>
          <view class="info-item">
            <uni-icons type="calendar" size="14" color="#6366f1" />
            <text>{{ formatDate(item.shoot_date) }}</text>
          </view>
          <view class="info-item" v-if="item.style">
            <uni-icons type="flag" size="14" color="#6366f1" />
            <text>{{ item.style }}</text>
          </view>
        </view>
        <view class="card-footer">
          <view class="footer-tag role-label">
            {{ roleLabels[item.role_needed] || item.role_needed }}
          </view>
          <view class="footer-tag budget-label">
            {{ formatBudget(item) }}
          </view>
          <text class="apply-count">{{ item.application_count }}人报名</text>
        </view>
      </view>
    </view>

    <view v-if="loading" class="loading-tip">加载中...</view>
    <view v-else-if="finished && list.length > 0" class="loading-tip">没有更多了</view>
    <view v-else-if="!loading && list.length === 0" class="empty-tip">
      <uni-icons type="info" size="40" color="#d1d5db" />
      <text>暂无约拍信息</text>
    </view>
  </view>
</template>

<style scoped>
.shooting-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 30rpx;
}
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 28rpx;
  background: #fff;
}
.bar-left {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
}
.bar-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1e1e2e;
}
.bar-count {
  font-size: 24rpx;
  color: #9ca3af;
}
.bar-right {
  display: flex;
  gap: 16rpx;
}
.bar-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 10rpx 20rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  color: #6366f1;
  background: #eef2ff;
}
.bar-btn.primary {
  background: #6366f1;
  color: #fff;
}

.filter-panel {
  background: #fff;
  padding: 20rpx 28rpx;
  margin-bottom: 12rpx;
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.filter-label {
  width: 100rpx;
  font-size: 26rpx;
  color: #374151;
  flex-shrink: 0;
}
.filter-input {
  flex: 1;
  height: 64rpx;
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
}
.role-tags {
  display: flex;
  gap: 12rpx;
  flex-wrap: wrap;
}
.role-tag {
  padding: 8rpx 24rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  background: #f3f4f6;
  color: #374151;
}
.role-tag.active {
  background: #6366f1;
  color: #fff;
}
.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}
.filter-btn {
  padding: 12rpx 36rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
}
.filter-btn.reset {
  background: #f3f4f6;
  color: #6b7280;
}
.filter-btn.apply {
  background: #6366f1;
  color: #fff;
}

.card-list {
  padding: 0 20rpx;
}
.shoot-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-top: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-header {
  margin-bottom: 16rpx;
}
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1e1e2e;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-tag {
  font-size: 22rpx;
  color: #fff;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
  margin-left: 12rpx;
}
.card-creator {
  margin-top: 8rpx;
}
.creator-name {
  font-size: 24rpx;
  color: #9ca3af;
}
.card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 24rpx;
  color: #6b7280;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.footer-tag {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.role-label {
  background: #eef2ff;
  color: #6366f1;
}
.budget-label {
  background: #fef3c7;
  color: #d97706;
}
.apply-count {
  font-size: 22rpx;
  color: #9ca3af;
  margin-left: auto;
}

.loading-tip {
  text-align: center;
  font-size: 26rpx;
  color: #9ca3af;
  padding: 30rpx 0;
}
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 120rpx 0;
  font-size: 28rpx;
  color: #9ca3af;
}
</style>
