<template>
  <div class="wrap15 flex mx-5 items-center" @click="$emit('click')">
    <div class="bd5 ml-4">
      <p class="word14">{{ max_amount }}<span class="unit">万</span></p>
      <p class="txt8">最高可借</p>
    </div>
    <div
      class="bd6 flex flex-col flex-shrink overflow-hidden overflow-ellipsis"
    >
      <span class="word15 w-full overflow-hidden overflow-ellipsis">{{
        product_name
      }}</span>
      <span class="txt10 w-full overflow-hidden overflow-ellipsis">{{
        features
      }}</span>
      <!-- <span class="word16">{{features}}</span> -->
    </div>
    <div class="flex-grow"></div>
    <IconVue name="icon-gengduo" color="#979BB6" size="15" class="mr-6" />
  </div>
</template>
<script lang="ts" setup>
import IconVue from "@/components/common/Icon.vue";
import { eLoanMode } from "@/views/withMenu/Loan/types";
import { PropType } from "vue";

defineEmits(["click"]);

const props = defineProps({
  max_amount: {
    type: Number,
    required: true,
  },
  product_name: {
    type: String,
    required: true,
  },
  features: {
    type: String,
    required: true,
  },
  inst_name: {
    type: String,
    required: true,
  },
  loanMode: {
    type: Number as PropType<eLoanMode>,
    requried: true,
  },
});
</script>
<style scoped>
.wrap15 {
  z-index: 98;
  height: 109px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
}

.wrap16 {
  z-index: auto;
}

.bd5 {
  z-index: auto;
}

.unit {
  font-size: 12px;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #f03a30;
  line-height: 17px;
}

.word14 {
  z-index: 106;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 30px;
  letter-spacing: 0.36000001430511475px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 35px;
}

.txt8 {
  z-index: 108;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  align-self: flex-start;
  margin: 5px 0 0 0px;
}

.txt9 {
  z-index: 107;
  display: block;
  overflow-wrap: break-word;
  color: rgba(240, 58, 48, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  font-family: PingFangHK-Regular;
  white-space: nowrap;
  line-height: 17px;
  text-align: center;
  margin: 20px 0 0 5px;
}

.bd6 {
  z-index: auto;
  height: 69px;
  margin-left: 19px;
}

.word15 {
  z-index: 103;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Semibold;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
  align-self: flex-start;
}

.txt10 {
  z-index: 104;
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  align-self: flex-start;
  margin-top: 10px;
}

.word16 {
  z-index: 105;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  white-space: nowrap;
  line-height: 17px;
  text-align: left;
  margin-top: 3px;
}

.label9 {
  z-index: 99;
  height: 14px;
  margin: 27px 0 0 69px;
}
</style>
