<!--  -->
<template>
  <div
    class="person_box"
    :style="'height:' + fullHeight + 'px'"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :modal-append-to-body="false"
  >
    <!-- 用户名称、头像和编辑 -->
    <div class="person_head">
      <!-- 用户名称、手机号、编辑 -->
      <div class="person_head_naphbj">
        <!-- 名称 -->
        <div
          class="person_head_name"
        >{{ this.redata.user_remark !== null || this.redata.user_remark !== '' ? this.redata.user_remark : this.redata.username }}</div>

        <!-- 手机号 -->
        <div class="person_head_phone">{{ this.str }}</div>

        <!-- 跳转到编辑页面 -->
        <div @click="mine()" class="person_head_editor">编辑个人信息>></div>
      </div>
      <!-- 用户名称、手机号、编辑 -->

      <!-- 用户头像 -->
      <div class="person_head_imageBox">
        <img
          preview="1"
          :src=" 'bigservers/' + this.redata.user_photo"
          alt
          class="person_head_imageBox_img"
        />
      </div>
      <!-- 用户头像 -->
    </div>
    <!-- 用户名称、头像和编辑 -->

    <!-- 采集病虫害-手动录入新建 -->
    <div class="gatherInsect_box" @click="addData()">
      <!-- 虫图标 -->
      <img src="../../assets/image/insectaaa.png" alt class="gatherInsect_box_insect" />

      <!-- 标题 -->
      <div class="gatherInsect_box_title">手动录入病虫害</div>

      <!-- 火图标 -->
      <img src="../../assets/image/HOT.png" alt class="gatherInsect_box_hot" />
    </div>
    <!-- 采集病虫害-手动录入新建 -->

    <!-- 内容列表 -->
    <ul class="person_box_ul">
      <!-- 分享 -->
      <li class="person_box_list" @click="share()">
        <div class="person_box_list_text">扫码下载</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>

      <!-- 帮助说明 -->
      <li class="person_box_list" @click="help()">
        <div class="person_box_list_text">关于我们</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>

      <!-- 意见反馈 -->
      <!-- <li class="person_box_list" @click="message()">
        <div class="person_box_list_text">意见反馈</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>-->

      <!-- 版本更新 -->
      <li class="person_box_list" @click="versions_update()">
        <img
          v-show="this.new == '1'"
          src="../../assets/image/yuandian.png"
          alt
          class="person_box_list_imageA"
        />
        <div class="person_box_list_text">版本更新</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>

      <!-- 版本更新记录 -->
      <li class="person_box_list" @click="versions_updateHistory()">
        <div class="person_box_list_text">版本更新记录</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>

      <!-- 退出登录 -->
      <li class="person_box_list" @click="log_out()">
        <div class="person_box_list_text">退出登录</div>
        <img src="../../assets/image/right.png" alt class="person_box_list_image" />
      </li>
    </ul>
    <!-- 内容列表 -->

    <!-- 底部导航 -->
    <bottomNav></bottomNav>
    <!-- 底部导航 -->
  </div>
</template>

<script>
import bottomNav from "../bottomNav/bottomNav"; //底部导航栏

export default {
  components: {
    bottomNav
  },
  data() {
    //这里存放数据
    return {
      isClick: true, //开关
      fullHeight: document.documentElement.clientHeight,
      redata: [], //数据
      str: "", //加密手机号
      loading: true, //加载动画
      new: "" //判断当前是否为最新版本
    };
  },
  //监听属性 类似于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;
        })();
      };
    },

    //用户信息数据
    userAjax() {
      let _this = this;
      _this
        .$axios({
          method: "get",
          url: "bigservers/see_user "
        })
        .then(res => {
          _this.loading = false;
          _this.redata = res.data[0];
          _this.phonePad(res.data[0].user_phone);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //将手机号码加密
    phonePad(p) {
      // 1字符串转化成数组
      let phoneArr = [...p];
      // 2.将数组中的4-7位变成*
      phoneArr.map((res, index) => {
        if (index > 2 && index < 7) {
          this.str += "*";
          // return '*';
        } else {
          this.str += res;
        }
      });
      return this.str;
    },

    //点击跳转到用户基础资料修改页面
    mine() {
      this.$router.push("/mine");
    },

    //点击跳转到手动录入病虫害页面
    addData() {
      localStorage.removeItem("add");
      this.$router.push("/addData");
    },

    //点击跳转到扫码下载页面
    share() {
      this.$router.push("/share");
    },

    //点击跳转到关于我们页面
    help() {
      this.$router.push("/help");
    },

    //点击跳转到意见反馈页面
    message() {
      this.$router.push("/message");
    },

    //点击版本查看是否有新版
    versions_update() {
      let _this = this;
      var isClick = _this.isClick;
      if (isClick === true) {
        _this.isClick = false;
        _this
          .$axios({
            method: "get",
            url: "bigservers/edition"
          })
          .then(res => {
            let num = "114";
            var data = res.data.edition_num;
            var a = data.replace(/\./g, "");
            if (num == a) {
              console.log("当前已经是最新版本");
              this.$message({
                showClose: true,
                message: "当前已经是最新版本",
                duration: 1500
              });
            } else if (num < a) {
              _this.new = "1"; //添加标识
              this.$confirm("检测到有最新版本, 是否更新?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
                .then(() => {
                  _this.new = "0"; //取消标识
                  window.location.href =
                    "bigservers/down_app/deity.apk";
                  // this.$message({
                  //   type: "success",
                  //   message: "更新成功!"
                  // });
                })
                .catch(() => {
                  _this.new = "1"; //如果用户进行取消就给列表添加个醒目的标识
                  this.$message({
                    type: "info",
                    message: "取消更新",
                    duration: 1500
                  });
                });
            }
            // console.log(res.data);
          })
          .catch(err => {
            console.log(err);
          });
        setTimeout(function() {
          _this.isClick = true;
        }, 2000);
      }
    },

    //点击版本查看是否有新版
    versions_updateA() {
      let _this = this;
      _this
        .$axios({
          method: "get",
          url: "bigservers/edition"
        })
        .then(res => {
          let num = "114";
          var data = res.data.edition_num;
          var a = data.replace(/\./g, "");
          if (num == a) {
            console.log("当前已经是最新版本");
            // this.$message({
            //   showClose: true,
            //   message: "当前已经是最新版本"
            // });
          } else if (num < a) {
            _this.new = "1"; //添加标识
            this.$confirm("检测到有最新版本, 是否更新?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                _this.new = "0"; //取消标识
                window.location.href =
                  "bigservers/down_app/deity.apk";
                // this.$message({
                //   type: "success",
                //   message: "更新成功!"
                // });
              })
              .catch(() => {
                _this.new = "1"; //如果用户进行取消就给列表添加个醒目的标识
                this.$message({
                  type: "info",
                  message: "取消更新"
                });
              });
          }
          // console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //点击版本更新历史进行跳转
    versions_updateHistory() {
      this.$router.push("/versions_updateHistory");
    },

    //退出登录
    log_out() {
      this.$confirm("即将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "bigservers/out_land"
          })
            .then(res => {
              if (res.data === 0) {
                this.$message({
                  type: "success",
                  message: "退出成功!"
                });
                sessionStorage.removeItem("login");
                this.$router.replace("/");
              } else if (res.data === 1) {
                this.$message({
                  type: "info",
                  message: "退出失败，请重试",
                  duration: 1500
                });
              }
            })
            .catch(err => {
              this.$message({
                type: "info",
                message: "退出失败，请重试",
                duration: 1500
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出",
            duration: 1500
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.userAjax(); //用户信息数据
    this.versions_updateA(); //查看当前是否为最新版本
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/person.scss";
</style>