<template>
  <div class="container">
    <!-- <topheader title="保姆服务安心包"></topheader> -->
    <!-- 顶部提示 -->
    <div class="main-notice">
      <p class="main-title">【升级版】保姆服务安心包</p>
      <p class="notice-detail">您提交的内容将作为投保信息，请务必正确、真实填写</p>
    </div>
    <div class="form-wrapper">
      <van-form @submit="onSubmit" @failed="onFailed">
        <div class="form-item">
          <span class="require-dot">*</span>
          <i>1.</i>
          <span>您的完整姓名：</span>
          <span class="tips">
            <i>(请填答该题)</i>
          </span>
        </div>
        <div class="field-wrapper">
          <van-field
            v-model="customerName"
            placeholder="请输入您的回答"
            :rules="formRules.nameRule"
            maxlength="10"
            clearable
          />
        </div>
        <div class="form-item">
          <span class="require-dot">*</span>
          <i>2.</i>
          <span>您的身份证号码：</span>
          <span class="tips">
            <i>(请填答该题)</i>
          </span>
        </div>
        <div class="field-wrapper">
          <!-- <van-field v-model="customerIdCard" placeholder="请输入您的回答" :rules="formRules.idCardRule" /> -->
          <van-field
            v-model="customerIdCard"
            placeholder="请输入您的回答"
            maxlength="18"
            :formatter="formatter"
            name="validator"
            clearable
            :rules="[{ validator, message: '请输入正确的身份证号码' },{ required: true, message: '您还未填写身份证号'}]"
          />
        </div>
        <div class="form-item">
          <span class="require-dot">*</span>
          <i>3.</i>
          <span>手机号码：</span>
          <span class="tips">
            <i>(请填答该题)</i>
          </span>
        </div>

        <div class="field-wrapper">
          <!-- <van-field v-model="customerTel" placeholder="请输入您的回答" name="pattern"  :rules="formRules.telRule" /> -->
          <van-field
            v-model="customerTel"
            name="pattern"
            type="tel"
            placeholder="请输入您的回答"
            :rules="[{ required: true, message: '您还未填写手机号码' },
          { pattern, message: '请输入正确的手机号码'}]"
            maxlength="11"
            clearable
          />
        </div>

        <div class="form-item">
          <p>
            <span class="require-dot">*</span>
            <i>4.</i>
            <span>家庭服务地址：</span>
            <span class="tips">
              <i>(请填答该题)</i>
            </span>
          </p>
          <p class="address-tips">请填写完整准确的家庭地址，此地址将作为可生效的投保地址，否则保险无法生效。</p>
        </div>
        <div class="field-wrapper">
          <van-field
            name="cityAddress"
            v-model="cityAddress"
            placeholder="请选择省-市-区"
            :rules="formRules.cityAddressRule"
            readonly
            @click="areaSelect"
          />
        </div>
        <div class="field-wrapper">
          <van-field
            name="detailAddress"
            v-model="detailAddress"
            placeholder="请输入详细地址"
            :rules="formRules.detailAddressRule"
            clearable
          />
        </div>

        <div class="form-item">
          <span class="require-dot">*</span>
          <i>5.</i>
          <span>目前在使用的保姆类型：</span>
          <span class="tips">
            <i>(请填答该题)</i>
          </span>
        </div>
        <div class="radio-field-wrapper">
          <van-field name="radio" :rules="formRules.typeRule">
            <template #input>
              <van-radio-group v-model="serviceModel">
                <van-radio name="钟点工">钟点工</van-radio>
                <van-radio name="白班保姆">白班保姆</van-radio>
                <van-radio name="住家保姆">住家保姆</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <div class="form-item protocol-item">
          <span class="require-dot">*</span>
          <i>6.</i>
          <p>
            我已认真阅读
            <span class="protocol-link" @click="protocolLink">《【升级版】保姆服务安心包服务说明》</span>、平安保险制定的
            <span class="protocol-link" @click="protocolAxbLink">《保险方案》和《保险条款》</span>内容，允许宅易丞（上海）保洁服务有限公司投保该保险并将本人列为被保人，同意宅易丞（上海）保洁服务有限公司将本人填写的如上信息提交平安保险完成投保手续。本页面列示的保险产品由平安保险提供，由宅易丞（上海）保洁服务有限公司投保并提供技术服务。
          </p>
        </div>

        <van-field name="checkbox" :border="false" :rules="formRules.protocolRule">
          <template #input>
            <van-checkbox v-model="checkbox" shape="square">我已认真阅读并接受上述内容</van-checkbox>
          </template>
        </van-field>

        <div class="submit-wrapper">
          <!-- <div @click="onSubmit">提交</div> -->

          <van-button block type="default" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model="areaShow" position="bottom">
      <van-area
        title="省-市-区"
        :area-list="areaList"
        value="310115"
        @cancel="areaCancel"
        @confirm="areaConfirm"
      />
      <!-- <van-area title="省-市-区" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" /> -->
    </van-popup>
    <!-- 弹框 -->
    <van-dialog
      v-model="dialogShow"
      title="请确认您的投保信息"
      cancelButtonText="返回"
      confirmButtonText="提交"
      cancelButtonColor="#999999"
      confirmButtonColor="#0EAEFC"
      show-cancel-button
      @confirm="dialogConfirm"
    >
      <div class="dialog-wrapper">
        <p>
          <span class="dialog-title">姓名</span>
          <span class="dialog-content">{{customerName}}</span>
        </p>
        <p>
          <span class="dialog-title">身份证</span>
          <span class="dialog-content">{{customerIdCard}}</span>
        </p>
        <p>
          <span class="dialog-title">手机号</span>
          <span class="dialog-content">{{customerTel}}</span>
        </p>
        <p>
          <span class="dialog-title">家庭服务地址</span>
          <span class="dialog-content">{{cityAddress+detailAddress}}</span>
        </p>
        <div class="dialog-tips">*您填写的信息将用于投保，请保证信息准确</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Service from "../script/api/service";
import Topheader from "@/components/Topheader";
import Vue from "vue";
import { Popup, Area } from "vant";
Vue.use(Popup).use(Area);
import * as validatorInput from "../script/Validator";
import areaJson from "../script/areaJson";
export default {
  name: "userInput",
  data() {
    return {
      customerName: "",
      customerIdCard: "",
      customerTel: "",
      cityAddress: "",
      detailAddress: "",
      province: "",
      area: "",
      city: "",
      provinceCode: "",
      cityCode: "",
      areaCode: "",
      customerAddress: "",
      serviceModel: "",
      checkbox: "",
      pattern: /^1\d{10}$/,
      formRules: {
        nameRule: [{ required: true, message: "您还未填写姓名" }],
        // idCardRule: [{ required: true, message: "您还未填写身份证号" }],
        // telRule: [
        //   { required: true, message: "您还未填写手机号码" },
        //   { pattern, message: '请输入正确的手机号码' }
        //   ],
        cityAddressRule: [
          { required: true, message: "您还未选择省市区", trigger: "onChange" }
        ],
        detailAddressRule: [{ required: true, message: "您还未填写详细地址" }],
        typeRule: [{ required: true, message: "您还未填写保姆类型" }],
        protocolRule: [{ required: true, message: "您还未勾选上述内容" }]
      },
      dialogShow: false,
      areaShow: false,
      areaList: areaJson
    };
  },
  computed: {},
  components: {
    Topheader
  },
  watch: {},
  beforeDestroy() {},
  mounted() {
    // let path = this.$route.path;
    // if (path == "/input") {
    //   this.source = "input";
    // } else {
    //   this.source = "f1";
    // }
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/[^0-9xX]/g, "");
    },
    validator: function(val) {
      let result = validatorInput.validateIdCard(val);
      return result;
    },
    onSubmit: function() {
      this.dialogShow = true;
    },
    dialogConfirm: function() {
      this.dataSubmit();
    },
    dataSubmit: function() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      let params = {
        address: this.cityAddress + this.detailAddress,
        areaName: this.area,
        cityCode: this.cityCode,
        cityName: this.city,
        countyCode: this.areaCode,
        idCard: this.customerIdCard,
        name: this.customerName,
        orderNo: userInfo.orderNo,
        phone: this.customerTel,
        provinceCode: this.provinceCode,
        provinceName: this.province,
        serviceModel: this.serviceModel
      };
      Service.$axiosAddBpCustomer(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          // this.$toast("提交成功");
          this.$dialog
            .alert({
              message: "提交成功"
            })
            .then(() => {
              // this.$router.go(-1);
              this.$router.push("/bx");
            });
        }
      });
    },
    protocolAxbLink: function() {
      this.$router.push("/axbProtocol");
    },
    protocolLink: function() {
      this.$router.push("/protocol");
    },
    areaCancel: function() {
      this.areaShow = false;
    },
    areaSelect: function() {
      this.areaShow = true;
    },
    areaConfirm: function(data) {
      this.province = data[0].name;
      this.provinceCode = data[0].code;
      this.city = data[1].name;
      this.cityCode = data[1].code;
      this.area = data[2].name;
      this.areaCode = data[2].code;
      this.cityAddress = data.map(item => item.name).join("");
      this.areaShow = false;
    },
    onFailed: function(errinfo) {
      console.log(errinfo);
      // this.$toast('请检查页面输入内容');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  /* background: #f8f8f8;
  /* margin:0 0 1rem; */
}

.main-notice {
  /* margin: 0.88rem 0 0; */
  height: 2.4rem;
  padding: 0 0.3rem 0.3rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  color: #0eaefc;
}
p.main-title {
  font-size: 0.36rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-weight: bold;
}
p.notice-detail {
  font-size: 0.26rem;
}
.form-item {
  background: #f5f5f5;
  padding: 0.4rem 0.3rem;
  line-height: 0.4rem;
  color: #333;
  font-size: 0.3rem;
}
.require-dot {
  color: #e3665e;
  font-size: 0.2rem;
  /* margin-right: -0.04rem; */
}
.tips {
  color: #b6b6b6;
  font-size: 0.24rem;
}
p.address-tips {
  font-size: 0.24rem;
  padding: 0.16rem;
  line-height: 0.36rem;
}
.field-wrapper {
  background: #eaeaea;
  padding: 0.2rem;
}
.field-wrapper .van-cell {
  border-radius: 0.12rem;
  overflow: hidden;
}
.radio-field-wrapper .van-radio {
  height: 0.92rem;
  border-bottom: 1px solid #ececec;
  padding: 0 0.46rem;
}
.radio-field-wrapper .van-cell {
  padding: 0;
}
.radio-field-wrapper .van-radio-group {
  width: 100%;
}
.protocol-item {
  display: flex;
  justify-content: flex-start;
  align-self: start;
}
.protocol-item p {
  margin: 0 0 0 0.06rem;
  text-align: justify;
}
.protocol-link {
  color: #0eaefc;
  font-size: 0.3rem;
}
.submit-wrapper {
  margin: 1rem 0 0;
}
.dialog-wrapper {
  padding: 0.26rem 0.46rem;
  font-size: 0.24rem;
}
.dialog-wrapper p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.2rem 0;
}
.dialog-wrapper span.dialog-title {
  color: #333;
  font-weight: bold;
  flex: 1;
}
.dialog-wrapper span.dialog-content {
  color: #666;
  flex: 2;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: right;
}
div.dialog-tips {
  color: #0eaefc;
  text-align: center;
  font-size: 0.2rem;
  margin: 0 -0.2rem;
}
</style>
