<template>
  <div class="container">
    <!-- <topheader title="权益兑换"></topheader> -->
    <!-- 顶部提示 -->
    <div class="goods-title">
      <div>兑换商品</div>
      <div class="goods-name">电信宽带信息登记</div>
    </div>
    <div class="form-wrapper">
      <van-form ref="form" @submit="onSubmit" @failed="onFailed">
        <div class="form-item">
          <!-- <span class="require-dot">*</span>
          <i>2.</i>-->
          <span>1. 宽带归属信息</span>
          <span class="tips">（必填）</span>
        </div>
        <div class="field-wrapper multi-field">
          <van-field
            v-model="customerName"
            placeholder="请输入姓名"
            :rules="formRules.nameRule"
            maxlength="10"
            clearable

          />
        </div>
        <div class="field-wrapper multi-field">
          <!-- <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>3. 收货信息</span>
          <span class="tips">（必填）</span>
        </div>

        <div class="field-wrapper multi-field">
          <van-field
            name="cityAddress"
            v-model="cityAddress"
            placeholder="请选择省-市-区"
            :rules="formRules.cityAddressRule"
            readonly
            @click="areaSelect"

          />
        </div>
        <div class="field-wrapper multi-field">
          <van-field
            name="detailAddress"
            v-model="detailAddress"
            placeholder="请输入详细地址"
            :rules="formRules.detailAddressRule"
            clearable

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

          />
        </div>

<!--        <van-field
          name="checkbox"
          :border="false"
          :rules="formRules.protocolRule"
          class="check-field"
        >
          <template #input>
            <van-checkbox v-model="checkbox" shape="round">
              我已阅读并同意
              <span class="protocol-link" @click="protocolLink">《2024中国电信用户入网协议》</span>
            </van-checkbox>
          </template>
        </van-field>-->

        <div class="submit-wrapper">
          <van-button block round native-type="submit" type="primary" color="#1989FA" @click="createOrder">确认兑换</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-popup class="test" v-model="dialogQrcode" :close-on-click-overlay="true"  closeable>
      <div class="main-body">
        <div class="title">请您截图微信扫码添加企微</div>
        <img src="../assets/dxkfQrcode.jpg" alt />
      </div>
    </van-popup>
  </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 {
      telecomOrder:{},
      telecomCommodityName:'39元700分钟通话700G',
      flag:false,
      couponNum: 0,
      mobileIndex: 0,
      mobile: "",
      mobileList: [],
      customerName: "",
      customerIdCard: "",
      customerTel: "",
      customerTel2: "",
      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,
      dialogQrcode: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);
      console.log(5)
      console.log(result)
      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);
      console.log("测试");
      // this.$toast('请检查页面输入内容');
    },
    createOrder(){
      console.log(2)
        let params={
          name:this.customerName,
          idCard:this.customerIdCard,
          contactMobile:this.customerTel2,
          installedAddress:this.detailAddress,
          province: this.province,
          city:this.city,
          county:this.area,
          number:this.mobile,
          orderId:this.telecomOrder.id
        }
      Service.$axiossaveKdOrder(params).then(res=>{
        if (res.data.errno == "-1") {
          console.log(3)
          console.log(res)
          this.$toast(res.data.errmsg);
        } else if (res.data.errno == "0") {
          this.$toast("提交成功");
          location.reload();
          console.log(this.telecomOrder)
        }
      })
    },
    showQrCode(){
      this.dialogQrcode=true;
    }
  }
};
</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 {
  padding: 0 0.28rem;
  color: #fff;
  font-size: 0.28rem;
  height: 0.88rem;
  background: #1989fa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.3rem;
  font-weight: bold;
}
.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 0.3rem;
}
.multi-field.field-wrapper {
  padding-bottom: 0;
}
.field-wrapper .van-cell {
  overflow: hidden;
  /* border-radius: 6px;
border: 1.5px solid #1989FA; */
  padding: 0;
}
>>> .van-field__body {
  border-radius: 6px;
  border: 1.5px solid #1989fa;
  padding: 10px 16px;
}
.check-field >>> .van-field__body {
  border: none;
  padding: 0;
}
.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: 0.3rem 0.3rem 0.5rem;
}
.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;
}
.goods-title {
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;
  font-size: 0.28rem;
  color: rgba(0, 0, 0, 0.5);
}
.goods-title .goods-name {
  color: #000000;
  font-weight: bold;
}
.select-number {
  padding: 10px 16px;
  height: 44px;
  border-radius: 6px;
  border: 1.5px solid #1989fa;
}
>>> .van-field__error-message {
  color: #fa6400;
}
.coupon-num {
  position: absolute;
  right: calc(0.3rem + 16px);
  top: calc(50% - 12px);
  height: 24px;
  line-height: 24px;
  color: #0091ff;
}
.coupon-num.coupon-none {
  color: #fa6400;
}
.van-popup--center {
  width: 90%;
  border-radius: 6px;
}
.mobile-lisit-wrapper {
  width: 100%;
  padding: 30px 12px 34px;
  background: #fff;
  border-radius: 6px;
}
.select-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 26px;
}
.conf-mobile {
  width: 100%;
  margin: 24px 0 0;
  height: 54px;
  line-height: 54px;
  background: #1989fa;
  border-radius: 54px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.mobile-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mobile-item {
  border-radius: 6px;
  border: 1px solid #1989fa;
  color: #1989fa;
  font-size: 18px;
  text-align: center;
  height: 56px;
  line-height: 56px;
  width: calc((100% - 10px) / 2);
  margin-bottom: 8px;
}
.active-mobile.mobile-item {
  background: #1989fa;
  color: #fff;
  font-weight: bold;
}

.main-body {
  background: #fff;

  /* height: 100vh; */
  padding: 3rem 0.24rem 1rem;
  text-align: center;
}

.title {
  font-size: 14px;
  color: #fa6400;
  text-align: center;
  margin-bottom: 24px;
  font-weight: bold;
}
.main-body img {
  width: 184px;
  height: 184px;
}
</style>
