<!--
 * @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>
    <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="身份证号" :value="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="姓名" :value="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="电话" :value="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="贷款品种" :value="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="借款金额" :value="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-cell-group>
                <van-field label="借款用途" :value="purposes" input-align="right" />
              </van-cell-group>
            </van-col>
          </van-row>
          <van-row type="flex" class="layoutName">
            <van-col span="24">
              <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
              <van-popup v-model="show" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
                  @finish="onFinish()" />
              </van-popup>
            </van-col>
          </van-row>

          <van-row type="flex" class="layoutName">
            <van-col span="24">
              <van-cell-group>
                <van-field label="客户经理" :value="customer" 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="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" block type="info" @click="recognition()">立即提交</van-button>
              </van-cell-group>
            </van-col>
          </van-row>
        </div>
      </div>


    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "Intention"
})
export default class Intention extends Vue {
  tatleName = "产品意向申请"
  //身份证
  idcard = "23232111978211"
  //姓名
  name = "刘明明"
  //电话
  phone = "15665025053"
  //贷款详情
  varieties = "一般经营性贷款"
  //借款金融
  amount = "500万"
  //借款期限
  borrow = "24月"
  //借款用途
  purposes = "经营"
  //业务办理地区
  area = "黑龙江省-哈尔滨市-松北区"
  //意向机构
  intentions = "哈尔滨农信社松北区枝江大道分社"
  //客户经理
  customer = "赵恒请"
  //客户经理电话
  phoneCard = "15673989898"
  //地区
  show = false
  fieldValue = ''
  cascaderValue = ''
  // 选项列表，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('/');
  }
  recognition(){
    this.$router.push({
      name:"LinSuccess"
    })
  }

}



</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>