<!--  -->
<template>
  <div class="conversion_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部个人信息 -->
    <div class="conversion_headrBox">
      <div class="conversion_divBox">
        <img
          @click="goBack()"
          src="../../assets/image/new/30.png"
          alt
          class="conversion_headrBox-img"
        />
        <div class="conversion_headrBox-tlt">兑换奖品</div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="conversion_main">
      <ul class="conversion_main-ul1">
        <li class="conversion_main-ul1List">
          <div class="conversion_main-ul1List-name">收货人</div>
          <el-input
            v-model="input"
            style="border: 0"
            class="conversion_main-ul1List-ipt"
            placeholder="请填写收货人"
          ></el-input>
        </li>
        <li class="conversion_main-ul1List" style="border: 0">
          <div class="conversion_main-ul1List-name">联系电话</div>
          <el-input
            v-model="input1"
            maxlength="11"
            type="number"
            style="border: 0"
            class="conversion_main-ul1List-ipt"
            placeholder="请填写手机号码"
          ></el-input>
        </li>
      </ul>

      <ul class="conversion_main-ul2">
        <li class="conversion_main-ul2List">
          <div class="conversion_main-ul2List-name">所在地区</div>
          <el-input
            v-model="value"
            style="border: 0"
            class="conversion_main-ul2List-ipt"
            placeholder="请选择地区"
            @focus="site()"
          ></el-input>
        </li>
        <li class="conversion_main-ul1List" style="border: 0">
          <div class="conversion_main-ul2List-name">详细地址</div>
          <el-input
            v-model="input2"
            type="text"
            style="border: 0"
            class="conversion_main-ul2List-ipt"
            placeholder="请填写详细地址"
          ></el-input>
        </li>
      </ul>

      <div class="divwrap" v-if="show">
        <v-distpicker
          type="mobile"
          @province="onChangeProvince"
          @city="onChangeCity"
          @area="onChangeArea"
        ></v-distpicker>
      </div>

      <div class="conversion_main-btn" @click="affirm()">确认兑换</div>
    </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    VDistpicker,
  },
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      input: "", //收货人
      input1: "", //联系电话
      value: "", //地址
      input2: "", //详细地址
      show: false, //地址选择弹框
      province: "", //省
      city: "", //市
      region: "", //区/县
      id: "", //兑换奖品id
      nums: null, //兑换的奖品数量
      integralVal: '',
      userName: '',
      ret: ''
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回
    goBack() {
      this.$router.replace({
        name: 'share',
        query: {
          name: this.userName,
          num: this.integralVal,
          ret: this.ret
        }
      })
    },

    // 选择地址
    site() {
      this.show = !this.show;
    },
    // 省
    onChangeProvince(a) {
      this.province = a.value;
    },
    // 市
    onChangeCity(a) {
      this.city = a.value;
    },
    // 区/县
    onChangeArea(a) {
      this.region = a.value;
      this.value = this.province + this.city + this.region;
      this.show = false;
    },

    // 确认兑换事件
    affirm() {
      var that = this;
      var id = that.id;
      var form = new FormData();
      form.append("id", id); //奖品id
      form.append("consignee", that.input); //收货人
      form.append("consignee_phone", that.input1); //收货人电话
      form.append("consignee_region", that.value); //收货人地区
      form.append("consignee_address", that.input2); //收货人详细地址
      form.append("prize_nums", that.nums); //兑换奖品数量
      that
        .$axios({
          method: "post",
          url: "http://192.168.1.8:8002/user_prize",
          data: form,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.data.code == "200") {
            this.$message({
              type: "success",
              message: "提交成功，我们会在几个工作日后给您处理请及时查收短信获取物流单号",
              duration: 1500,
            });
            that.$router.replace('/person')
          } else {
            this.$notify.error({
                title: "错误",
                message: res.data.type,
                duration: 1500,
              });
            that.$router.replace('/person')
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.id = this.$route.query.id;
    this.nums = this.$route.query.nums;
    this.integralVal = this.$route.query.integralVal;
    this.userName = this.$route.query.userName;
    this.ret = this.$route.query.ret;
    this.get_boderHeight(); //动态获取浏览器高度
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
//@import url(); 引入公共css类

// 地址选择器样式修改
.divwrap {
  height: 400px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.divwrap >>> .distpicker-address-wrapper {
  color: #999;
}
.divwrap >>> .address-header {
  position: fixed;
  bottom: 400px;
  width: 100%;
  background: #000;
  color: #fff;
}
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}
.divwrap >>> .address-header .active {
  color: #fff;
  border-bottom: #666 solid 8px;
}
.divwrap >>> .address-container .active {
  color: #000;
}

.conversion_box {
  background: #f7f8fc;
}
// 个人头部信息
.conversion_headrBox {
  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
}
.conversion_divBox {
  display: flex;
  justify-content: space-between;
  width: 55%;
  margin: 0 0 0 0.5rem;
}
.conversion_headrBox-tlt {
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 8px 0 8px 0;
}
.conversion_headrBox-img {
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
  margin-top: 0.3rem;
}

// 主内容
.conversion_main {
}
.conversion_main-ul1 {
  background: #fff;
}
.conversion_main-ul1List {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #dadada;
  padding: 0 0 0.25rem 0;
}
.conversion_main-ul1List-name {
  color: #5d5d5d;
  line-height: 1.5rem;
  font-size: 15px;
  font-weight: 550;
}
.conversion_main-ul1List-ipt {
  width: 80%;
  color: #5d5d5d;
  margin: 0.25rem 0 0 0;
}

.conversion_main-ul2 {
  background: #fff;
  margin: 0.25rem 0 0 0;
}
.conversion_main-ul2List {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #dadada;
  padding: 0 0 0.25rem 0;
}
.conversion_main-ul2List-name {
  color: #5d5d5d;
  line-height: 1.5rem;
  font-size: 15px;
  font-weight: 550;
}
.conversion_main-ul2List-ipt {
  width: 80%;
  color: #5d5d5d;
  margin: 0.25rem 0 0 0;
}
.conversion_main-btn {
  width: 80%;
  font-size: 15px;
  margin: 0.65rem auto;
  padding: 0.25rem 0 0.25rem 0;
  border-radius: 25px;
  color: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#0dc6b6), to(#1dd69c));
}
</style>