<template>
    <div id="financeClaimDetail">
        <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">
                        <financeClaimsForm
                                :ruleForm="ruleForm"
                                :dbList="dbList"
                                :hkList="hkList"
                                :lxList="lxList"
                                :sxList="sxList"
                                :insList="insList"
                                :loading="loading"
                                @submitForm="submitForm"
                                @resetForm="resetForm"
                        ></financeClaimsForm>
                    </el-col>
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import topInfo from '@/layout/common/topInfoadd.vue';
  import detailTop from '@/layout/common/detailTop.vue';
  import financeClaimsForm from '@/layout/financeclaims/financeClaimsFormadd.vue';
  import { createNamespacedHelpers, mapGetters, mapState } from 'vuex';
  const { mapActions: financeclaims } = createNamespacedHelpers('financeclaimadd');
  const { mapActions :finalinstitution} = createNamespacedHelpers('institution');
  export default {
    name: 'financeClaimDetail',
    props: {},
    components: {
      topInfo, //头部导航
      detailTop, //头部返回
      financeClaimsForm, //添加债权产品
    },
    data: () => ({
      display: 'none',
      topTitle: '债权产品信息',
      loading: true,
      ruleForm: {
        news: [
          {
            news_name: '',
            news_info: '',
          },
        ],
        cattribute: [],
      },
      dbList: [
        { name: '抵押', code: '2201' },
        { name: '质押', code: '2202' },
        { name: '信用', code: '2203' },
        { name: '保证', code: '2204'},
      ],
      hkList: [
        { name: '等额本息', code: '2301' },
        { name: '等额本金', code: '2302' },
        { name: '一次性利随本清', code: '2303' },
      ],
      lxList: [
        { name: '抗疫', code: '2401' },
        { name: '科创', code: '2402' },
      ],
      sxList:[
        {name: '期限长',code: '2501'},
        {name: '速度快',code: '2502'},
        {name: '利率低',code: '2503'},
        {name: '通过率高',code: '2504'},
        {name: '额度高',code: '2505'},
      ],
      insList:[],
    }),
    created() {
      this.searchInfo();
      this. searchinstitution();
    },
    computed: {
      ...mapState(['user']),
      id() {
        return this.$route.query.id;
      },
    },
    methods: {
      ...financeclaims(['fclaimsList', 'orUpdate', 'dupdate', 'create', 'fetch', 'update']),
      ...finalinstitution({instquery:'query'}),
      async searchInfo(){
        this.$set(this, `loading`, false);
        if (this.id) {
          const res = await this.fetch(this.id);
          this.$set(this, `ruleForm`, res.data);
        }
        this.$set(this, `loading`, true);
      },
      async searchinstitution() {
        const res = await this.instquery();
        this.$set(this, `insList`, res.data);
      },
      // 提交
      async submitForm({ data }) {
        let res;
        let befupdate;
        let finaldata;
        if (this.id) {
          var orupdate = {};
          orupdate.finid = this.id;
          befupdate = await this.orUpdate(orupdate);
          if (befupdate.data.status == 'SUCCESS') {
            res = await this.update(data);
            if (res.errcode === 0) {
              this.$message({
                message: '信息修改成功',
                type: 'success',
              });
            }
          } else {
            this.$message({
              message: '该消息已发布不可修改',
              type: 'error',
            });
          }
        } else {
          finaldata = data;
          res = await this.create(finaldata);
          if (res.errcode === 0) {
            this.$message({
              message: '信息创建成功',
              type: 'success',
            });
          }
        }
        if (this.$checkRes(res)) this.resetForm();
        console.log(res.data);
      },
      // 取消
      resetForm() {
        this.$router.push({ path: '/financeclaims/financeClaimIndexadd' });
      },
      // 返回
      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>
