<template>
  <div class="btnModal">
    <div class="inputBox">
      <input
        v-model="phone"
        class="input"
        type="text"
        maxlength="11"
        placeholder="请输入联通号码"
      />
    </div>
    <div class="btnBox">
      <div
        class="btnText"
        :style="{
          'background-image': `linear-gradient(${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`,
        }"
        @click="btnClick"
      >
        立即开通
      </div>
    </div>
    <div class="privacyBox">
      <van-checkbox v-model="checked" checked-color="#FFDE60">
        <p style="margin: 0; padding: 0">我已阅读并同意</p>
      </van-checkbox>
      <span class="span" style="color: #ffde60" @click="showConceal = true"
        >《隐私声明》</span
      >
    </div>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :pageData="pageData"></conceal>
  </div>
</template>

<script>
import { Dialog } from "vant";
import conceal from "../../../components/hideModal.vue";
export default {
  data() {
    return {
      phone: "",
      checked: false,
      showConceal: false,
    };
  },
  components: {
    conceal,
  },
  props: {
    pageData: Object,
  },
  computed: {
    vueXphone() {
      return this.$store.state.user.phone;
    },
  },
  watch: {
    vueXphone(newVal, oldVal) {
      this.phone = newVal;
    },
  },
  created() {
    if (this.pageData.remarks.privacy === "1") {
      this.checked = true;
    }
  },
  mounted() {
    if (this.$route.query.phone) {
      this.phone = this.$route.query.phone;
    } else if (this.vueXphone) {
      this.phone = this.vueXphone;
    }
  },
  methods: {
    btnClick() {
      if (this.phone === "") {
        this.$toast("请输入手机号");
        return false;
      }
      this.$emit("phoneNum", this.phone);
      if (this.checked == false) {
        this.$toast("请勾选隐私声明");
        return false;
      }
      if (/^1[3456789]\d{9}$/.test(this.phone)) {
        let str = this.phone.slice(0, 3);
        let str2 = this.phone.slice(0, 4);
        if (
          str === "167" ||
          str === "171" ||
          str2 === "1704" ||
          str2 === "1707" ||
          str2 === "1708" ||
          str2 === "1709"
        ) {
          Dialog({
            message: "您的号码为虚拟运营商号码，不支持办理此业务",
            theme: "round-button",
          });
          return false;
        }
        this.$emit("btnClick");
      } else {
        this.$toast("手机号格式错误");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btnText {
  color: #f60f0b;
}
.privacyBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 32px;
  font-size: 28px;
  .van-checkbox {
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }

  .span {
    display: flex;
    align-items: center;
  }
  p {
    color: #fff;
  }
  .van-icon {
    transform: scale(0.8, 0.8);
    border-color: #ffde60;
  }
}
</style>
