<!--  -->
<template>
  <div class="share_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部个人信息 -->
    <div class="share_headrBox">
      <div :class="userName == 'admin' ? 'share_divBox' : 'share_divBox2'">
        <img
          src="../../assets/image/new/30.png"
          alt
          class="share_headrBox-img"
          @click="goBack()"
        />
        <div class="share_headrBox-tlt">积分详情</div>
        <img
          @click="listData()"
          v-if="userName == 'admin'"
          src="../../assets/image/new/42.png"
          alt=""
          class="share_headrBox-img"
        />
      </div>
    </div>

    <!-- 主内容 -->
    <div
      class="share_box-main"
      v-loading="loading"
      element-loading-text="拼命加载中"
    >
      <!-- 通知滚动 -->
      <!-- <div class="share_box-main-rollList">
        <div class="share_box-main-rollList-div">
          <img
            src="../../assets/image/new/29.png"
            alt=""
            class="share_box-main-rollList-div-img"
          />
          <div class="share_box-main-rollList-div-txt">
            用户123456789已兑换奖品雨伞
          </div>
        </div>
      </div> -->
      <div class="share_box-main-rollList" id="box">
        <div class="share_box-main-rollList-div">
          <img
            src="../../assets/image/new/29.png"
            alt=""
            class="share_box-main-rollList-div-img"
          />
          <ul id="con1" ref="con1" :class="{ anim: animate == true }">
            <li class="share_box-main-rollList-div-txt" v-for="item in items">
              用户{{ item.username }}已兑换奖品{{ item.prize_name }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 文字加按钮 -->
      <div class="share_box-main-txtBtn">
        <div class="share_box-main-txtBtn-txt">获取积分可退换精美礼品</div>

        <div class="share_box-main-txtBtn-div">
          <div class="share_box-main-txtBtn-div-btn">更多精美礼品等你来拿</div>
        </div>
      </div>

      <!-- 兑换奖品 -->
      <div class="share_box-main-prize">
        <ul class="share_box-main-prizUl">
          <li
            class="share_box-main-prizList"
            v-for="(item, index) in prizeData"
            :key="index"
          >
            <div class="share_box-main-prizList-box">
              <div class="share_box-main-prizList-box-num">
                {{ item.prize_integral }}分
              </div>
              <div class="share_box-main-prizList-box-name">
                {{ item.prize_name }}
              </div>
            </div>

            <!-- 兑换数量 -->
            <!-- <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number> -->

            <!-- 能兑换 -->
            <div
              class="share_box-main-prizList-btn"
              @click="conversion(item.id, item.prize_integral)"
              v-if="item.prize_integral <= integralVal"
            >
              兑换
            </div>
            <!-- 不能兑换 -->
            <div
              class="share_box-main-prizList-btnA"
              @click="noConversion()"
              v-else
            >
              兑换
            </div>
          </li>
        </ul>
      </div>

      <!-- 我的积分 -->
      <div class="share_box-main-myIntegral">
        <div class="share_box-main-myIntegral-div">
          我的积分：{{ integralVal }}
        </div>
      </div>

      <!-- 获取的积分 -->
      <div class="share_box-main-table">
        <el-table :data="tableData" style="width: 100%" height="250">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="diverse" label="行为" width="120">
          </el-table-column>
          <el-table-column prop="integral" label="积分" width="120">
          </el-table-column>
        </el-table>
      </div>

      <!-- 兑换数量弹框 -->
      <el-dialog title="兑换数量" :visible.sync="dialogVisible" width="60%">
        <el-input-number
          v-model="num"
          @change="handleChange"
          :min="1"
          :max="10"
          label="描述文字"
        ></el-input-number>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="(dialogVisible = false), add()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'share',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      tableData: [], //积分加分列表
      prizeData: [], //奖品展示列表数据
      integralVal: "", //当前用户个人积分值
      // 消息滚动提示
      animate: false,
      items: [], //奖品兑换记录
      isClick: true, //兑换开关
      num: 1, //兑换数量
      dialogVisible: false, //兑换数量弹框
      ids: "", //奖品id
      nums: "", //当前产品的兑换积分
      queding: null, //
      userName: "", //当前登录账号名称
      loading: true, //
      ret: '', //判断当前是从哪个页面进入的
    };
  },
  //监听属性 类似于data概念
  computed: {
    maxIndex() {
      return this.tips.length - 1;
    },
  },
  //监控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() {
      var that = this;
      if (that.ret == 'integral') {
        //从首页进入的
        that.$router.replace('/home')
      } else if (that.ret == 'myList') {
        that.$router.replace('/person')
      }
    },

    //兑奖记录数据
    informData() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/user_cashing",
          params: {
            page: 1,
          },
        })
        .then((res) => {
          var data = res.data;
          for (var i = 0; i < data.length; i++) {
            if (data[i].username !== "admin") {
              // 1字符串转化成数组
              let phoneArr = [...data[i].username];
              var n = "";
              // 2.将数组中的4-7位变成*
              phoneArr.map((res, index) => {
                if (index > 2 && index < 7) {
                  n += "*";
                  // return '*';
                } else {
                  n += res;
                }
              });
              data[i]["username"] = n;
            } else {
              data[i]["username"] = data[i].username;
            }
          }
          that.items = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 奖品列表
    prizeListData() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/user_prize",
        })
        .then((res) => {
          if (res.data.length !== 0) {
            that.prizeData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 积分列表数据
    itegralList() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/itegral_sign_list",
          params: {
            page: 1,
          },
        })
        .then((res) => {
          if (res.data.nums !== 0) {
            var data = res.data.data;
            var arr = [];
            for (var i = 0; i < data.length; i++) {
              var obj = {};
              obj["date"] = data[i].time;
              if (data[i].diverse == "0") {
                var k = "签到";
              } else if (data[i].diverse == "1") {
                var k = "回复";
              } else if (data[i].diverse == "2") {
                var k = "发帖";
              }
              obj["diverse"] = k;
              obj["integral"] = "+" + data[i].integral;
              arr.push(obj);
            }
            that.tableData = arr;
            that.loading = false
          }
          // console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 滚动提示
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },

    // 兑换奖品
    conversion(id, nums) {
      var that = this;
      that.dialogVisible = true;
      that.ids = id; //奖品id
      that.nums = nums; //当前产品的兑换积分
    },
    // 确定兑换
    add() {
      // 跳转到兑换奖品页面
      if (this.queding == true) {
        this.$router.push({
          name: "conversion",
          query: {
            id: this.ids,
            nums: this.num,
            integralVal: this.integralVal,
            userName: this.userName,
            ret: this.ret
          },
        });
      } else if (this.queding == false) {
        this.$notify.error({
          title: "错误",
          message: "当前积分未达到不能兑换",
          duration: 1500,
        });
      } else if (this.integralVal >= this.nums) {
        this.$router.push({
          name: "conversion",
          query: {
            id: this.ids,
            nums: this.num,
            integralVal: this.integralVal,
            userName: this.userName,
            ret: this.ret
          },
        });
      } else if (this.integralVal <= this.nums) {
        this.$notify.error({
          title: "错误",
          message: "当前积分未达到不能兑换",
          duration: 1500,
        });
      }
    },

    // 不能兑换奖品
    noConversion() {
      var that = this;
      var isClick = that.isClick;
      if (isClick === true) {
        that.isClick = false;
        that.$notify.error({
          title: "错误",
          message: "当前积分未达到不能兑换",
          duration: 1500,
        });

        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },

    // 兑换奖品数量
    handleChange(value) {
      var nums = parseInt(this.nums);
      var val = value * nums;
      // console.log(val);
      if (val <= parseInt(this.integralVal)) {
        this.queding = true;
        this.add();
      } else {
        this.queding = false;
      }
    },

    // 点击跳转到兑换列表
    listData() {
      var that = this;
      var num = that.integralVal
      var name = that.userName
      var ret = that.ret
      that.$router.push({
        name: 'conversionList',
        query: {
          num: num,
          name: name,
          ret: ret,
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.informData(); //兑奖记录数据
    setInterval(this.scroll, 1000);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.integralVal = this.$route.query.num; //个人积分
    this.userName = this.$route.query.name; //当前账号名称
    this.ret = this.$route.query.ret; //当前账号名称
    this.get_boderHeight();
    this.prizeListData(); //奖品列表数据
    this.itegralList(); //积分列表数据请求
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import "../../assets/scss/share.scss";

// elementui样式修改
.share_box-main-prizList .el-input-number {
  width: 160px;
}

// * {
//   margin: 0;
//   padding: 0;
// }
#box {
  width: 100%;
  height: 32px;
  overflow: hidden;
  padding: 1.1rem 0 0 0;
  // padding-left: 30px;
  // border: 1px solid black;
}
.anim {
  // transition: all 0.5s;
  transition: all 1.8s;
  // margin-top: -30px;
  margin-top: -70px;
}
#con1 li {
  list-style: none;
  // line-height: 30px;
  line-height: 22px;
  // height: 30px;
  height: 30px;
  text-align: left;
}
</style>