黄尔冬 / net_iou

<template>
	<v-layout id="confirmedCredit" column justify-center align-center>
    <v-flex>
      <v-card class="infoCards" flat height="6rem">
        <v-card-title class="infoCardsTitle" >
          <div class="infoCardsName">借款人：{{creditor}}</div>
          <div class="infoCardsDetail" @click="$router.push(`/borrowContent?id=${info.id}`)">查看详情<v-icon>keyboard_arrow_right</v-icon></div>          
        </v-card-title>
        <v-card-text class="infoCardsContent" >
          <div class="infoCardsContentBlock total">
            <div class="infoCardsContentKey">待收总额</div>
            <div class="infoCardsContentValue">{{total}}元</div>              
          </div>
          <div class="infoCardsContentBlock amount">
            <div class="infoCardsContentKey">出借本金</div>
            <div class="infoCardsContentValue">{{info.amount}}元</div>                            
          </div>
          <div class="infoCardsContentBlock interest">
            <div class="infoCardsContentKey">利息</div>
            <div class="infoCardsContentValue">{{interest}}元</div>                            
          </div>
        </v-card-text>
      </v-card>
      <v-card class="BorrowList" id="BorrowListContent" flat >
        <v-tabs v-model="active" color="toolbarGrey" centered grow dark slider-color="gold">
          <v-tab :key="1" ripple>待收金额</v-tab>
          <v-tab :key="2" ripple>
            <v-badge color="red" :value="!!badgeNumber">
              <span slot="badge">{{badgeNumber}}</span>
              收款记录
            </v-badge>
          </v-tab>
          <v-tab :key="3" ripple>展期记录</v-tab>
          <v-tab-item :key="1">
            <v-card id='waitToPay' class="itemsCard">
              <div class="waitToPayInfo">
                <v-progress-circular
                  id="progress"
                  :size="cycleSize"
                  :width="10"
                  :rotate="270"
                  :value="circularValue"
                  :color="circularValueColor"
                >
                  <div class="InfoBlock">
                    <div class="InfoBlockTitle">待收金额</div>
                    <div class="total">{{total}}元</div>
                    <div class="timeRemain">
                      <span v-if="info.status === '已生效'">剩余{{info.timeRemain}}天</span>
                      <span class="orange--text text--darken-3" v-if="info.status === '已逾期'">已逾期{{info.timeRemain}}天</span>                    
                    </div>
                  </div>
                </v-progress-circular>
                <v-btn depressed class="btn-deep" v-if="info.status !== '已还清'" @click="writeOffsConfirm">销账</v-btn>
                <v-btn depressed class="btn-deep" v-if="info.status !== '已还清'" @click="$router.push(`/extensionPreiod?id=${info.id}`)">展期</v-btn>
                <v-btn depressed class="btn-light" @click="$router.push(`/report?id=${info.id}`)">举报违法</v-btn>  
              </div>
            </v-card>
          </v-tab-item>
          <v-tab-item :key="2">
            <v-card id='payRecordTitle' class="itemsCard">
              <v-list class="list">
                <v-list-tile class="listTitle listLine">
                  <v-list-tile-content class="BorrowListTitle">收款日期</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">还款人姓名</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">收款金额</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">收款状态</v-list-tile-content>                  
                </v-list-tile>
              </v-list>
            </v-card>
            <v-card id='payRecord' class="itemsCard" height="60vh">
              <v-list class="list">
                <v-list-tile class="listLine" v-if="!repayments.length">
                  <v-list-tile-content class="BorrowListTitle noData">暂无数据</v-list-tile-content>               
                </v-list-tile>
                  <v-list-tile class="listLine" v-for="(item, index) in repayments" :key="index" @click="showRepaymentPopUp(item)">
                    <v-list-tile-content class="BorrowListTitle">{{dateParse(item.repayment_date)}}</v-list-tile-content>
                    <v-list-tile-content class="BorrowListTitle">{{borrower}}</v-list-tile-content>
                    <v-list-tile-content class="BorrowListTitle">{{item.amount}}</v-list-tile-content>
                    <v-list-tile-content class="BorrowListTitle" :class="item.status === '待确认' ? 'orange--text' : ''">{{item.status}}</v-list-tile-content>                  
                  </v-list-tile>
              </v-list>
            </v-card>
          </v-tab-item>
          <v-tab-item :key="3">
            <v-card id='payRecordTitle' class="itemsCard">
              <v-list class="list">
                <v-list-tile class="listTitle listLine">
                  <v-list-tile-content class="BorrowListTitle">金额</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">利率</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">时间</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">状态</v-list-tile-content>                  
                </v-list-tile>
              </v-list>
            </v-card>
            <v-card id='payRecord' class="itemsCard" height="60vh">
              <v-list class="list">
                <v-list-tile class="listLine" v-if="!extendPreiod.length">
                  <v-list-tile-content class="BorrowListTitle noData">暂无数据</v-list-tile-content>               
                </v-list-tile>
                <v-list-tile class="listLine" v-for="(period, index) in extendPreiod" :key="index">
                  <v-list-tile-content class="BorrowListTitle">{{period.amount}}</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">{{Math.floor(period.rate* 100)}}%</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">{{dateParse(period.start_date)}}<br/>-{{dateParse(period.end_date)}}</v-list-tile-content>
                  <v-list-tile-content class="BorrowListTitle">{{period.status}}</v-list-tile-content>                  
                </v-list-tile>
              </v-list>
            </v-card>
          </v-tab-item>
        </v-tabs>
      </v-card>
      <v-card id="ConfirmBlock" >
        <div class="repaymentConfirm" v-show="active === '1' && !!badgeNumber">
          <v-btn depressed :loading="isLoading" class="btn-deep" @click="repaymentConfirmHint()">确认收款</v-btn>                            
          <v-btn depressed :loading="isLoading" class="btn-light" @click="passwordCheck('repaymentReject')">驳回收款</v-btn>
        </div>
      </v-card>
      <div id="FuckIphoneX"></div>
    </v-flex>
    <v-dialog  v-model="dialogDisplay" persistent max-width="290">
      <v-card class="hintDialog">
        <v-card-title class="headline">提示</v-card-title>
        <v-card-text class='dialogContent'>
          <p>{{dialogContent}}</p>
          </v-card-text>          
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="black" flat @click.native="dialogDisplay = false">取消</v-btn>
          <v-btn color="black" flat @click.native="passwordCheck('')">确认</v-btn>            
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-bottom-sheet v-model="passwordPannelDisplay" full-width>
       <PasswordInputer :display="passwordPannelDisplay" @passwordSubmit="passwordSubmit"/>
    </v-bottom-sheet>
  </v-layout>
</template>


<script>
import PasswordInputer from '@/components/PasswordInputer'
import {wechatShareSetting, dateParse, interestWithDamage, interest } from '@/helper'

export default {
  async asyncData({store, query, app, redirect}) {
    let {data} = await app.$axios.get(`/confirmedInfo?kind=credit&id=${query.id}&userId=${store.state.user.id}`)
    if (data.success) {
      return {info: data.info, active: query.active || '0'}
    } else {
      store.dispatch('displayMessage', data.msg)
      redirect(301, '/')
      return
    }
  },
  data:() => ({
    dialogDisplay: false,
    passwordPannelDisplay: false,
    repaymentPopUpDisplay: false,
    isLoading: false,
    passwordSubmit: {},
    dialogContent: '',
    redirect: '',
    cycleSize: 250,
    active: null,
    targetRepaymentId: '',
  }),
  watch: {
    '$route' (to, from) {
      this.active = to.query.active || '0'
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user
    },
    extendPreiod() {
      return (this.info.periods || [])
    },
    repayments() {
      return (this.info.repayment_records || [])
    },
    borrower() {
      return (this.info.Borrower ? this.info.Borrower.name : '')
    },
    creditor() {
      return (this.info.Creditor ? this.info.Creditor.name : '')
    },
    badgeNumber() {
      return this.repayments.filter((item) => (item.status === '待确认')).length
    },
    circularValue() {
      if (this.info.status === '已生效') {
        return (this.info.timeRemain / this.info.duration) * 100
      }
      return 100
    },
    circularValueColor() {
      if (this.info.status === '已逾期') {
        return 'red'
      }
      if (this.info.status === '已还清') {
        return 'blue'
      }
      return 'gold'
    },
    interest() {
      if (this.info.status === '已逾期') {
        return interestWithDamage(this.info.amount, this.info.rate, this.info.startDate, this.info.endDate)
      }
      return interest(this.info.amount, this.info.rate, this.info.startDate, this.info.endDate)
    },
    total() {
      if (this.info.status === '已还清') return 0
      return Math.floor((this.info.amount + this.interest) * 100) / 100
    }
  },
  head:() => ({
    title: '借出详情'
  }),
  components: {
    PasswordInputer
  },
  mounted() {
    let windowHeight = document.body.offsetHeight 
    if (windowHeight < 600) {
      this.cycleSize = 210
    }
    wechatShareSetting(this.$axios, this.$store)
  },
  methods: {
    async getData() {
      let {data} = await this.$axios.get(`/confirmedInfo?kind=credit&id=${this.info.id}&userId=${this.$store.state.user.id}`)
      if (data.success) {
        this.info = data.info
      } else {
        store.dispatch('displayMessage', data.msg)
      }
    },
    dateParse: dateParse,
    showRepaymentPopUp(item) {
      if (item.status === '待确认') {
        this.targetRepaymentId = item.id        
        this.repaymentPopUpDisplay = true
      }
    },
    passwordCheck(type = '') {
      this.dialogDisplay = false
      switch (type) {
        case 'repaymentConfirm':
          this.passwordSubmit = this.repaymentConfirm
          break
        case 'repaymentReject':
          this.passwordSubmit = this.repaymentReject          
          break
        case 'writeOffs':
          this.passwordSubmit = this.writeOffs          
          break
      }
      this.passwordPannelDisplay = true      
    },
    writeOffsConfirm() {
      this.dialogContent = '销账之后该借条不可恢复，且默认借款人已经还款，确认要销账吗？'
      this.passwordSubmit = this.writeOffs
      this.dialogDisplay = true
    },
    repaymentConfirmHint() {
      this.dialogContent = '确认收款之后该借条不可恢复，请确保借款人已还款！'
      this.passwordSubmit = this.repaymentConfirm
      this.dialogDisplay = true
    },
    async writeOffs(password) {
      this.passwordPannelDisplay = false
      this.isLoading = true
      const {data} = await this.$axios.post('/iou/writeOffs', {
        userId: this.userInfo.id,
        id: this.info.id,
        password: password,
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', '销账成功')        
        this.getData()
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    },
    async repaymentConfirm(password) {
      this.passwordPannelDisplay = false
      this.isLoading = true
      const {data} = await this.$axios.post('/iou/repaymentConfirm', {
        userId: this.userInfo.id,
        id: this.info.id,
        password: password,
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', '确认收款成功')  
        return this.getData()
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    },
    async repaymentReject(password) {
      this.passwordPannelDisplay = false
      this.isLoading = true
      const {data} = await this.$axios.post('/iou/repaymentReject', {
        userId: this.userInfo.id,
        id: this.info.id,
        password: password,
      })
      this.isLoading = false
      if (data.success) {
        this.$store.dispatch('displayMessage', '驳回收款成功')
        return this.getData()            
      } else {
        this.$store.dispatch('displayMessage', data.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #confirmedCredit {

    /deep/ .toolbarGrey {
      background-color: #3A424A !important;
    }

    /deep/ .gold {
      background-color: #dabb84 !important;
    }

    .infoCards {
      background-color: $toolbar-grey;
      color: $gold;
      border-radius: 2px;
      margin-bottom: 1rem;
      position: relative;
      overflow:hidden;      

      .infoCardsTitle {
        height: 3rem;
        box-sizing: border-box;
        line-height: 3rem;
        padding: 0;
        border-bottom: 1px solid $gold;

        .infoCardsName {
          width: 50%;
          padding-left: 0.8rem;
          font-size: 16px;
        }

        .infoCardsDetail {
          width: 50%;
          padding-right: 0.8rem;
          font-size: 16px;
          text-align: right;
          i {
            color: $gold;
          }
        }  
      }

      .infoCardsContent {
        width: 100%;
        padding: 0.3rem 0 0 0;

          .infoCardsContentBlock {
            width: 33%;
            display: inline-block;
            text-align: center;


            .infoCardsContentKey {
              font-size: 0.8rem;
              color: #fff;
            }

            .infoCardsContentValue {
              font-size: 0.8rem;
              color: $gold;
              margin: auto;
            }
          }
      }
    }
    /deep/ .tabs__items {
      background-color: $background-black;
    }

    .itemsCard {
      // height: 50vh;
      width: 100vw;
      // margin: 3vh auto 0 auto;
      background-color: $background-black;
    }

    #waitToPay {
      
      .waitToPayInfo {
        width: 100%;
        text-align: center;
        padding-top: 3vh;

        #progress {
          width: 100% !important;
        }

        .InfoBlockTitle {
          color: #fff;
          font-size: 2rem;
          font-weight: 400;
        }

        .total {
          font-size: 2rem;
          color: $light-gold;
        }

        .timeRemain {
          color: #fff;
        }

        .btn-deep {
          width: 42%;
          margin-top: 2rem;
          height: 3rem;
          background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
          color: $toolbar-grey;
        }

        .btn-light {
          background-color: $toolbar-grey;
          width: 90%;
          margin-top: 1rem;
          height: 3rem;
          color: $light-gold;
          border: 1px solid $light-gold;
        }

      }
    }

    #payRecord {
      overflow: auto;
      height: 100%;
    }

    .BorrowList {
      width: 100vw;
      margin-top: 1.1rem;
      border-top: 1px solid #666;

      .list {
        padding: 0;
        background-color: $toolbar-grey;

        .listLine.listTitle {
          background-color: $background-black;
          color: #fff;
        }

        .listLine {
          background-color: $light-background-grey;
          color: $background-black;
          border-bottom: 1px solid #ccc;
        }

        .BorrowListTitle {
          font-size: 0.8rem;
          width: 25%;
          align-items: center;
        }
      }
    }

    #ConfirmBlock {
      width: 100vw;
      border-top: 1px solid #979797;
      background-color: $toolbar-grey;
      position: fixed;
      bottom: 0;
      text-align: right;
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);

      button {
        height: 2.5rem;
      }
      .btn-light {
        background-color: $toolbar-grey;
        color: $light-gold;
        border: 1px solid $light-gold;
      }

      .btn-deep {
        background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
        color: $toolbar-grey;
      }
      
    }

    #FuckIphoneX {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
      background-color: #39424a;
    }
  }
  .hintDialog {
    background-color: #fff;
    color: #000;
    .headline {
      justify-content: center;
      font-weight: bold;
      padding-bottom: 0;
    }
    .dialogContent {
      justify-content: center;  
      text-align: center;

      .warningIcon {
        margin-bottom: 0.5rem;
        color: red;
        font-size: 5rem;
      }
      .bold {
        font-weight: bold;
      }

      p {
        margin-bottom: 0;
      }
    }
    .btn {
      width: 100%;
    }

    
  }
  .popUpItem {
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
  }
</style>