<template>
  <div class="container">
    <div class="form-wrapper">
      <van-form ref="form" @submit="onSubmit" @failed="onFailed">
        <div class="field-wrapper">
          <van-field
            label="联系人姓名："
            v-model="form.userName"
            placeholder="请输入联系人姓名"
            :rules="formRules.userName"
            maxlength="20"
            clearable
            required
            class="custom-placeholder"
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="联系人电话："
            v-model="form.tel"
            placeholder="请输入联系人电话"
            :formatter="formatter"
            :rules="formRules.tel"
            name="validator"
            maxlength="11"
            clearable
            required
          />
          <div class="tips">
            *请填写真实手机号，以便工作人员联系
          </div>
        </div>
        <div class="field-wrapper multi-field">
          <van-field
            label="主营城市:"
            v-model="form.cityAddress"
            placeholder="请选择主营城市"
            readonly
            @click="areaSelect"
            :rules="formRules.cityAddress"
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="公司名称："
            v-model="form.companyName"
            placeholder="请输入公司名称"
            :rules="formRules.companyName"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="信用代码："
            v-model="form.creditCode"
            placeholder="请输入公司信用代码"
            :rules="formRules.creditCode"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="法人姓名："
            v-model="form.legalPersonName"
            placeholder="请输入公司法人姓名"
            :rules="formRules.legalPersonName"
            maxlength="20"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="法人身份证号："
            v-model="form.legalPersonIdCard"
            placeholder="请输入公司法人身份证号"
            :formatter="formatter"
            name="validator"
            :rules="formRules.legalPersonIdCard"
            maxlength="18"
            clearable
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="对公账户户名："
            v-model="form.publicAccountName"
            placeholder="请输入对公账户户名"
            :rules="formRules.publicAccountName"
            clearable
            required
          />
          <div class="tips">
            *若为个体户，请提供法人账户信息
          </div>
        </div>
        <div class="field-wrapper">
          <van-field
            label="对公账号："
            v-model="form.publicAccount"
            placeholder="请输入对公账账号"
            :rules="formRules.publicAccount"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="开户行："
            v-model="form.bankName"
            placeholder="请输入开户行"
            :rules="formRules.bankName"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="公司邮箱："
            v-model="form.companyEmail"
            placeholder="请输入公司电子邮箱"
            name="validator"
            :rules="formRules.companyEmail"
            clearable
            required
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="账单邮寄地址："
            v-model="form.mailingAddress"
            placeholder="请输入账单邮寄地址"
            :rules="formRules.mailingAddress"
            clearable
          />
        </div>
        <div class="field-wrapper">
          <van-field
            label="企业微信："
            v-model="form.weCom"
            placeholder="请输入企业微信"
            :rules="formRules.weCom"
            clearable
          />
        </div>
        <div class="submit-wrapper">
          <van-button class="reset-button" native-type="submit"> </van-button>
        </div>
      </van-form>
    </div>
    <!-- 主营城市省市区选择 -->
    <van-popup v-model="areaShow">
      <van-area
        title="省-市"
        :area-list="areaList"
        value="310115"
        @cancel="areaCancel"
        @confirm="areaConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Area } from "vant";
Vue.use(Popup).use(Area);
import areaJson from "@/script/areaJson";
import * as validatorInput from "@/script/Validator";
export default {
  name: "userInput",
  data() {
    return {
      form: {
        userName: "",
        tel: "",
        cityAddress: "",
        companyName: "",
        creditCode: "",
        legalPersonName: "",
        legalPersonIdCard: "",
        publicAccountName: "",
        publicAccount: "",
        bankName: "",
        companyEmail: "",
        mailingAddress: "",
        weCom: "",
        city: "",
        province: ""
      },
      areaShow: false,
      areaList: areaJson,
      formRules: {
        userName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" }
        ],
        tel: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          { validator: this.validatorTel, message: "请输入正确的电话号码" }
        ],
        cityAddress: [
          { required: true, message: "请选择主营城市", trigger: "onChange" }
        ],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        creditCode: [
          { required: true, message: "请输入公司信用代码", trigger: "blur" }
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        legalPersonIdCard: [
        { required: false, message: "请输入正确的身份证号码" },
          { validator: this.validatorIdCard, message: "请输入正确的身份证号码" }
        ],
        publicAccountName: [
          {
            required: true,
            message: "请输入对公账户户名",
            trigger: "blur"
          }
        ],
        publicAccount: [
          { required: true, message: "请输入对公账号", trigger: "blur" }
        ],
        bankName: [
          { required: true, message: "请输入开户行", trigger: "blur" }
        ],
        companyEmail: [
          { required: true, message: "请输入公司邮箱", trigger: "blur" },
          { validator: this.validatorEmail, message: "请输入正确的邮箱" }
        ],
        mailingAddress: [
          // { required: true, message: "请输入账单邮寄地址", trigger: "blur" }
        ],
        weCom: [
          // {
          //   required: true,
          //   message: "请输入联系客户的企业微信",
          //   trigger: "blur"
          // }
        ]
      }
    };
  },
  computed: {},

  watch: {},
  beforeDestroy() {},
  mounted() {
    if (localStorage.getItem("formData")) {
      this.form = JSON.parse(localStorage.getItem("formData"));
    }
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/[^0-9xX]/g, "");
    },
    validatorIdCard: function(val) {
      let result = validatorInput.validateIdCard(val);
      console.log(555);
      return result;
    },
    validatorTel: function(val) {
      let result = validatorInput.validatePhoneTwo(val);
      console.log(result);
      return result;
    },
    validatorEmail: function(val) {
      console.log(val);
      let result = validatorInput.validateEmail(val);
      console.log(result);
      return result;
    },
    onSubmit: function() {
      let query = {
        userName: this.form.userName,
        tel: this.form.tel,
        cityAddress: this.form.cityAddress,
        companyName: this.form.companyName,
        creditCode: this.form.creditCode,
        legalPersonName: this.form.legalPersonName,
        legalPersonIdCard: this.form.legalPersonIdCard,
        publicAccountName: this.form.publicAccountName,
        publicAccount: this.form.publicAccount,
        bankName: this.form.bankName,
        companyEmail: this.form.companyEmail,
        mailingAddress: this.form.mailingAddress,
        weCom: this.form.weCom,
        province: this.form.province,
        city: this.form.city
      };
      localStorage.setItem("formData", JSON.stringify(query));
      this.$router.push({
        path: "/benefitKd"
        // query: query
      });
    },
    areaCancel: function() {
      this.areaShow = false;
    },
    areaSelect: function() {
      this.areaShow = true;
    },
    areaConfirm: function(data) {
      this.form.province = data[0].name;
      this.provinceCode = data[0].code;
      this.form.city = data[1].name;
      this.cityCode = data[1].code;
      this.countyCode = data[2].code;
      this.form.cityAddress = data.map(item => item.name).join("");
      this.areaShow = false;
      console.log("shengfen", this.form.province);
    },
    onFailed: function(errinfo) {
      console.log(errinfo);
      console.log("测试");
    }
  }
};
</script>
<style scoped>
.container {
  background-image: url("https://jms.lifejingzhi.com/file/jms/fuwe/join_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 190px 15px 20px;
  height: auto;
  background-attachment: scroll;
}
.form-wrapper {
  background-color: #fff;
  border-radius: 20px;
  padding: 22px 19px 20px 14px;
  height: 960px;
}

.field-wrapper {
  margin-bottom: 12px;
  position: relative;
}
.field-wrapper .tips {
  color: #ff4747;
  float: right;
  margin-bottom: 12px;
  font-size: 0.2rem;
}

.van-form {
  position: relative !important;
}
.submit-wrapper {
  position: fixed;
  bottom: 20px; /* 垂直方向定位到页面中间 */
  left: 0; /* 左侧固定到视口的左边 */
  right: 0; /* 右侧固定到视口的右边 */
  width: 251px; /* 固定宽度 */
  margin: 0 auto; /* 水平居中 */
}
>>> .van-field__error-message {
  color: #fa6400;
  padding-left: 15px;
}

.van-popup--center {
  width: 90%;
  border-radius: 6px;
}

.van-cell {
  border: #ebebeb 1px solid !important;
  line-height: 0px;
  height: 50px;
  font-size: 0.21rem;
  color: #999;
  border-radius: 6px;
  padding: 10px 0px !important;
}

>>> .van-field__body {
  border: none !important;
  padding: 7px 16px !important;
}
>>> .van-field__label {
  width: 2rem;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 15px;
  color: #999 !important;
}

.reset-button {
  border: none !important; /* 清除边框 */
  padding: 0; /* 重置内边距 */
  width: 251px !important;
  height: 58px !important;
  background-color: transparent !important;
  background-image: url("../assets/btn3.png"); /* 你的背景图片路径 */
  background-position: center;
  margin: auto;
  background-size: cover;
  background-repeat: no-repeat;
  /* width: 253px;
  height: 58px; */

  /* 其他需要重置的样式 */
}

>>> .van-field__control {
  font-size: 0.23rem;
  height: 0.26rem;
}
>>> .van-cell--required::before {
  position: absolute;
  left: 8px;
  top: 24px;
  color: #ee0a24;
  font-size: 16px;
  content: "*";
}
>>> .van-field__control::placeholder {
  font-size: 0.23rem !important;
}
</style>
