<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 16:24:00
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-25 14:28:53
 * @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()">
        <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="20">
                <van-col span="12" class="lable"><span>申请金额：万元</span></van-col>
                <van-col span="12" class="money" style="color:rgb(255, 204, 0);">{{ item.money }}</van-col>
              </van-row>
              <van-row gutter="20">
                <van-col span="12" class="lable"><span>担保方式</span></van-col>
                <van-col span="12" class="guarantee">{{ item.guarantee }}</van-col>
              </van-row>
              <van-row gutter="20">
                <van-col span="12" class="lable"><span>申请日期（月）</span></van-col>
                <van-col span="12" class="month">{{ item.month }}</van-col>
              </van-row>
              <van-row>
                <van-col span="12" class="lable"><span>申请时间</span></van-col>
                <van-col span="12" 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-a-yifafang60x60px"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-if="item.status === 3">
              <use xlink:href="#icon-a-yijieqing60x60px"></use>
            </svg>
          </van-col>
        </van-row>
      </div>
      <van-row v-if="item.status === 2" 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>
        </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")
  }
  //调用父组件的值
  onClickDetails() {
    this.$emit("onClickDetails")
  }
}
</script>
<style scoped lang="scss">
.icon {
  width: 80px;
  height: 80px;
  margin-top: 10%;
}

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

.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: rgba(54, 114, 241, 1);
  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;
}
</style>