<template>
  <div class="container">
    <div class="form-wrapper">
      <form @submit="onSubmit" @failed="onFailed">
        <div class="form-item">
          <p>
            <span class="require-dot">*</span>
            <span>服务范围查询</span>
          </p>
          <p class="address-tips">请填写完整的家庭服务地址</p>
        </div>
        <div class="field-wrapper">
          <input name="detailAddress" class="address-input" v-model="detailAddress" placeholder="请输入详细地址"
            :rules="formRules.detailAddressRule" clearable />
        </div>

        <div class="submit-wrapper">
          <button block type="default" native-type="submit">查询</button>
        </div>
      </form>
    </div>

  </div>
</template>

<script>
import { addressCheck } from "@/api/address";
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: {
        cityAddressRule: [
          { required: true, message: "您还未选择省市区", trigger: "onChange" }
        ],
        detailAddressRule: [{ required: true, message: "您还未填写详细地址" }],

      },
      dialogShow: false,
      areaShow: false,
    };
  },
  mounted() {
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/[^0-9xX]/g, "");
    },
    onSubmit: function () {
      // this.dialogShow = true;
      this.dataSubmit();
    },
    dataSubmit: function () {
      let strArr = ['路', '街', '号', '小区', '弄'];
      let isValid = strArr.some(item => { return this.detailAddress.indexOf(item) >= 0 });

      if (!isValid) {
        this.$toast("请输入正确的地址");
        return false;
      }

      let params = {
        //address: this.cityAddress + this.detailAddress,
        county: this.area,
        city: this.city,
        province: this.province,
        addressDetail: this.detailAddress
      };
      console.log(params);
      addressCheck(params).then(res => {
        if (res.data.errno == "0") {
          this.$dialog
            .alert({
              title: "提示",
              message: "您的地址在服务范围内,期待您的购买和使用"
            })
        } else {
          this.$toast("很遗憾,您的地址不在服务范围内");
        }
      });
    },
    areaConfirm: function (data) {
      console.log(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> 

<style scoped> 
.form-item {
   background: #f5f5f5;
   padding: 0.4rem 0.3rem;
   line-height: .4rem;
   color: #333;
   font-size: .3rem;
 }
 p.address-tips {
    font-size: 0.24rem;
    padding: 0.16rem;
    line-height: 0.36rem;
}
.address-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
}
 .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>
