<template>
      <div class="detail-wrap" >
        <div class="sticky-wrap">
          <div class="header-wrap">
            <div class="left-wrap">
                <svg-icon iconClass="document" class="header-icon"></svg-icon>
                <div class="header-content">
                  <div class="title">利率定价申请</div>
                  <div class="date">创建时间:2025-12-13</div>
                </div>
              </div>     
              <div class="btn-wrap">
                <el-button  type="primary" @click="SubmitForm">提交</el-button>
              </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="card-wrap" style="margin-top: 0px">
            <div class="title-bar">
              <div class="content">基本信息</div>
            </div>
            <!-- <el-divider></el-divider> -->
            <el-form :column="2"  border  class="custom-form" :model="form" label-width="300px">
              <el-row>
                  <el-col :span="12">
                    <el-form-item label="客户类型">
                      <el-radio-group v-model="form.custType">
                          <el-radio label="个人">个人</el-radio>
                          <el-radio label="企业">企业</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户内码">
                      <el-input v-model="form.custIsn" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户名称">
                      <el-input v-model="form.custName" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件类型">
                      <el-select v-model="form.idType" placeholder="请选择证件类型">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件号">
                      <el-input v-model="form.idNo" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请金额">
                      <el-input v-model="form.applyAmt" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="担保方式">
                      <el-select v-model="form.guarType" placeholder="请选择担保方式">
                          <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="抵押物类型">
                      <el-select v-model="form.collType" placeholder="请选择抵押物类型">
                          <el-option v-for="item in colloptions" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="抵质押物是否三方所有">
                      <el-radio-group v-model="form.collThirdParty">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="贷款用途">
                      <el-radio-group v-model="form.loanPurpose">
                          <el-radio label="经营">经营</el-radio>
                          <el-radio label="消费">消费</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否有经营佐证">
                      <el-radio-group v-model="form.bizProof">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="贷款产品ID">
                      <el-input v-model="form.loanProdId" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="贷款产品">
                      <el-input v-model="form.loanProd" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="当日办理业务">
                      <el-input v-model="form.todayBiz" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否净身企业">
                      <el-radio-group v-model="form.isCleanEnt">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否制造业企业">
                      <el-radio-group v-model="form.isManufacturing">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否省农担担保贷款">
                      <el-radio-group v-model="form.isAgriGuar">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否纳税信用等级A级">
                      <el-radio-group v-model="form.isTaxA">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否县级及以上农业龙头企业">
                      <el-radio-group v-model="form.isAgriLeading">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请机构ID">
                      <el-input v-model="form.orgCode" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请机构名称">
                      <el-input v-model="form.orgName" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请人ID">
                      <el-input v-model="form.applyUserCode" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申请人姓名">
                      <el-input v-model="form.applyUserName" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否开立基本结算账户">
                      <el-radio-group v-model="form.hasSettleAcct">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否普惠小微借款人">
                      <el-radio-group v-model="form.isInclusiveFinance">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
          </div>
      </div>
</template>
<script>
import {applicationSubmit} from '@/api/gridSearch/publicPool/index';
import store from "@/store";
export default{
  data() {
    return {
      url:process.env.VUE_APP_NEW_URL,
      form:{
        custType:'',
        custIsn:'',
        custName:'',
        idType:'',
        idNo:'',
        applyAmt:'',
        guarType:'',
        collType:'',
        collThirdParty:'',
        loanPurpose:'',
        bizProof:'',
        loanProd:'',
        loanProdId:'',
        isCleanEnt:'',
        todayBiz:'',
        isManufacturing:'',
        isAgriGuar:'',
        isTaxA:'',
        isAgriLeading:'',
        orgCode:'',
        orgName:'',
        applyUserCode:'',
        applyUserName:'',
        hasSettleAcct:'',
        isInclusiveFinance:'',
      },
      options:[
        {label:'身份证',value:'身份证'},
        {label:'社会统一信用代码',value:'社会统一信用代码'},
      ],
      typeoptions:[
        {label:'信用',value:'信用'},
        {label:'保证',value:'保证'},
        {label:'抵押',value:'抵押'},
        {label:'质押',value:'质押'},
      ],
      colloptions:[
        {label:'一线',value:'一线'},
        {label:'一类',value:'一类'},
        {label:'二类',value:'二类'},
      ]
    }
  },
  methods:{
    SubmitForm() {
      // const emptyFields = [];
      // Object.keys(this.form).forEach(key => {
      //   if (!this.form[key] || this.form[key].toString().trim() === '') {
      //     emptyFields.push(key);
      //   }
      // });
      
      // if (emptyFields.length > 0) {
      //   this.$message.warning('表单填写不完整，请检查所有字段是否已填写');
      //   return;
      // }
      
      applicationSubmit(this.form,this.url).then(res =>{
        if(res.data.code === 200){
        Object.keys(res.data.data).forEach(key =>{
          this.form[key] = res.data.data[key]
        })
          store.commit('SET_RATEDETAIL',res.data.data)
          this.$message.success('操作成功')
          this.$router.push('/rate/ratereport')
        }else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-wrap {
  width: 100%;
  padding-bottom: 20px;
}

.detail-wrap .sticky-wrap {
  position: sticky;
  padding-bottom: 20px;
}

.detail-wrap .header-wrap {
  padding: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.detail-wrap .header-wrap .left-wrap {
  display: flex;
  align-items: center;
}

.detail-wrap .header-wrap .left-wrap .header-icon {
  width: 36px;
  height: 36px;
  fill: #4682ff;
  margin-right: 10px;
}

.detail-wrap .header-wrap .left-wrap .header-content .title {
  color: #010101;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
}

.detail-wrap .header-wrap .left-wrap .header-content .date {
  margin-top: 5px;
  color: #595959;
  font-size: 14px;
}

.btn-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.card-wrap {
  .title-bar {
    width: 100%;
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .content {
      padding: 0;
      position: relative;
      padding-left: 15px;
      color: #010101;
      font-size: 18px;
      font-weight: 600;
      line-height: 20px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: #1890ff;
      }

      .tip {
        color: #a6a6b2;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
  ::v-deep .summary-item {
    color: #010101;
    font-weight: 600;
  }

  ::v-deep .summary-approval-label {
    color: #e6a23c;
    font-weight: 600;
  }
  
  ::v-deep .summary-approval-content {
    color: #e6a23c;
    font-weight: 600;
  }
  ::v-deep .custom-form {
    width: 100%;
    border-radius: 4px;
    padding: 20px;
    
    .el-form-item {
      width: 100%;
      display: inline-block;
      border: 1px solid #e6ebf5;
      margin-bottom: 0;
      .el-form-item__label {
        background-color: #fafafa;
        padding: 10px;
        text-align: center;
      }
      
      .el-form-item__content {
        padding-top: 10px;
        text-align: center;
        .el-input__inner{
          border: none;
        }
      }
    }
  }

  .btn-wrap {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  .approval-type {
    display: flex;
  }
  
  .chart-table-wrap {
    display: flex;

    .chart-wrap {
      width: 400px;
      height: 400px;
      margin-right: 10px;
    }

    .table-wrap {
      width: 700px;

      .calc-table {
        width: 100%;
        font-size: 14px;
        border-collapse: collapse;

        th {
          width: 25%;
        }
        
        th,
        td {
          text-align: center;
          border: 1px solid #e6e8ee;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);
          line-height: 22px;
          padding: 12px 25px;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
