<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 14:18:52
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="body">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>
    <div>
      <van-tabs>
        <van-tab title="未结清">
          <picket-acced :productParam="productParam" class="acced" @onClickDetails="onClickDetails"
            @onClickPicket="onClickPicket" @toTrial="toTrial"></picket-acced>
        </van-tab>
        <van-tab title="已结清">
          <picket-acced :productParam="productParamlist" @onClickDetails="onClickDetails" class="acced"></picket-acced>
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "Accommodation"
})
export default class Accommodation extends Vue {
  tatleName = "我的贷款"
  //未结清贷款计划
  productParam = [{
    productname: "'企业之星'流动之星贷款",
    money: "30",
    guarantee: "担保",
    month: "12",
    status: 1,
    time: "2022-02-18"
  }, {
    productname: "'企业之星'流动之星贷款",
    money: "30",
    guarantee: "担保",
    month: "12",
    status: 2,
    time: "2022-02-18"
  }]
  //已结清
  productParamlist = [{
    productname: "'llll'流动之星贷款",
    money: "30",
    guarantee: "担保",
    status: 3,
    month: "12",
    time: "2022-02-18"
  }]

  //点击还款计划事件
  onClickDetails(status:any) {
    this.$router.push({
      name: "AccommodDetails",
      params:{
        status:status
      }
    })
  }
  //点击body事件
  onClickPicket() {
    this.$router.push({
      name: "Repaymentlond"
    })
  }
  toTrial() {
    this.$router.push({
      name: "DepositInterestTrial"
    });
  }
}


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

.acced {
  width: 100%;
  height: 20%;
}
</style>