<template>
  <div class="d-page d-flex flex-column">
    <title-bar title="新增客户" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="adduser">
      <van-form @submit="onSubmit">
        <div class="IDcard">
          <div class="business_license"><van-uploader v-model="business_license" :max-count="1" multiple /><!-- v-model="fileList"--></div>
        </div>
        <mobile-input v-model="certype" label="证件类型" placeholder="营业执照" readonly size="large" />
        <mobile-input v-model="IDnumber" label="证件号码" placeholder="请输入证件号码" size="large" />
        <mobile-input v-model="username" label="客户名称" placeholder="请输入客户名称" size="large" />
        <mobile-input v-model="username" label="联系人" placeholder="请输入联系人" size="large" />
        <mobile-input v-model="username" label="联系电话" placeholder="请输入联系电话" size="large" />
        <mobile-input v-model="sms" center clearable label="短信验证码" size="large">
          <template #button>
            <van-button size="small" type="primary">获取验证码</van-button>
          </template>
        </mobile-input>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">确定</van-button>
        </div>
      </van-form>
      <base-popup v-model="flagPopup" :showConfirm="true" confirmText="知道了">
        <div class="popup-content">
          <div>中天城投集团城市建设有限公司</div>
          <div><img src="../../assets/svg/blue-round.svg" alt="" /></div>
          <div>该客户为行内客户，不能进行开户</div>
        </div>
      </base-popup>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasePopup from "@/components/general/BasePopup.vue";
/**
 * @Description 新增客户
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:09
 */
@Component({
  name: "AddUserView",
  components: { BasePopup },
})
export default class AddUserView extends Vue {
  pageTitle = ""; // 页面标题
  flag = false;
  flagPopup = false;

  certype: string | undefined = "";
  IDnumber: string | undefined = "";
  username: string | undefined = "";
  tel: string | undefined = "";
  sms: string | undefined = "";
  business_license: any = [];

  onSubmit() {
    if (this.flag) {
      this.$router.push({
        path: "/customer-mgt/customer-info/customer-information-registration/customer-information-registration",
        query: {
          warn: "客户信息预登记",
        },
      });
    } else {
      this.flagPopup = true;
      console.log("弹窗");
      console.log(this.flagPopup);
    }
  }
  onClick() {
    console.log(111111);
  }
}
</script>

<style scoped lang="scss">
.adduser {
  width: 40%;
  height: 50%;
  margin: 32px auto 0 auto;
}
::v-deep .van-field-label {
  width: 120px;
  text-align: right;
}
.IDcard {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.business_license {
  width: 10%;
}
::v-deep .van-button--info div span {
  font-size: 20px;
}
::v-deep .van-uploader__input {
  background-image: url("../../assets/images/auxiliary-tools-Interest-pricing.png");
}
::v-deep .van-button--info {
  background-color: #fd5065;
  border: 1px solid #fd5065;
}
.popup-content {
  width: 50%;
  margin: 0 auto;
}
.popup-content div {
  text-align: center;
}
.popup-content > div:nth-child(1) {
  font-size: 16px;
  color: #333333;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
}
.popup-content > div:nth-child(3) {
  font-size: 20px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
</style>