<!--
*@Author wangliang
*@date 20220729
-->
<template>
  <div  style="background-color: #FFFFFF">
    <div class="rarle">
      <!--上部分-->
      <div style="width:100%;height: calc(25vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
        </tatle-bar>
        <div style="margin-top: 10%">
          <van-row style="text-align: center;">
            <van-col span="5">
              <van-col span="24" style="text-align: right;z-index: 0"><img :src="choiceA?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
              <van-col span="24" style="z-index: 1;margin-top: -28%;margin-left: 26px;color: #1890FF"><span >1</span></van-col>
<!--              <van-col span="24" style="text-align: right;margin-top: 10px;color: #FFFFFF">授权书确认</van-col>-->
            </van-col>
            <van-col span="5"><img :src="require('@/assets/svg/u1283.svg')"/></van-col>
            <van-col span="4">
              <van-col span="24"><img :src="choiceB?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
              <van-col span="24" style="z-index: 1;margin-top: -34%;margin-left: 0px;color: #1890FF"><span >2</span></van-col>
<!--              <van-col span="24" style="margin-top: 10px;color: #FFFFFF">授信合同录入</van-col>-->
            </van-col>
            <van-col span="5"><img :src="require('@/assets/svg/u1283.svg')"/></van-col>
            <van-col span="5" style="text-align: left">
              <van-col span="24"><img :src="choiceC?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
              <van-col span="24" style="z-index: 1;margin-top: -28%;margin-left: 8px;color: #1890FF"><span >3</span></van-col>
<!--              <van-col span="24" style="text-align: left;margin-top: 10px;color: #FFFFFF">合同确认</van-col>-->
            </van-col>
          </van-row>
          <van-row style="text-align: center">
            <van-col span="8" :class="choiceA?'wordType':'wordTypeB'">授权书确认</van-col>
            <van-col span="8" :class="choiceB?'wordType':'wordTypeB'">授信合同录入</van-col>
            <van-col span="8" :class="choiceC?'wordType':'wordTypeB'">合同确认</van-col>
          </van-row>
        </div>
      </div>
      <div v-if="show">
        <div style="background-color: #FFFFFF;text-align: center;margin-top: 10%">
          <img :src="require('@/assets/images/shouquanwenjian.png')" style="width: 40%;height: 40%;"/>
        </div>
        <div style="margin-top: 10%;text-align: center;color: #3478E4">
          《xxxxx授权书》
        </div>
        <div style="margin-top: 4%;text-align: center;color: #3478E4">
          《xxxxxxxxxx授权书》
        </div>
        <div style="margin-top: 4%;text-align: center;color: #3478E4">
          《xxxxxxxxxx授权书》
        </div>
        <div style="margin-top: 4%;text-align: center;color: #3478E4">
          《xxxxxxxxxxxxx授权书》
        </div>
        <div>
          <van-button style="    width: 90%;
    margin-left: 5%;
    background-color: rgb(24, 144, 255);
    position: absolute;
    margin-top: 14%;
    height: 5%;
    border-radius: 5px;" type="primary" @click="countB">下一步</van-button>        </div>
      </div>
      <div v-if="showB">
        <div class="layout">
          <scroller-view  v-calculate-height :pulldown="pulldown" :pullup="pullup">
          <van-row type="flex" class="CoolName">
            <van-col span="24" class="coollayout" style="color: black;font-size: 14px;font-weight: bolder;margin-top: 10px;margin-left: 10px;">个人信息</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" style="color: black;font-size: 14px;font-weight: bolder;margin-top: 10px;margin-left: 10px;">借款信息</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 is-link readonly label="业务办理地区" placeholder="请选择所在地区" @click="show = true" />
                <van-popup v-model="show" round position="bottom">
                  <van-cascader title="请选择所在地区" :options="options" @close="show = false"
                                />
                </van-popup>
              </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-field is-link readonly label="意向机构" placeholder="请选择" @click="show = true" />
                <van-popup v-model="show" round position="bottom">
                  <van-cascader title="请选择所在地区" :options="options" @close="show = false"
                                />
                </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="12">
                  <van-button style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" plain block type="info" @click="beforeStep()">上一步</van-button>
              </van-col>
              <van-col span="12">
                <van-button block type="info" style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" @click="nextStep()">下一步</van-button>
              </van-col>
            </van-row>
          </div>
          </scroller-view>
        </div>
      </div>
      <div v-if="showC">
        <div style="background-color: #FFFFFF;text-align: center;margin-top: 10%">
          <img :src="require('@/assets/images/shouquanwenjian.png')" style="width: 60%;height: 60%;"/>
        </div>
        <van-row type="flex" class="layoutName" style="margin-top: 30%">
          <van-col span="12">
            <van-button style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" plain block type="info" @click="countB()">上一步</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" @click="confirm()">确认</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
<!--    <div v-show=" style="background-color: #b80c0c;width: 90%;height: 50%;">
      <van-password-input
        :value="value"
        :mask="false"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
    </div>-->
<!--    <a-modal v-model:visible="showDialog" title="请输入短信验证码" cancelText="取消" okText="确定" @ok="handleOk">
      <p>{{phoneNo}}</p>
      <a-input placeholder="请输入验证码"></a-input>
      <p style="color: #00c6ff">发送验证码</p>
    </a-modal>-->
    <a-modal v-model:visible="showDialog" title="请输入短信验证码">
      <template #footer>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
      <p>{{phoneNo}}</p>
      <a-input placeholder="请输入验证码"></a-input>
      <p style="color: #00c6ff">发送验证码</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

@Component({
  name: "SelfHelpLoan",
})
export default class SelfHelpLoan extends Vue{
  phoneNo="17703111111";
  showDialog=false;
  showC=false;
  pullup=true;
  pulldown=true;
  choiceA=true;
  choiceB=false;
  choiceC=false;
  titleName="自助贷款";
  titleflag=true;
  show=true;
  showB=false;
  countB() {
    this.show=false;
    this.showB=true;
    this.showC=false;
    this.choiceA=false;
    this.choiceB=true;
    this.choiceC=false;
  }
  //身份证
  idcard = "23232111978211";
  //姓名
  name = "刘明明";
  //电话
  phone = "15665025053";
  //贷款详情
  varieties = "一般经营性贷款"
  //借款金融
  amount = "500万"
  //借款期限
  borrow = "24月"
  //借款用途
  purposes = "经营"
  //业务办理地区
  area = "黑龙江省-哈尔滨市-松北区"
  //意向机构
  intentions = "哈尔滨农信社松北区枝江大道分社"
  //客户经理
  customer = "赵恒请"
  nextStep() {
    this.show=false;
    this.showB=false;
    this.showC=true;
    this.choiceA=false;
    this.choiceB=false;
    this.choiceC=true;
  }
  beforeStep() {
    this.show=true;
    this.showB=false;
    this.showC=false;
    this.choiceA=true;
    this.choiceB=false;
    this.choiceC=false;
  }
  confirm() {
    this.showDialog=true;
  }
  handleOk() {
    this.$router.push({
      name: "ApplyResult",
    });
  }
}
</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;
}
.wordType{
  margin-top: 10px;color: #FFFFFF
}
.wordTypeB{
  margin-top: 10px;color: rgba(255, 255, 255, 0.75)
}
:root {
  --van-dialog-message-max-height: 60vh
}
</style>
