<!--
 * @ Author: zhaowei
 * @ Create Time: 2022-08-11 11:02:17
 * @ Modified by: zhaowei
 * @ Modified time: 2022-10-25 10:13:44
 * @ Description:
 -->


<template>
  <div class="body">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>
    <div>
      <scroller-view :pullup="true" :pulldown="true" height="calc(100vh - 50px)">
        <div class="cardA" v-for="(item, index) in productParam" :key="item.contractNo">
          <div>
            <van-row @click="onClickDetails(item)">
              <van-col span="16">
                <van-col span="24" class="contractNo"><span>合同编号：</span>{{ item.contractNo }}</van-col>
                <van-col style="    width: 100%; margin-left: 8%; line-height: 2;">
                  <van-row>
                    <van-col span="14" class="lable"><span>合同类型：</span></van-col>
                    <van-col span="10" class="contractType" style="font-size: 12px">{{ item.contractType }}</van-col>
                  </van-row>

                  <van-row>
                    <van-col span="14" class="lable"><span>合同金额(元)：</span></van-col>
                    <van-col span="10" class="contractAmount" style="color:rgb(255, 204, 0); font-size: 12px">{{
                    item.contractAmount }}
                    </van-col>
                  </van-row>

                  <van-row>
                    <van-col span="14" class="lable"><span>合同利率：</span></van-col>
                    <van-col span="10" class="contractRate" style="font-size: 12px">{{ item.contractRate }}</van-col>
                  </van-row>
                  <van-row>
                    <van-col span="14" class="lable"><span>到期日期：</span></van-col>
                    <van-col span="10" class="paymentMethod" style="font-size: 12px">{{ item.endDate }}</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-yiqianding"></use>-->
                <!--              </svg>-->
                <!--              <svg class="icon" aria-hidden="true" v-if="item.status === 2">-->
                <!--                <use xlink:href="#icon-weiqianding"></use>-->
                <!--              </svg>-->
                <img class="icon" v-if="item.status === 1" :src="require('@/assets/images/yiwancheng.png')" />
                <img class="icon" v-if="item.status === 2" :src="require('@/assets/images/shoulizhong.png')" />
              </van-col>
            </van-row>


            <van-row class="bottom" v-if="item.status === 1" @click="toReceipt">

              <van-col span="24" class="lablel">
                <span>查看借据</span>
                <img :src="require('@/assets/images/xiayiye.png')" style="width: 30px" />

              </van-col>
            </van-row>

            <van-row class="bottom"  v-if="item.status === 2" @click="toProgress">

              <van-col span="24" class="lablel">
                <span>查看进度</span>
                <img :src="require('@/assets/images/xiayiye.png')" style="width: 30px" />

              </van-col>
            </van-row>


          </div>
          <!-- <van-row  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 class="card" v-for="(item, index) in productParamA" :key="index">
          <div>
            <van-row @click="onClickDetails(item)">
              <van-col span="16">
                <van-col span="24" class="contractNo"><span>产品意向申请：</span>{{ item.contractNo }}</van-col>
                <van-col style="    width: 100%; margin-left: 8%; line-height: 2;">
                  <van-row>
                    <van-col span="14" class="lable"><span>产品名称：</span></van-col>
                    <van-col span="10" class="contractType" style="font-size: 12px">{{ item.productName }}</van-col>
                  </van-row>

                  <van-row>
                    <van-col span="14" class="lable"><span>申请金额(元)：</span></van-col>
                    <van-col span="10" class="contractAmount" style="color:rgb(255, 204, 0); font-size: 12px">{{
                    item.applyAmount }}
                    </van-col>
                  </van-row>

                  <van-row>
                    <van-col span="14" class="lable"><span>申请利率：</span></van-col>
                    <van-col span="10" class="contractRate" style="font-size: 12px">{{ item.applyRate }}</van-col>
                  </van-row>
                  <van-row>
                    <van-col span="14" class="lable"><span>申请日期：</span></van-col>
                    <van-col span="10" class="paymentMethod" style="font-size: 12px">{{ item.applyDate }}</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-yiqianding"></use>-->
                <!--              </svg>-->
                <!--              <svg class="icon" aria-hidden="true" v-if="item.status === 2">-->
                <!--                <use xlink:href="#icon-weiqianding"></use>-->
                <!--              </svg>-->
                <img class="icon" v-if="item.status === 3" :src="require('@/assets/images/shenqingzhong.png')" />
                <img class="icon" v-if="item.status === 2" :src="require('@/assets/images/shoulizhong.png')" />
              </van-col>
            </van-row>

            <van-row class="bottom" @click="toProgress">

              <van-col span="24" class="lablel">
                <span>查看进度</span>
                <img :src="require('@/assets/images/xiayiye.png')" style="width: 30px" />

              </van-col>
            </van-row>



          </div>
          <!-- <van-row  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>
      </scroller-view>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "AccommodMain"
})
export default class AccommodMain extends Vue {
  tatleName = "我的贷款"
  //结清贷款计划
  productParam = [{
    contractNo: "117647289092",
    contractType: "一般借款合同",
    contractAmount: "30,000.00",
    contractRate: "4.13%",
    endDate: "2022-01-01",
    status: 1
  },
  {
    contractNo: "117647289093",
    contractType: "一般借款合同",
    contractAmount: "30,000.00",
    contractRate: "1.13%",
    endDate: "2022-01-01",
    status: 2
  },
  ];
  productParamA = [
    {
      productName: "小微企业抵押'一证通'贷款",
      applyAmount: "30,000.00",
      applyRate: "1.13%",
      applyDate: "2022-08-23",
      status: 2
    },
    {
      productName: "小微企业抵押'一证通'贷款",
      applyAmount: "30,000.00",
      applyRate: "1.13%",
      applyDate: "2022-08-23",
      status: 3
    }
  ];

  //点击还款计划事件
  onClickDetails(item: any) {
    if (item.status == 2 || item.status == 3) {
      this.$router.push({
        name: "AccommodDetails",
      });
    } else if (item.status == 1) {
      this.$router.push({
        name: "ContractDetail",
      });
    }
  }
  toReceipt() {
    this.$router.push({
      name: "Accommodation"
    })
  }
  //点击body事件
  onClickPicket() {
    this.$router.push({
      name: "Accommodation"
    })
  }
  toProgress() {
    this.$router.push({
      name: "businessProgress"
    })
  }
}


</script>
<style scoped lang="scss">
.body {
  height: 100%;
  width: 100%;
  background-color: rgba(241, 241, 241, 1);
}

.acced {
  width: 100%;
  height: 20%;
}

.icon {
  width: 80px;
  height: 80px;
  margin-top: 10%;
}

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

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

.contractNo {
  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;
  height: 30px;
}


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

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

::v-deep .scroller {
  padding-bottom: 2px;
  padding-top: 1%;
}
</style>