<template>
  <div class="h5-container">
    <!-- topImg -->
    <img
        class="topImg"
        :src="`https://h5.whjhft.com/static/${imgArr[0]}`"
        v-show="imgArr[0]"
        alt=""
    />
    <!-- form表单 -->
    <div class="form">
      <div class="container">
        <div class="wrapper">
          <div class="form-item">
            <label class="label">*身份证姓名</label>
            <input
                type="text"
                v-model="form.cert_name"
                placeholder="请输入身份证姓名（安全加密）"
                @blur="validateName"
            />
          </div>
          <div class="form-item">
            <label class="label">*联系电话</label>
            <input
                type="text"
                v-model="form.contact_num"
                placeholder="请输入联系电话（安全加密）"
                @blur="validatePhone"
            />
          </div>
          <div class="form-item" v-show="need_identity === 1">
            <label class="label">*身份证号码</label>
            <input
                type="text"
                v-model="form.cert_no"
                placeholder="未满18岁请勿领卡（安全加密）"
                @blur="validateID"
            />
          </div>
          <div class="form-item">
            <label class="label">*地区</label>
            <input
                type="text"
                v-model="form.address"
                placeholder="选择地区（安全加密）"
                @focus="selectArea"
            />
          </div>
          <div class="area">
            <van-popup v-model="show" position="bottom">
              <van-area title="选择地区" :area-list="areaList" @confirm="confirm" @cancel="cancel"/>
            </van-popup>
          </div>
          <!--<van-area title="标题" :area-list="areaList" value="110101" />-->
          <div class="form-item">
            <label class="label">*详细地址</label>
            <input
                type="text"
                v-model="form.post_addr"
                placeholder="街道/镇+村/小区/写字楼+门牌号"
                @blur="validateAddress"
            />
          </div>
          <div class="tips">
            *未满18周岁的，因政策原因不发货，请勿下单。请保持电话畅通，我们将随时可能与您联系。
          </div>
          <div class="btn">
            <button @click="add">立即领取，包邮到家</button>
          </div>
        </div>
      </div>
    </div>
    <!-- details_img -->
    <img
        :src="`https://h5.whjhft.com/static/${imgArr[1]}`"
        v-show="imgArr[1]"
        alt=""
    />
    <!-- copyright_img -->
    <img
        :src="`https://h5.whjhft.com/static/${imgArr[2]}`"
        v-show="imgArr[2]"
        alt=""
    />
  </div>
</template>

<script>
import axios from "axios";
import CryptoJS from "crypto-js";
import {areaList} from '@vant/area-data';

export default {
  name: "H5Page",
  data() {
    return {
      show: false,
      areaList,
      encrypted: "erPY%2B%2BgxM2AhOlGj3B%2FyiTu3jbfg82vQ2vcXhcjzvEx%2BCBOQdn3%2BENusPylgeE5dg8ohlNHVohvkZdWejWOL1g%3D%3D",
      cryptoConfig: {
        key: "1234567890123456", // 16位密钥（AES-128）
        iv: "6543210987654321", // 16位初始向量
      },
      parseObj: {
        goods_id: null,
        agent_id: null,
      },
      need_identity: null,
      imgArr: [],
      base64: null,
      form: {
        cert_name: "",
        contact_num: "",
        address: "",
        post_addr: "",
        goods: [],
        agent_id: "",
        cert_no: "",
        post_province_name: "",
        post_city_name: "",
        post_district_name: "",
        source: 7,
        source_type: 1,
      },
      errors: {
        cert_name: '',
        contact_num: '',
        cert_no: '',
        post_addr: ''
      },
    };
  },
  async created() {
    await this.parseData();
  },
  methods: {
    validateName() {
      const name = this.form.cert_name.trim();
      if (!/^[\u4e00-\u9fa5]{2,}$/.test(name)) {
        this.errors.cert_name = '请输入至少两个中文字符的姓名';
        this.$toast.fail('请输入至少两个中文字符的姓名');
      } else {
        this.errors.cert_name = '';
      }
    },
    validatePhone() {
      const phone = this.form.contact_num.trim();
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        this.errors.contact_num = '请输入正确的11位手机号';
        this.$toast.fail('请输入正确的11位手机号');
      } else {
        this.errors.contact_num = '';
      }
    },
    validateID() {
      const id = this.form.cert_no.trim();
      if (!/^\d{17}[\dXx]$/.test(id)) {
        this.errors.cert_no = '请输入正确的身份证号码';
        this.$toast.fail('请输入正确的身份证号码');
      } else {
        this.errors.cert_no = '';
      }
    },
    validateAddress() {
      const addr = this.form.post_addr.trim();
      if (addr.length < 6) {
        this.errors.post_addr = '详细地址不能少于6个字';
        this.$toast.fail('详细地址不能少于6个字');
      } else {
        this.errors.post_addr = '';
      }
    },
    async add() {
      // 提交前统一校验一次
      this.validateName();
      this.validatePhone();
      if (this.need_identity === 1) {
        this.validateID();
      }
      this.validateAddress();

      // 如果没有错误才提交
      const firstError = Object.values(this.errors).find(err => err);
      if (firstError) {
        return this.$toast.fail(firstError);
      }
      // 发送下单请求
      const res = await axios({
        url: 'https://h5.whjhft.com/api/v1/h5/lot/save',
        method: 'POST',
        data: this.form
      });
      if (res.data.status === 1) {
        this.$toast.success("下单成功");
        this.form = {
          cert_name: "",
          contact_num: "",
          address: "",
          post_addr: "",
          goods: [],
          agent_id: "",
          cert_no: "",
          post_province_name: "",
          post_city_name: "",
          post_district_name: "",
          source: 7,
          source_type: 1,
        }
      } else if (res.data.status === 0) {
        this.$toast.fail(res.data.msg);
      }
    },
    // 确定
    confirm(value) {
      this.form.address = value.map(item => item.name).join('/')
      this.form.post_province_name = value[0].name
      this.form.post_city_name = value[1].name
      this.form.post_district_name = value[2].name
      this.cancel()
    },
    // 取消
    cancel() {
      this.show = false
    },

    selectArea() {
      this.show = true
    },
    // 解析URL参数
    async parseData() {
      // this.encrypted = window.location.href.split('=')[1]
      const key = CryptoJS.enc.Utf8.parse(this.cryptoConfig.key);
      const iv = CryptoJS.enc.Utf8.parse(this.cryptoConfig.iv);

      const decrypted = CryptoJS.AES.decrypt(
          decodeURIComponent(this.encrypted),
          key,
          {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
          }
      );

      this.parseObj = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));

      this.form.goods = [this.parseObj.goods_id]
      this.form.agent_id = this.parseObj.agent_id

      // 加密成base64 获取当前图片
      const base64 = btoa(
          this.parseObj.agent_id + "_" + this.parseObj.goods_id
      );

      const {data} = await axios.get(
          `https://h5.whjhft.com/api/v1/h5/lot?key=${base64}`
      );

      if (data.status === 0) {
        await this.$router.push({name: "404"});
        return;
      }

      this.imgArr = [
        data.data.good.top_img,
        data.data.good.details_img,
        data.data.good.copyright_img,
      ];

      document.title = data.data.good.good_name;

      this.need_identity = data.data.good.need_identity;
    },
  },
};
</script>

<style scoped>
.h5-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .topImg {
    width: 100%;
    height: 300px;
  }

  img {
    margin: -1px;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-sizing: border-box;
  }

  .form {
    width: 100%;
    background-color: #1b0b0c;
    padding: 40px 20px;
    /* height: 500px; */
    box-sizing: border-box;

    .container {
      border: 1px solid #ffffff;
      border-radius: 10px;
      height: 100%;

      .wrapper {
        padding: 10px;

        .form-item {
          background-color: white;
          border-radius: 10px;
          padding: 5px 10px;
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          .label {
            width: 90px;
            /* border: 1px solid; */
          }

          input {
            flex: 1;
            border-radius: 10px;
            padding: 10px;
            border: none;
            outline: none;
          }
        }

        .tips{
          color: white;
          font-size: 13px;
          line-height: 20px;
          padding: 0 20px;
        }

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 15px;

          button {
            width: 100%;
            height: 50px;
            background-color: #f46c6c;
            color: white;
            border-radius: 100px;
            font-size: 15px;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 10px;
            box-shadow: inset 0 3px 0 0 hsla(0, 0%, 100%, 0.15),
            inset 0 -3px 2px 0 rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            display: block;
            margin-top: 20px;
            margin-bottom: 20px;

            /* 💥 动画部分 */
            transition: all 0.3s ease;

            /* 💥 无限伸缩动画 */
            animation: pulse 1.5s ease-in-out infinite;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@media (min-width: 768px) {
  .h5-container {
    max-width: 410px;

    .topImg {
      width: 100%;
      aspect-ratio: 1/1;
      box-sizing: border-box;
    }
  }

  img {
    width: 100%;
    height: auto;
    margin: -1px;
    object-fit: cover;
    box-sizing: border-box;
  }
}

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.fade-slide-enter-to, .fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}

</style>
