<template>
    <div id="loanfollowDetail">
        <el-row>
            <el-col :span="24" class="debt">
                <el-col :span="24" class="top">
                    <topInfo :topTitle="topTitle" :display="display"></topInfo>
                </el-col>
                <el-col :span="24" class="main">
                    <el-col :span="24" class="back">
                        <detailTop @goBack="goBack"></detailTop>
                    </el-col>
                    <el-col :span="24" class="info">
                        <loanfollowForm :ruleForm="followForm" :dbList="dbList" :hkList="hkList" @shouxin = "shouxin"></loanfollowForm>
                    </el-col>
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import topInfo from '@/layout/common/topInfoloan.vue';
  import detailTop from '@/layout/common/detailTop.vue';
  import loanfollowForm from '@/layout/financeclaims/loanfollowForm.vue';
  import { createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: loanfollow } = createNamespacedHelpers('loanfollow');
  export default {
    name: 'loanfollowDetail',
    props: {},
    components: {
      topInfo, //头部导航
      detailTop, //头部返回
      loanfollowForm, //关注债权需求详情
    },
    data: () => ({
      display: 'none',
      topTitle: '关注债权需求详情',
      followForm: {},
      charList: {
        name: '10',
      },
      dbList: [
        { name: '抵押', code: '2201' },
        { name: '质押', code: '2202' },
        { name: '信用', code: '2203' },
        { name: '保证', code: '2204'},
      ],
      hkList: [
        { name: '等额本息', code: '2301' },
        { name: '等额本金', code: '2302' },
        { name: '一次性利随本清', code: '2303' },
      ],
    }),
    created() {
      this.searchInfo();
    },
    computed: {
      id() {
        return this.$route.query.id;
      },
    },
    methods: {
      ...loanfollow(['credit','loanfOne']),
      async searchInfo() {
        if (this.id) {
          const res = await this.loanfOne({id:this.id});
          this.$set(this, `followForm`, res.data);
        }
      },
      // 授信
      async shouxin() {
        this.$prompt('请输入授信额度（万元）', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
          inputErrorMessage: '请输入正确金额'
        })
          .then(({ value }) => {
            this.finalSx(value);
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      async finalSx(value){
        const res = await this.credit({id:this.id,money:value});
        this.$checkRes(res, '授信成功', '授信失败');
        this.$router.go(-1);
      },
      // 返回
      goBack() {
        this.$router.go(-1);
      },
    },
  };
</script>

<style lang="less" scoped>
    .debt {
        padding: 20px;
    }
    .top {
        border-bottom: 1px solid #ccc;
    }
    .main {
        border-radius: 10px;
        margin: 20px 0 0 0;
        box-shadow: 0 0 3px #666;
    }
    .main .back {
        padding: 10px 0 10px 15px;
    }
</style>
