<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-28 14:56:06
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="body">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>

    <scroller-view v-calculate-height pulldown="true" :height="10000">
      <div>
        <div class="layout">
          <van-row type="flex" class="CoolName">
            <van-col span="24" class="coollayout">个人信息</van-col>
          </van-row>
          <div class="layoutbody">
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field
                    label="身份证号"
                    v-model="idcard"
                    input-align="right"
                  />
                </van-cell-group>
              </van-col>
            </van-row>
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field label="姓名" v-model="name" input-align="right" />
                </van-cell-group>
              </van-col>
            </van-row>
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field label="电话" v-model="phone" input-align="right" />
                </van-cell-group>
              </van-col>
            </van-row>
          </div>
          <van-row type="flex" class="CoolName">
            <van-col span="24" class="coollayout">借款信息</van-col>
          </van-row>
          <div class="layoutbody">
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field
                    label="贷款品种"
                    v-model="varieties"
                    input-align="right"
                  />
                </van-cell-group>
              </van-col>
            </van-row>
      

               <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field label="借款金额" v-model="amount" input-align="right" />
                </van-cell-group>
              </van-col>
            </van-row>
            <!-- <van-row type="flex" class="layoutName">
            <van-col span="24">
              <van-cell-group>
                <van-field label="借款期限" :value="borrow" input-align="right" />
              </van-cell-group>
            </van-col>
          </van-row> -->
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-field
                  is-link
                  readonly
                  :value="loanValue"
                  label="借款用途"
                  input-align="right"
                  placeholder="请选择借款用途"
                  @click="showLoan = true"
                />
                <van-popup v-model="showLoan" round position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="loanList"
                    @cancel="showLoan = false"
                    @confirm="onConfirmLoan"
                  />
                </van-popup>
              </van-col>
            </van-row>
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-field
                  :value="outcsinfo.place"
                  is-link
                  readonly
                  label="意向地区"
                  input-align="right"
                  placeholder="请选择所在地区"
                  @click="onAddress"
                />
                <van-popup v-model="showAddress" position="bottom">
                  <van-area
                    title="请选择地区"
                    @confirm="changeAddress"
                    :area-list="areaList"
                    columns-num="3"
                  />
                </van-popup>
              </van-col>
            </van-row>

            <van-divider :style="{ margin: 0 }"></van-divider>

            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-field
                  is-link
                  readonly
                  :value="orgValue"
                  label="意向机构"
                  input-align="right"
                  placeholder="请选择意向机构"
                  @click="showOrg = true"
                />
                <van-popup v-model="showOrg" round position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="orgList"
                    @cancel="showOrg = false"
                    @confirm="onConfirmOrg"
                  />
                </van-popup>
              </van-col>
            </van-row>

            <van-divider :style="{ margin: 0 }"></van-divider>

            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-field
                  is-link
                  readonly
                  :value="mangerValue"
                  label="意向客户经理"
                  input-align="right"
                  placeholder="请选择意向客户经理"
                  @click="showManager = true"
                />
                <van-popup v-model="showManager" round position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="mangerList"
                    @cancel="showManager = false"
                    @confirm="onConfirmManager"
                  />
                </van-popup>
              </van-col>
            </van-row>

            <van-divider :style="{ margin: 0 }"></van-divider>
            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-field
                    readonly
                    label="客户经理电话"
                    v-model="phoneCard"
                    input-align="right"
                    
                  />
                </van-cell-group>
              </van-col>
            </van-row>

            <van-row type="flex" class="layoutName">
              <van-col span="24">
                <van-cell-group>
                  <van-button
                    class="vbutton"
                    size="normal"
                    block
                    type="info"
                    style="
                      width: 92%;
                      margin: 0px 4%;
                      background-color: #3672f1;
                      border-radius: 5px;
                    "
                    @click="recognition()"
                    >立即提交</van-button
                  >
                </van-cell-group>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </scroller-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
 * title
 */

import { Picker, Toast } from "vant";
import { area } from "../../model/domain/areaData";
import { Area } from "vant";
import applicationApi from "@/constants/api/ms-application/application.api";
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/general/code.enum";
import { RestfulResponse } from "@/model/domain/RestfulResponse";
Vue.use(Picker);

@Component({
  name: "Intention",
})
export default class Intention extends Vue {
  tatleName = "产品意向申请";
  //身份证
  idcard = "23232111978221";
  //姓名
  name = "刘明明";
  //电话
  phone = "";
  //贷款详情
  varieties = "一般经营性贷款"; 
  //借款金融
  amount = null;
  //借款期限
  // borrow = "24月"
  //借款用途
  purposes = "";
  //业务办理地区
  // area = "黑龙江省-哈尔滨市-松北区"
  //意向机构
  intentions = "";
  //客户经理
  customer = "";
  //客户经理电话
  phoneCard: any = "";
  //地区
  show = false;
  fieldValue = "";
  cascaderValue = "";

  showOrg = false;
  orgValue = "";

  showManager = false;
  mangerValue = "";
  mangerList = ["吕晨涛", "龙易轩", "范丽", "雷娟", "郝芳"];
  //phoneCardList = [["吕晨涛","13332323232"],["龙易轩","12321212121"],["范丽","15673989898"],["雷娟","15673981198"], ["郝芳","15622981198"]];
  phoneCardList = new Map([
    ["吕晨涛", "13332323232"],
    ["龙易轩", "12321212121"],
    ["范丽", "15673989898"],
    ["雷娟", "15673981198"],
    ["郝芳", "15622981198"],
  ]);
  //机构列表
  orgList = ["哈尔滨道里区支行", "哈尔滨松北区支行"];

  areaList = area;
  outcsinfo = {
    place: "请选择地区", //出行地点
  };
  showAddress = false;

  created(){
    //如果之前申请过业务进行数据反显
    this.getInfo();

  };

  

  //借款用途
  loanValue = "";
  showLoan = false;
  loanList = ["消费", "经营"];

  onAddress() {
    this.showAddress = true;
  }
  // 点击地址选择框的确认
  changeAddress(event: any) {
    // console.log(event,'返回格式数组')
    this.showAddress = false;
    let st = "";
    event.forEach((item: any) => {
      st = st + item.name;
    });
    this.outcsinfo.place = st;
  }

  onConfirmLoan(loanValue: string) {
    this.loanValue = loanValue;
    this.showLoan = false;
  }

  onConfirmOrg(orgValue: string) {
    this.orgValue = orgValue;
    this.showOrg = false;
  }

  onConfirmManager(mangerValue: string) {
    this.mangerValue = mangerValue;
    this.phoneCard = this.phoneCardList.get(mangerValue);
    this.showManager = false;
  }
  // 选项列表，children 代表子选项，支持多级嵌套
  // options = [
  //   {
  //     text: '浙江省',
  //     value: '330000',
  //     children: [{ text: '杭州市', value: '330100' }],
  //   },
  //   {
  //     text: '江苏省',
  //     value: '320000',
  //     children: [{ text: '南京市', value: '320100' }],
  //   },
  // ]
  //   onFinish() {
  //   this.show = false;
  //   this.fieldValue = selectedOptions.map((option) => option.text).join('/');
  // }
  //获取反显信息
  getInfo(){
 
      applicationApi.getInfo.url=applicationApi.getInfo.url+"/"+this.idcard;
      // console.log(applicationApi.getInfo.url)
      apiService.general(applicationApi.getInfo, {},undefined, undefined).then((response: RestfulResponse) => {
        // console.log(response);
        if (response.code == Code.SUCCESS.code) {
          this.phone =response.data.phone;
          this.amount=response.data.applyAmt;
          this.loanValue=response.data.loanUseType;
          //todo 地区
          this.orgValue=response.data.handleOrg;
          this.mangerValue=response.data.accountManager; 
          this.phoneCard=response.data.managerPhone

        }
        Toast(response.msg + "");
      });
  }

  recognition() {
      let param = {
        accountManager:this.mangerValue,//客户经理
        managerPhone:this.phoneCard,//客户电话
        applyAmt:this.amount ,//申请金额
        custName:this.name,//客户姓名
        handleOrg:this.orgValue,//意向机构
        loanUseType:this.loanValue,//借款用途
        paperId:this.idcard,//身份证号
        phone:this.phone,//客户电话
        productName:this.varieties,//产品名称


        // loginNo: this.phone,
        // //短信验证码TODO
        // phoneVerifyCode: this.sms,
        // //数字渠道
        // method: "3",
        // pwd: this.password,
        // serviceAgreeStatus: this.checked
      };
      apiService.general(applicationApi.savePersBusiAccept, undefined, param, undefined).then((response: RestfulResponse) => {
        console.log(response);
        if (response.code == Code.SUCCESS.code) {
           this.$router.push({
            path: `/LinSuccess`,
            
          })
        }
        Toast(response.msg + "");
      });
  }
}
</script>
<style scoped lang="scss">
.layout {
  background: rgba(249, 249, 249, 1);
}

.coollayout {
  margin: 3%;
}

.CoolName {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
}

.layoutName {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
}
</style>
