<template>
    <div id="loanProLookDetail">
        <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">
                        <loanProLookForm :ruleForm="ruleForm" :dbList="dbList" :hkList="hkList" @submitForm="submitForm" @resetForm="resetForm"></loanProLookForm>
                    </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 loanProLookForm from '@/layout/financeclaims/loanproLookForm.vue';
  import { createNamespacedHelpers, mapGetters ,mapState} from 'vuex';
  const { mapActions: loanpro} = createNamespacedHelpers('loanpro');
  export default {
    name: 'loanProLookDetail',
    props: {},
    components: {
      topInfo, //头部导航
      detailTop, //头部返回
      loanProLookForm, //贷款产品详情
    },
    data: () => ({
      display: 'none',
      topTitle: '贷款产品信息',
      ruleForm: {},
      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: {
      ...mapState(['user']),
      id() {
        return this.$route.query.id;
      },
    },
    methods: {
      ...loanpro(['fetch',]),
      async searchInfo() {
        if (this.id) {
          const res = await this.fetch(this.id);
          this.$set(this, `ruleForm`, res.data);
        }
      },
      // 返回
      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>
