<template>
  <div class="person-box" :style="'height:' + fullHeight + 'px'">
    <!-- <el-main>
             
    </el-main>-->
    <img src="../../assets/imageOne/37.png" alt class="person-img" />

    <!-- 用户头像 -->
    <div class="person-portrait">
      <div class="demo-type person-drawing">
        <el-avatar :size="90" @error="errorHandler">
          <img class="imgA" src="../../assets/imageOne/750.png" />
          <!-- <img class="imgA" :src=" 'http://39.104.94.153/' + this.reData.photo" /> -->
        </el-avatar>
      </div>
      <!-- <div class="person-name-box">
        <div class="person-name" v-if="isShow">{{this.reData.username}}</div>
      </div> -->
    </div>

    <div class>
      <!-- 用户信息列表 -->
      <!-- <ul class="person-ul"> -->
      <ul :class="this.reData !== null ? 'person-ul' : 'person-ul-activ'">
        <!-- 用户名 -->
        <li class="person-li">
          <div class="person-li-div one">
            <img src="../../assets/imageOne/28.png" alt class="person-li-img" />
            <div class="person-li-name">用户名</div>
          </div>
          <div class="person-li-monicker" v-if="isShow">{{this.reData.name}}</div>
        </li>

        <!-- 账号创建时间 -->
        <li class="person-li">
          <div class="person-li-div two">
            <img src="../../assets/imageOne/30.png" alt class="person-li-img" />
            <div class="person-li-name">创建时间</div>
          </div>
          <div class v-if="isShow">
            <div class="person-li-monicker">{{this.reData.time}}</div>
          </div>
        </li>

        <!-- 所属用户 -->
        <li class="person-li">
          <div class="person-li-div three">
            <img src="../../assets/imageOne/29.png" alt class="person-li-img" />
            <div class="person-li-name">所属用户</div>
          </div>
          <div class="person-li-monicker" v-if="isShow">{{this.reData.username}}</div>
        </li>

        <!-- 用户电话 -->
        <li class="person-li">
          <div class="person-li-div four">
            <img src="../../assets/imageOne/27.png" alt class="person-li-img" />
            <div class="person-li-name">用户电话</div>
          </div>
          <div class="person-li-monicker" v-if="isShow">{{this.reData.phone}}</div>
        </li>

        <!-- 用户地址 -->
        <li class="person-li">
          <div class="person-li-div five">
            <img src="../../assets/imageOne/26.png" alt class="person-li-img" />
            <div class="person-li-name">用户地址</div>
          </div>
          <div
            class="person-li-monicker"
            v-if="isShow"
          >{{this.reData.addr | ellipsis}}</div>
        </li>
      </ul>

      <!-- 背景颜色+退出账号 -->
      <div class="person-beijing">
        <el-button type="text" class="person-btn" @click="dialogVisible = true">退出账号</el-button>
      </div>

      <!-- 退出弹出框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="7rem">
        <span>此操作会退出账号，是否继续？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
          <el-button type="primary" class="btn" @click="dialogVisible = false,queding()">确 定</el-button>
        </span>
      </el-dialog>

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

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

export default {
  inject: ["reload"],
  name: "person",
  //限时数据文本的字数限时
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    }
  },
  data() {
    return {
      dialogVisible: false,
      reData: JSON.parse(localStorage.getItem("personAxios")), //数据
      fullHeight: document.documentElement.clientHeight,
      isShow: false, //判断本地是否有数据
      rank: ["用户", "用户", "管理员"] //用户身份
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  components: {
    bottomNav
  },
  mounted() {
    this.get_boderHeight();
  },
  created() {
    let _this = this;
    if (localStorage.getItem("personAxios") !== null) {
      _this.isShow = true;
    } else {
      _this.isShow = false;
    }
  },
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    errorHandler() {
      return true;
    },

    queding() {
      let _this = this;
      sessionStorage.removeItem("login"); //删除session里的login标识
      localStorage.removeItem("weidu");
      localStorage.removeItem("jingdu");
      localStorage.removeItem("personAxios");

      localStorage.removeItem("shengAname");
      localStorage.removeItem("shengAcode");
      localStorage.removeItem("shiAname");
      localStorage.removeItem("shiAcode");
      localStorage.removeItem("xianAname");
      localStorage.removeItem("default");
      localStorage.removeItem("textarea");
      sessionStorage.removeItem("Administrator");
      sessionStorage.removeItem("common");
      this.$notify({
        title: "成功",
        message: "账号已经成功退出",
        type: "success",
        duration: 1000
      });
      _this.$router.replace("/");
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/person.scss";
</style>
