<!--  -->
<template>
  <div class="conversionListDetails_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部个人信息 -->
    <div class="conversionListDetails_headrBox">
      <div
        :class="
          index == 0
            ? 'conversionListDetails_divBox'
            : 'conversionListDetails_divBox2'
        "
      >
        <img
          src="../../assets/image/new/30.png"
          alt
          class="conversionListDetails_headrBox-img"
          @click="goBack()"
        />
        <div class="conversionListDetails_headrBox-tlt">兑换详情</div>
        <img
          @click="addData()"
          v-if="index == 0"
          src="../../assets/image/new/46.png"
          alt=""
          class="conversionListDetails_headrBox-img"
        />
      </div>
    </div>

    <!-- 主内容 -->
    <div class="conversionListDetails_main">
      <ul class="conversionListDetails_ul">
        <li class="conversionListDetails_list">
          <img
            src="../../assets/image/new/44.png"
            alt=""
            class="conversionListDetails_list_img"
          />
          <div class="conversionListDetails_list_box">
            <div class="conversionListDetails_list_box_div1">
              <div class="conversionListDetails_list_box_div1_name">
                {{ redata.consignee }}
              </div>
              <div class="conversionListDetails_list_box_div1_phone">
                {{ redata.consignee_phone }}
              </div>
            </div>
            <div class="conversionListDetails_list_box_div2">
              {{ redata.consignee_region + redata.consignee_address }}
            </div>
          </div>
        </li>
        <li class="conversionListDetails_list" style="margin: 0.25rem 0 0 0">
          <img
            src="../../assets/image/new/45.png"
            alt=""
            class="conversionListDetails_list_img"
          />
          <div class="conversionListDetails_list_box">
            <div class="conversionListDetails_list_box_div1">
              <div class="conversionListDetails_list_box_div1_name">
                快递单号
              </div>
            </div>
            <div class="conversionListDetails_list_box_div2">
              {{ iptNums == "" ? "暂无快递单号" : iptNums }}
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 快递单号弹框 -->
    <el-dialog title="添加" :visible.sync="dialogVisible" width="65%">
      <el-input v-model="input" placeholder="请输入相应的快递单号"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogVisible = false), addNums(redata.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight, //自定义高度
      redata: {}, //数据
      index: null, //是0未处理还是1已处理
      input: "", //快递单号
      dialogVisible: false,
      iptNums: "", //请求接口后获取到的单号
      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);
      }
    },

    dialogVisible(val) {
      if (val == false) {
        this.input = "";
      }
    },

    //快递单号
    input(val) {
      this.input = this.input.replace(
        /[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/g,
        ""
      );
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 返回
    goBack() {
      var that = this;
      that.$router.replace({
        name: 'conversionList',
        query: {
          name: that.userName,
          num: that.integralVal,
          ret: that.ret
        }
      });
    },

    // 点击右上角添加快递单号
    addData() {
      var that = this;
      that.dialogVisible = true;
    },

    //点击确定向后端发送请求
    addNums(id) {
      var that = this;
      var form = new FormData();
      form.append("id", id);
      form.append("courier_number", that.input);
      var nums = that.input;
      //   that
      //     .$axios({
      //       method: "post",
      //       url: "http://192.168.1.8:8002/user_prize_list",
      //       data: form,
      //       headers: {
      //         "Content-Type": "multipart/form-data",
      //       },
      //     })
      //     .then((res) => {
      //       if (res.data.code == "200") {
      //         that.$message({
      //           type: "success",
      //           message: "填写快递单号成功！！！",
      //           duration: 1500,
      //         });
      //         that.iptNums = nums
      //       } else {
      //         that.$notify.error({
      //           title: "错误",
      //           message: "填写快递单号失败！！！",
      //           duration: 1500,
      //         });
      //       }
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.integralVal = this.$route.query.num; //个人积分
    this.userName = this.$route.query.name; //当前账号名称
    this.ret = this.$route.query.ret; //判断当前是从哪个界面进入
    this.redata = JSON.parse(this.$route.query.data); //数据
    this.iptNums = this.redata.courier_number == null || this.redata.courier_number == "" ? '' : this.redata.courier_number
    this.index = this.$route.query.nowIndex; //判断是 0未处理 还是 1已处理
    console.log(this.redata);
    this.get_boderHeight();
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.conversionListDetails_box {
  background: #f7f8fc;
}

// 个人头部信息
.conversionListDetails_headrBox {
  background: -webkit-linear-gradient(right, #0dc6b6, #0cd3aa, #1dd69c);
}

.conversionListDetails_divBox {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 0 0 0.5rem;
}
.conversionListDetails_divBox2 {
  display: flex;
  justify-content: space-between;
  width: 55%;
  margin: 0 0 0 0.5rem;
}

.conversionListDetails_headrBox-tlt {
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 8px 0 8px 0;
}

.conversionListDetails_headrBox-img {
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
  margin-top: 0.3rem;
}

// 主内容
.conversionListDetails_main {
}
.conversionListDetails_ul {
}
.conversionListDetails_list {
  background: #fff;
  display: flex;
  padding: 0.35rem 0 0.35rem 0.35rem;
}
.conversionListDetails_list_img {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0.15rem 0 0 0;
}
.conversionListDetails_list_box {
  margin: 0 0 0 0.35rem;
}

.conversionListDetails_list_box_div1 {
  display: flex;
}
.conversionListDetails_list_box_div1_name {
  font-size: 14px;
  text-align: left;
  font-weight: 550;
  line-height: 0.65rem;
}
.conversionListDetails_list_box_div1_phone {
  font-size: 12px;
  text-align: left;
  color: #8a8a8a;
  line-height: 0.65rem;
  margin: 0 0 0 0.15rem;
}

.conversionListDetails_list_box_div2 {
  margin: 0.15rem 0 0 0;
  text-align: left;
  font-weight: 500;
}
</style>