<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 16:24:00
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 14:13:40
 * @FilePath: \mcep-h5\src\components\common\Tatle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <div> -->
  <div class="d-tatle">
    <div class="card" v-for="(item, index) in productParam" :key="index">
      <div @click="onClickDetails(item.status)">
        <van-row>
          <van-col span="16">

            <van-col span="24" class="priductName">{{ item.productname }}</van-col>
            <van-col style="    width: 100%; margin-left: 8%; line-height: 2;">
              <van-row gutter="10">
                <van-col span="10" class="lable"><span>借款金额</span></van-col>
                <van-col span="14" class="money" style="color:#FBAF20;font-size: 14px">{{ item.money }}</van-col>
              </van-row>
              <van-row gutter="10">
                <van-col span="10" class="lable"><span>担保方式</span></van-col>
                <van-col span="14" class="guarantee">{{ item.guarantee }}</van-col>
              </van-row>
              <van-row gutter="10">
                <van-col span="10" class="lable"><span>借款日期</span></van-col>
                <van-col span="14" class="month">{{ item.month }}</van-col>
              </van-row>
              <van-row gutter="10">
                <van-col span="10" class="lable"><span>到期日期</span></van-col>
                <van-col span="14" class="time">{{ item.time }}</van-col>
              </van-row>

            </van-col>

          </van-col>
          <van-col span="8">
            <svg class="icon" aria-hidden="true" v-if="item.status === 1">
              <use xlink:href="#icon-a-yifafang60x60px"></use>
            </svg>
<!--            已完成的贷款没有"申请中"的状态-->
<!--            <svg class="icon" aria-hidden="true" v-if="item.status === 2">-->
<!--              <use xlink:href="#icon-shenqingzhong"></use>-->
<!--            </svg>-->
            <svg class="icon" aria-hidden="true" v-if="item.status === 3">
              <use xlink:href="#icon-yijieqing"></use>
            </svg>
          </van-col>
        </van-row>
      </div>
        <van-row v-if="item.status === 1" type="flex" class="bottom" @click="onClickPicket()">
          <van-col span="24" class="lablel"><span>查看还款计划</span>
<!--            <svg class="iconl" aria-hidden="true">-->
<!--              <use xlink:href="#icon-a-xiayiye24x24px"></use>-->
<!--            </svg>-->
            <img :src="require('@/assets/images/xiayiye.png')" style="width: 30px"/>
          </van-col>
        </van-row>
        <van-row v-if="item.status === 2" type="flex" class="bottom" @click="toTrial()">
          <van-col span="24" class="lablel"><span>计算器</span>
<!--            <svg class="iconl" aria-hidden="true">-->
<!--              <use xlink:href="#icon-a-xiayiye24x24px"></use>-->
<!--            </svg>-->
            <img :src="require('@/assets/images/xiayiye.png')" style="width: 30px"/>
          </van-col>
        </van-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "PicketAcced",
})
export default class PicketAcced extends Vue {
  @Prop({ default: "" }) productParam: any | [] //列表信息
  //调用父组件的值

  onClickPicket() {
    this.$emit("onClickPicket")
  }
  toTrial() {
    this.$emit("toTrial")
  }
  //调用父组件的值
  onClickDetails(status:any) {
    this.$emit("onClickDetails",status )
  }
}
</script>
<style scoped lang="scss">
.icon {
  width: 80px;
  height: 80px;
  margin-top: 10%;
}

.card {
  border-radius: 2%;
  //height: 28vh;
  height: 190px;
  margin: 3% 3% 3% 3%;
  background: #ffffff;
  border: none;
}

.priductName {
  margin: 5% 7%;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
}

.lable {
  text-align: left;
  color: #7F7F7F;
  font-size: 14px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
}

.iconl {
  width: 20px;
  height: 20px;
}

.bottom {
  background-color: #3672F1;
  border: none;
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  text-align: center;
}

.lablel {
  text-align: center;
  font-size: 12px;
  color: #FFFFFF;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  height: 30px;
}
</style>