<template>
  <div>
    <common>
      <template #main>
        <el-card style="border-radius: 16px">
          <div class="choose">
            <div class="searchType">贷款金额</div>
            <div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">不限</div>
            <div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">50万元及以下</div>
            <div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">50~100万元</div>
            <div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">100~300万元</div>
            <div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">300~500万元</div>
            <div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">500万元及以下</div>
          </div>
          <div class="choose">
            <div class="searchType">贷款期限</div>
            <div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">不限</div>
            <div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">6个月及以下</div>
            <div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">6~12个月</div>
            <div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">12~24个月</div>
            <div :class="{ active: chooseDate === 4 }" class="chooseItem" @click="changeChoose('date', 4)">24~36个月</div>
            <div :class="{ active: chooseDate === 5 }" class="chooseItem" @click="changeChoose('date', 5)">36个月及以下</div>
          </div>
          <div class="choose">
            <div class="searchType">投保方式</div>
            <div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">不限</div>
            <div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">信用</div>
            <div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">抵押</div>
            <div :class="{ active: chooseWay === 3 }" class="chooseItem" @click="changeChoose('way', 3)">质保</div>
            <div :class="{ active: chooseWay === 4 }" class="chooseItem" @click="changeChoose('way', 4)">保证</div>
            <div :class="{ active: chooseWay === 5 }" class="chooseItem" @click="changeChoose('way', 5)">其他</div>
          </div>
          <div class="choose">
            <div class="searchType">消费主体</div>
            <div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
            <div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
            <div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
            <div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
            <div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
            <div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
          </div>
          <div class="choose">
            <div class="searchType">产品类型</div>
            <div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
            <div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
            <div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
            <div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
          </div>

          <div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
            <div>
              共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
            </div>
            <div>线下审批</div>
            <div>贷款额度</div>
            <div>贷款利率</div>
            <div>贷款期限</div>
          </div>
        </el-card>
        <el-card style="border-radius: 16px; margin-top: 20px">
          <div style="display: flex; justify-content: space-between">
            <div>
              <img :src="getAssetsFile('images/finance/nyyh.png')" alt="" style="width: 160px" />
            </div>
            <div style="display: flex; flex-direction: column; justify-content: space-between; padding: 20px">
              <div>惠农e贷</div>
              <div style="display: flex">
                <div>额度高</div>
                <div>政策扶持</div>
              </div>
            </div>
            <div style="display: flex">
              <div style="display: flex">
                <div>最快放款</div>
                <div>2周</div>
              </div>
              <div style="display: flex">
                <div>申请额度</div>
                <div>最高50万</div>
              </div>
              <div style="display: flex">
                <div>最快放款</div>
                <div>最长60个月</div>
              </div>
              <div style="display: flex">
                <div>年利率</div>
                <div>4.15%起</div>
              </div>
              <div style="display: flex">
                <div>投保方式</div>
                <div>信用</div>
              </div>
            </div>
            <div></div>
          </div>
        </el-card>
      </template>
    </common>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import common from '../components/common.vue';
import { getAssetsFile } from '../../../utils/index.js';

/* --------------- data --------------- */
// #region
const chooseMoney = ref(0);
const chooseDate = ref(0);
const chooseWay = ref(0);
const chooseUse = ref(0);
const chooseType = ref(0);

const pagination = ref({
  total: 0,
  size: 20,
  page: 1,
});

const dataList = ref([
  {
    id: 1,
    fast: '2周',
    maxMoney: '最高50万',
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region
const changeChoose = (type, index) => {
  switch (type) {
    case 'money':
      chooseMoney.value = index;
      break;
    case 'date':
      chooseDate.value = index;
      break;
    case 'way':
      chooseWay.value = index;
      break;
    case 'use':
      chooseUse.value = index;
      break;
    case 'type':
      chooseType.value = index;
      break;
  }
  getList();
};

const getList = () => {
  console.log('刷新数据');
};
// #endregion
</script>

<style lang="scss" scoped>
.choose {
  display: flex;
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .searchType {
    color: #999999;
  }
  .chooseAll {
    margin: 0 30px;
    cursor: pointer;
  }
  .chooseItem {
    cursor: pointer;
    margin-right: 20px;
  }
}
.active {
  color: #25bf82;
  font-weight: bold;
}
</style>
