<template>
  <div class="jrsc-page">
    <!-- 面包屑导航 -->
    <BreadcrumbNav currentPage="碳金融市场" />

    <!-- 二级菜单 -->
    <div class="secondary-nav">
      <div class="secondary-nav-content">
        <div class="nav-tabs">
          <button
            v-for="tab in navTabs"
            :key="tab.path"
            :class="['nav-tab', { active: isActiveTab(tab.path) }]"
            @click="goToTab(tab.path)"
          >
            {{ tab.label }}
          </button>
        </div>
        <button class="publish-btn" @click="handlePublish">免费发布金融产品</button>
      </div>
    </div>

    <!-- 页面主体 -->
    <main class="jrsc-main">
      <div class="content-wrapper">
        <!-- 左侧筛选栏 -->
        <aside class="filter-sidebar">
          <div class="filter-toggle" @click="filterCollapsed = !filterCollapsed">
            <span class="toggle-text">筛选</span>
            <span class="toggle-icon">{{ filterCollapsed ? '▼' : '▲' }}</span>
          </div>
          <div :class="['filter-sidebar-content', { collapsed: filterCollapsed }]">
            <!-- 内容搜索 -->
            <div class="filter-section">
              <div class="filter-title">关键词搜索</div>
              <t-input v-model="searchKeyword" placeholder="请输入关键词" @enter="handleSearch" />
              <!-- 按钮 -->
              <div class="filter-buttons">
                <t-button theme="primary" @click="handleSearch">查询</t-button>
                <t-button theme="default" @click="handleReset">重置</t-button>
              </div>
            </div>


            <!-- 服务类型切换 -->
            <div class="filter-section">
              <div class="filter-title">产品类型</div>
              <div class="product-type-cards">
                <div
                  v-for="item in productTypes"
                  :key="item.value"
                  :class="['type-card', { active: selectedProductType === item.value }]"
                  @click="handleTypeChange(item.value)"
                >
                  <span class="type-icon">{{ item.value === 'xd' ? '💰' : '🛡️' }}</span>
                  <span class="type-label">{{ item.label }}</span>
                </div>
              </div>
            </div>

            <!-- 机构筛选 -->
            <div class="filter-section enterprise-section">
              <div class="filter-title">{{ selectedProductType === 'xd' ? '合作银行' : '合作保险机构' }}</div>
              <div class="filter-options enterprise-options">
                <div
                  v-for="item in filteredInstitutions"
                  :key="item.value"
                  :class="['filter-item', { active: selectedInstitutions.includes(item.value) }]"
                  @click="toggleInstitution(item.value)"
                >
                  <span class="check-icon">{{ selectedInstitutions.includes(item.value) ? '✓' : '' }}</span>
                  {{ item.label }}
                </div>
              </div>
            </div>
          </div>
        </aside>

        <!-- 右侧金融产品列表 -->
        <div class="product-list">
          <div class="list-header">
            <div class="list-title-box">
              <span class="list-icon">💹</span>
              <span class="list-title">碳金融市场</span>
            </div>
            <div class="list-right">
              <span class="list-count"><span class="count-dot"></span>共 {{ total }} 条产品</span>
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-if="loading" class="loading-state">
            <div class="loading-spinner"></div>
            <p>加载中...</p>
          </div>

          <div class="product-grid" v-else>
            <div
              v-for="card in productList"
              :key="card.cpuuid"
              class="product-card"
            >
              <!-- 卡片顶部渐变边框 -->
              <div class="card-gradient-top"></div>

              <!-- 卡片头部 -->
              <div class="card-header">
                <div class="bank-info">
                  <div class="logo-wrapper">
                    <img v-if="card.yxlogo" class="bank-logo" :src="card.yxlogo" :alt="card.qymc" />
                    <div v-else class="bank-logo-placeholder">{{ card.qymc ? card.qymc.charAt(0) : '🏦' }}</div>
                  </div>
                  <div class="bank-detail">
                    <span class="bank-name">{{ card.qymc }}</span>
                    <span class="bank-tag">{{ selectedProductType === 'xd' ? '绿色信贷' : '绿色保险' }}</span>
                  </div>
                </div>
              </div>

              <!-- 产品名称 -->
              <div class="product-name">{{ card.cpmc }}</div>

              <!-- 产品信息 -->
              <div class="product-info" v-if="selectedProductType === 'xd'">
                <div class="info-item">
                  <div class="info-icon">📊</div>
                  <div class="info-content">
                    <div class="info-label">贷款额度</div>
                    <div class="info-value">{{ card.edfw || '面议' }}</div>
                  </div>
                </div>
                <div class="info-divider"></div>
                <div class="info-item">
                  <div class="info-icon">📅</div>
                  <div class="info-content">
                    <div class="info-label">贷款期限</div>
                    <div class="info-value">{{ card.dkqxfw || '面议' }}</div>
                  </div>
                </div>
                <div class="info-divider"></div>
                <div class="info-item">
                  <div class="info-icon">💵</div>
                  <div class="info-content">
                    <div class="info-label">利率</div>
                    <div class="info-value rate">{{ card.llfw || '面议' }}</div>
                  </div>
                </div>
              </div>
              <div class="product-info" v-else>
                <div class="info-item">
                  <div class="info-icon">🛡️</div>
                  <div class="info-content">
                    <div class="info-label">保障期限</div>
                    <div class="info-value">{{ card.bzqxfw || '面议' }}</div>
                  </div>
                </div>
                <div class="info-divider"></div>
                <div class="info-item">
                  <div class="info-icon">💳</div>
                  <div class="info-content">
                    <div class="info-label">保费方式</div>
                    <div class="info-value">{{ card.bfjsfs || '面议' }}</div>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="card-actions">
                <t-button theme="default" size="small" variant="outline" @click="handleDetail(card)">查看详情</t-button>
                <t-button theme="primary" size="small" @click="handleApply(card)">立即申请</t-button>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="!loading && productList.length === 0" class="empty-state">
            <div class="empty-illustration">💰</div>
            <p class="empty-text">暂无金融产品</p>
            <p class="empty-hint">敬请期待更多优质金融产品上线</p>
          </div>

          <!-- 分页 -->
          <div class="pagination-box" v-if="total > 0">
            <t-pagination
              v-model="page.pageNo"
              :total="total"
              :page-size.sync="page.pageSize"
              :page-size-options="[3, 6, 9, 18]"
              @change="onPageChange"
            />
          </div>
        </div>
      </div>
    </main>

    <Footer />

    <!-- 产品详情弹窗 -->
    <t-dialog
      :header="selectedProductType === 'xd' ? '💰 信贷产品详情' : '🛡️ 保险产品详情'"
      :visible.sync="detailVisible"
      width="50%"
      :closeOnOverlayClick="false"
      :onClose="onDetailClose"
      class="global-dialog detail-dialog"
    >
      <div class="detail-content" v-if="selectedProduct">
        <div class="detail-header">
          <div class="detail-product-name">{{ selectedProduct.cpmc }}</div>
        </div>
        <table class="info-table">
          <tbody v-if="selectedProductType === 'xd'">
            <tr class="table-row">
              <td class="label-cell">金融机构</td>
              <td class="value-cell">{{ selectedProduct.qymc }}</td>
              <td class="label-cell">业务类型</td>
              <td class="value-cell">{{ selectedProduct.ywlxmc }}</td>
            </tr>
            <tr class="table-row">
              <td class="label-cell">额度范围</td>
              <td class="value-cell highlight">{{ selectedProduct.edfw || '面议' }}</td>
              <td class="label-cell">利率范围</td>
              <td class="value-cell highlight rate">{{ selectedProduct.llfw || '面议' }}</td>
            </tr>
            <tr class="table-row">
              <td class="label-cell">贷款期限</td>
              <td class="value-cell">{{ selectedProduct.dkqxfw || '面议' }}</td>
              <td class="label-cell"></td>
              <td class="value-cell"></td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr class="table-row">
              <td class="label-cell">保险公司</td>
              <td class="value-cell">{{ selectedProduct.qymc }}</td>
              <td class="label-cell">保险类型</td>
              <td class="value-cell">{{ selectedProduct.ywlxmc }}</td>
            </tr>
            <tr class="table-row">
              <td class="label-cell">保障期限</td>
              <td class="value-cell highlight">{{ selectedProduct.bzqxfw || '面议' }}</td>
              <td class="label-cell">保费方式</td>
              <td class="value-cell highlight">{{ selectedProduct.bfjsfs || '面议' }}</td>
            </tr>
          </tbody>
        </table>
        <div class="product-description">
          <h4 class="description-title">产品说明</h4>
          <div class="description-content">
            <p>{{ selectedProduct.fwcpms || '暂无产品说明，请联系金融机构了解详情。' }}</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <t-button theme="default" variant="outline" @click="onDetailClose">关闭</t-button>
          <t-button theme="primary" @click="handleDetailApply">立即申请 💡</t-button>
        </div>
      </template>
    </t-dialog>

    <!-- 申请弹窗 -->
    <t-dialog
      header="申请信息"
      :visible.sync="applyVisible"
      width="50%"
      :closeOnOverlayClick="false"
      :onClose="onApplyClose"
      class="global-dialog"
    >
      <div class="apply-form" v-if="!submitSuccess">
        <t-form :data="applyForm" labelAlign="top" ref="applyFormRef">
          <t-form-item label="企业名称">
            <t-input v-model="applyForm.qymc" placeholder="请输入企业名称" disabled />
          </t-form-item>
          <t-form-item label="联系人">
            <t-input v-model="applyForm.lxr" placeholder="请输入联系人" />
          </t-form-item>
          <t-form-item label="联系电话">
            <t-input v-model="applyForm.lxdh" placeholder="请输入联系电话" />
          </t-form-item>
          <t-form-item v-if="selectedProductType === 'xd'" label="申请金额（万元）">
            <t-select v-model="applyForm.sqdkJe" placeholder="请选择" clearable>
              <t-option value="50" label="50万元" />
              <t-option value="100" label="100万元" />
              <t-option value="200" label="200万元" />
              <t-option value="500" label="500万元" />
            </t-select>
          </t-form-item>
          <t-form-item v-else label="投保金额（万元）">
            <t-input v-model="applyForm.tbje" placeholder="请输入" type="number" />
          </t-form-item>
          <t-form-item v-if="selectedProductType === 'xd'" label="贷款用途">
            <t-textarea v-model="applyForm.sqdkyt" placeholder="请输入贷款用途" />
          </t-form-item>
        </t-form>
      </div>
      <div class="submit-success" v-else>
        <div class="success-icon">✓</div>
        <div class="success-text">提交成功，请等待审核</div>
      </div>
      <template #footer>
        <div class="dialog-footer" v-if="!submitSuccess">
          <t-button theme="default" @click="onApplyClose">取消</t-button>
          <t-button theme="primary" @click="handleSubmitApply" :loading="submitLoading">提交</t-button>
        </div>
        <div class="dialog-footer" v-else>
          <t-button theme="primary" @click="onApplyClose">确定</t-button>
        </div>
      </template>
    </t-dialog>

    <!-- 提示弹窗 -->
    <t-dialog
      :closeOnOverlayClick="false"
      header="提示"
      body="请先进行企业入驻"
      :visible.sync="rzVisible"
      @confirm="onRzConfirm"
      :onClose="onRzClose"
      :cancelBtn="null"
      class="global-dialog"
    />
  </div>
</template>

<script>
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
import Footer from '@/pages/index/components/footer/index.vue';
import api from '@/pages/index/api/fwsc/index.js';

export default {
  name: 'JrscPage',
  components: {
    BreadcrumbNav,
    Footer,
  },
  data() {
    return {
      navTabs: [
        { label: '碳服务市场', path: '/tfwsc' },
        { label: '碳需求市场', path: '/txqsc' },
        { label: '碳金融市场', path: '/tjrsc' },
        { label: '碳数据市场', path: '/tsjsc' },
      ],
      // 产品类型选项
      productTypes: [
        { label: '绿色信贷', value: 'xd' },
        { label: '绿色保险', value: 'bx' },
      ],
      // 选中产品类型
      selectedProductType: 'xd',
      // 机构选项
      institutionOptions: [],
      // 选中的机构
      selectedInstitutions: [],
      // 搜索关键词
      searchKeyword: '',
      // 产品列表
      productList: [],
      // 机构列表
      total: 0,
      // 分页
      page: {
        pageNo: 1,
        pageSize: 6,
      },
      // 加载状态
      loading: false,
      // 详情弹窗
      detailVisible: false,
      selectedProduct: null,
      // 申请弹窗
      applyVisible: false,
      submitSuccess: false,
      submitLoading: false,
      applyForm: {
        qymc: '',
        lxr: '',
        lxdh: '',
        sqdkJe: '',
        sqdkyt: '',
        tbje: '',
      },
      // 入驻提示弹窗
      rzVisible: false,
      // 当前申请的产品UUID
      currentProductUuid: '',
      // 用户信息
      yhxx: {},
      // 移动端筛选折叠状态
      filterCollapsed: true,
    };
  },
  computed: {
    filteredInstitutions() {
      return this.institutionOptions;
    },
  },
  watch: {
    // 监听机构选择变化，自动刷新产品列表
    selectedInstitutions: {
      handler() {
        this.page.pageNo = 1;
        this.loadProductList();
      },
      deep: true,
    },
  },
  mounted() {
    this.initUser();
    this.loadInstitutionList();
    this.loadProductList();
  },
  methods: {
    // 初始化用户信息
    async initUser() {
      try {
        const { data } = await api.init();
        this.yhxx = data || {};
        window.sessionStorage.setItem('yhxx', JSON.stringify(data));
        this.applyForm.qymc = this.yhxx.qymc || '';
      } catch (error) {
        console.error('获取用户信息失败', error);
      }
    },
    // 加载机构列表
    async loadInstitutionList() {
      try {
        console.log('加载机构列表, type:', this.selectedProductType);
        const { data, code } = await api.queryJgList(this.selectedProductType);
        console.log('机构列表响应:', code, data);
        if (code === 1 && data) {
          // 兼容两种数据格式：value/label 或 qyid/qymc
          if (data.length > 0 && data[0].qyid !== undefined) {
            this.institutionOptions = data.map((item) => ({
              value: item.qyid,
              label: item.qymc,
            }));
          } else {
            this.institutionOptions = data;
          }
        }
      } catch (error) {
        console.error('加载机构列表失败', error);
        this.institutionOptions = [];
      }
    },
    // 加载产品列表
    async loadProductList() {
      this.loading = true;
      try {
        const params = {
          type: this.selectedProductType,
          pageNum: this.page.pageNo,
          pageSize: this.page.pageSize,
          cpmc: this.searchKeyword,
          qyidList: this.selectedInstitutions,
        };
        console.log('加载产品列表, params:', params);
        const { data, code } = await api.queryXdbxcpList(params);
        console.log('产品列表响应:', code, data);
        if (code === 1) {
          this.productList = data.list || [];
          this.total = Number(data.total || 0);
        } else {
          this.productList = [];
          this.total = 0;
        }
      } catch (error) {
        console.error('获取产品列表失败', error);
        this.productList = [];
        this.total = 0;
      } finally {
        this.loading = false;
      }
    },
    // 切换产品类型
    handleTypeChange(type) {
      this.selectedProductType = type;
      this.selectedInstitutions = [];
      this.page.pageNo = 1;
      this.loadInstitutionList();
      this.loadProductList();
    },
    // 切换机构选择
    toggleInstitution(value) {
      const index = this.selectedInstitutions.indexOf(value);
      if (index > -1) {
        this.selectedInstitutions.splice(index, 1);
      } else {
        this.selectedInstitutions.push(value);
      }
    },
    // 搜索
    handleSearch() {
      this.page.pageNo = 1;
      this.loadProductList();
    },
    // 重置
    handleReset() {
      this.selectedInstitutions = [];
      this.searchKeyword = '';
      this.page.pageNo = 1;
      this.loadProductList();
    },
    // 分页变化
    onPageChange(pageInfo) {
      this.page.pageNo = pageInfo.current;
      this.page.pageSize = pageInfo.pageSize;
      this.loadProductList();
    },
    // 查看详情
    async handleDetail(card) {
      try {
        const { data, code } = await api.queryXdbxcpxq(card.cpuuid);
        if (code === 1) {
          this.selectedProduct = data;
          this.detailVisible = true;
        }
      } catch (error) {
        console.error('获取产品详情失败', error);
      }
    },
    onDetailClose() {
      this.detailVisible = false;
    },
    handleDetailApply() {
      this.detailVisible = false;
      this.handleApply(this.selectedProduct);
    },
    // 立即申请
    handleApply(card) {
      const yhxx = window.sessionStorage.getItem('yhxx');
      if (yhxx) {
        const yhxxData = JSON.parse(yhxx);
        if (yhxxData.gxdtRzbz === 'Y') {
          this.currentProductUuid = card.cpuuid;
          this.applyVisible = true;
          this.submitSuccess = false;
        } else {
          this.rzVisible = true;
        }
      } else {
        this.rzVisible = true;
      }
    },
    onApplyClose() {
      this.applyVisible = false;
      this.submitSuccess = false;
      this.applyForm = {
        qymc: this.yhxx.qymc || '',
        lxr: '',
        lxdh: '',
        sqdkJe: '',
        sqdkyt: '',
        tbje: '',
      };
    },
    async handleSubmitApply() {
      if (!this.applyForm.lxr || !this.applyForm.lxdh) {
        this.$message.warning('请填写完整信息');
        return;
      }
      if (this.selectedProductType === 'xd' && !this.applyForm.sqdkJe) {
        this.$message.warning('请选择申请金额');
        return;
      }
      if (this.selectedProductType === 'bx' && !this.applyForm.tbje) {
        this.$message.warning('请输入投保金额');
        return;
      }
      this.submitLoading = true;
      try {
        // 模拟提交成功
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.submitSuccess = true;
        this.$message.success('提交成功');
      } catch (error) {
        this.$message.error('提交失败');
      } finally {
        this.submitLoading = false;
      }
    },
    onRzConfirm() {
      this.rzVisible = false;
    },
    onRzClose() {
      this.rzVisible = false;
    },
    // 发布
    handlePublish() {
      this.$message.info('请联系客服发布金融产品');
    },
    // 导航相关
    isActiveTab(path) {
      return this.$route.path === path;
    },
    goToTab(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped lang="less">
// 变量定义
@primary-color: #009a29;
@primary-light: #4caf50;
@primary-bg: #e8f5e9;
@secondary-color: #d25f00;
@text-dark: #333;
@text-light: #666;
@text-gray: #999;
@border-color: #e5e7eb;
@bg-gray: #f5f5f5;
@bg-white: #fff;

.jrsc-page {
  min-height: 100vh;
  background: @bg-gray;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jrsc-main {
  width: 100%;
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

// 二级菜单
.secondary-nav {
  background: @bg-white;
  border-bottom: 1px solid #eee;
}

.secondary-nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  padding: 0 20px;
  margin: 0 auto;
}

.nav-tabs {
  display: flex;
  gap: 8px;
}

.nav-tab {
  padding: 12px 20px;
  font-size: 14px;
  color: @text-light;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;

  &:hover {
    color: @primary-color;
  }

  &.active {
    color: @primary-color;
    border-bottom-color: @primary-color;
  }
}

.publish-btn {
  padding: 8px 20px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 154, 41, 0.3);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 154, 41, 0.4);
  }
}

// 内容区域
.content-wrapper {
  display: flex;
  gap: 20px;
}

// 左侧筛选栏
.filter-sidebar {
  position: sticky;
  top: 104px;
  width: 240px;
  height: fit-content;
  flex-shrink: 0;
}

.filter-sidebar-content {
  padding: 20px;
  background: @bg-white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

// 移动端筛选栏折叠
.filter-toggle {
  display: none;
}

@media (max-width: 768px) {
  .filter-toggle {
    display: flex;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;

    .toggle-text {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }

    .toggle-icon {
      font-size: 18px;
      color: #666;
      transition: transform 0.3s;
    }

    &.collapsed .toggle-icon {
      transform: rotate(-90deg);
    }
  }

  .filter-sidebar-content {
    max-height: 1000px;
    padding: 20px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .filter-sidebar-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.filter-section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed #e0e0e0;

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
}

.filter-title {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: @text-dark;
  align-items: center;
  gap: 6px;

  &::before {
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, @primary-color, @primary-light);
    border-radius: 2px;
    content: '';
  }
}

// 产品类型切换卡片
.product-type-cards {
  display: flex;
  gap: 12px;
}

.type-card {
  display: flex;
  padding: 16px 8px;
  cursor: pointer;
  background: @bg-gray;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.3s;
  flex: 1;
  flex-direction: column;
  align-items: center;

  &:hover {
    background: @primary-bg;
    border-color: @primary-bg;
  }

  &.active {
    background: @primary-bg;
    border-color: @primary-color;
    box-shadow: 0 2px 8px rgba(0, 154, 41, 0.2);

    .type-label {
      font-weight: 600;
      color: @primary-color;
    }
  }

  .type-icon {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .type-label {
    font-size: 13px;
    color: @text-light;
    transition: all 0.3s;
  }
}

// 机构筛选
.enterprise-section {
  .filter-options {
    flex-direction: column;
    gap: 6px;
  }

  .filter-item {
    display: flex;
    padding: 10px 12px;
    font-size: 14px;
    color: @text-light;
    cursor: pointer;
    background: @bg-gray;
    border-radius: 6px;
    transition: all 0.3s;
    align-items: center;
    gap: 8px;

    .check-icon {
      display: flex;
      width: 18px;
      height: 18px;
      font-size: 12px;
      color: #fff;
      background: #ccc;
      border-radius: 4px;
      transition: all 0.3s;
      align-items: center;
      justify-content: center;
    }

    &:hover {
      color: @primary-color;
      background: @primary-bg;
    }

    &.active {
      color: @primary-color;
      background: @primary-bg;

      .check-icon {
        background: @primary-color;
      }
    }
  }
}

.enterprise-options {
  max-height: 200px;
  padding-right: 4px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

.filter-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;

  .t-button {
    flex: 1;
  }
}

// 右侧产品列表
.product-list {
  flex: 1;
  min-width: 0;
}

.list-header {
  display: flex;
  padding: 0 8px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}

.list-title-box {
  display: flex;
  align-items: center;
  gap: 10px;

  .list-icon {
    font-size: 24px;
  }

  .list-title {
    font-size: 22px;
    font-weight: 600;
    color: @text-dark;
    background: linear-gradient(135deg, @text-dark 0%, @primary-color 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

.list-right {
  display: flex;
  align-items: center;
}

.list-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: @text-gray;

  .count-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, @primary-color, @primary-light);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// 产品卡片网格
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

// 产品卡片
.product-card {
  position: relative;
  display: flex;
  padding: 20px;
  padding-top: 0;
  overflow: hidden;
  background: @bg-white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  flex-direction: column;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);

    .card-gradient-top {
      height: 4px;
    }
  }
}

.card-gradient-top {
  height: 0;
  margin: 0 -20px 16px;
  background: linear-gradient(90deg, @primary-color, @primary-light, @primary-color);
  background-size: 200% 100%;
  border-radius: 0 0 8px 8px;
  animation: gradientMove 3s ease infinite;
  transition: height 0.3s;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-header {
  display: flex;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  justify-content: space-between;
  align-items: center;
}

.bank-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-wrapper {
  display: flex;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: linear-gradient(135deg, @primary-bg 0%, #f0f9f0 100%);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.bank-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.bank-logo-placeholder {
  display: flex;
  width: 48px;
  height: 48px;
  font-size: 20px;
  font-weight: 600;
  color: @primary-color;
  background: linear-gradient(135deg, @primary-bg 0%, #f0f9f0 100%);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.bank-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bank-name {
  font-size: 15px;
  font-weight: 600;
  color: @text-dark;
}

.bank-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  color: @primary-color;
  background: @primary-bg;
  border-radius: 4px;
}

.product-name {
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: @text-dark;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
  border-radius: 8px;
}

.product-info {
  display: flex;
  padding: 16px 0;
  margin-bottom: 16px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  justify-content: space-between;
  align-items: center;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.info-icon {
  font-size: 18px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: @text-gray;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: @text-dark;

  &.rate {
    color: @secondary-color;
  }
}

.info-divider {
  width: 1px;
  height: 32px;
  background: #e0e0e0;
}

.card-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;

  .t-button {
    flex: 1;
  }
}

// 加载状态
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  background: @bg-white;
  border-radius: 12px;

  .loading-spinner {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 4px solid @primary-bg;
    border-top-color: @primary-color;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: @text-gray;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  background: @bg-white;
  border-radius: 12px;
  animation: fadeIn 0.5s ease;

  .empty-illustration {
    margin-bottom: 20px;
    font-size: 64px;
  }

  .empty-text {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: @text-dark;
  }

  .empty-hint {
    margin: 0;
    font-size: 14px;
    color: @text-gray;
  }
}

// 分页
.pagination-box {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}

// 详情弹窗
.detail-dialog {
  /deep/.t-dialog__header {
    padding: 16px 24px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f0f9f0 100%);
    border-radius: 8px 8px 0 0;
  }
}

.detail-content {
  padding: 8px;
  animation: fadeIn 0.3s ease;
}

.detail-header {
  padding: 16px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
  border-radius: 8px;
}

.detail-product-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.info-table {
  width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid @border-color;
  border-collapse: collapse;
  border-radius: 8px;

  .table-row {
    border-bottom: 1px solid @border-color;

    &:last-child {
      border-bottom: none;
    }
  }

  .label-cell {
    width: 100px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    color: @text-light;
    background: linear-gradient(135deg, #f8f9fa 0%, #f5f5f5 100%);
    border-right: 1px solid @border-color;
  }

  .value-cell {
    padding: 14px 16px;
    font-size: 14px;
    color: @text-dark;

    &.highlight {
      font-weight: 600;
      color: @primary-color;
    }

    &.rate {
      color: @secondary-color;
    }
  }
}

.product-description {
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
  border-radius: 8px;

  .description-title {
    display: flex;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: @text-dark;
    align-items: center;
    gap: 8px;

    &::before {
      content: '📋';
    }
  }

  .description-content {
    padding: 0;

    p {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: @text-light;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

// 申请表单
.apply-form {
  padding: 8px;
  animation: fadeIn 0.3s ease;
}

.submit-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  animation: scaleIn 0.4s ease;

  .success-icon {
    display: flex;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    font-size: 40px;
    color: #fff;
    background: linear-gradient(135deg, @primary-color 0%, @primary-light 100%);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    animation: successPop 0.5s ease 0.2s both;
  }

  .success-text {
    font-size: 18px;
    font-weight: 600;
    color: @text-dark;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes successPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .jrsc-main {
    padding: 12px;
  }

  .secondary-nav-content {
    flex-direction: column;
    padding: 12px 16px;
    gap: 12px;
  }

  .nav-tabs {
    width: 100%;
    padding-bottom: 4px;
    overflow-x: auto;
    gap: 4px;
  }

  .nav-tab {
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .publish-btn {
    width: 100%;
    padding: 10px;
  }

  .content-wrapper {
    flex-direction: column;
  }

  .filter-sidebar {
    position: relative;
    top: 0;
    width: 100%;
  }

  .filter-sidebar-content {
    padding: 12px;
  }

  .product-list {
    width: 100%;
  }

  .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-card {
    padding: 16px;
  }

  .product-info {
    flex-direction: column;
    gap: 12px;
  }

  .info-divider {
    display: none;
  }

  .info-item {
    justify-content: flex-start;
  }

  .card-actions {
    flex-direction: column;
    gap: 8px;
  }

  .pagination-box {
    padding-top: 20px;
  }
}

@media (max-width: 480px) {
  .jrsc-main {
    padding: 8px;
  }

  .secondary-nav-content {
    padding: 8px 12px;
  }

  .nav-tab {
    padding: 8px 10px;
    font-size: 12px;
  }

  .publish-btn {
    padding: 8px;
    font-size: 13px;
  }

  .list-title-box .list-title {
    font-size: 18px;
  }

  .product-name {
    padding: 10px;
    font-size: 14px;
  }
}
</style>
