<template>
  <div v-if="show" class="right">
    <div class="showTitle">
      <el-icon>
        <Tickets />
      </el-icon>
      <h2>基本信息</h2>
      <input type="button" v-if="isCancel" value="取消" />
      <input type="button" @click="convertMsg($event)" value="修改" />
    </div>
    <table class="bigtable">
      <tr>
        <td class="title">
          <div>
            <el-icon>
              <User />
            </el-icon>
            <h3>账户名</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" v-model="username" disabled />
        </td>
        <td class="title">
          <div>
            <el-icon>
              <Avatar />
            </el-icon>
            <h3>用户名</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.nickName" type="text" disabled />
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <el-icon>
              <Clock />
            </el-icon>
            <h3>年龄</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" disabled v-model="age" />
        </td>
        <td class="title">
          <div>
            <el-icon>
              <UserFilled />
            </el-icon>
            <h3>性别</h3>
          </div>
        </td>
        <td>
          <select id="gender" disabled v-model="sex">
            <option value="">请选择</option>
            <option value="0">男</option>
            <option value="1">女</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <el-icon>
              <Iphone />
            </el-icon>
            <h3>手机号</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.phone" type="text" disabled />
        </td>
        <td class="title">
          <div>
            <el-icon>
              <Location />
            </el-icon>
            <h3>地区</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.area" type="text" disabled />
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <el-icon><img class="vipImg" src="../../img/VIP.png" /></el-icon>
            <h3>Vip</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.vip" type="text" disabled />
        </td>
        <td class="title">
          <div>
            <el-icon>
              <InfoFilled />
            </el-icon>
            <h3>积分</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.points" type="text" disabled />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {
  Tickets,
  PictureFilled,
  Avatar,
  UserFilled,
  Iphone,
  Location,
  Clock,
  User,
  InfoFilled,
} from "@element-plus/icons-vue";
import { userInfo, convertInfo } from "@/api";
import { mapState, mapMutations } from "vuex";

/* import $ from 'jquery' */
export default {
  name: "BasicInfo",
  data() {
    return {
      isCancel: false,
      show: true,
      avatar: "",
      age: "",
      username: "",
      nickName: "",
      area: "",
      sex: "",
      phone: "",
      vip: "",
      points: "",
    };
  },
  components: {
    InfoFilled,
    User,
    Clock,
    Location,
    Tickets,
    PictureFilled,
    Avatar,
    UserFilled,
    Iphone,
  },
  computed: {
    ...mapState("LoginStore", ["tokenStore"]),
  },
  created() {
    //页面加载时就从本地通过localstorage获取存储的token值
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    this.getInfo()
  },
  methods: {
    ...mapMutations("PerCent", ["convertMsgStore"]),
    ...mapMutations("LoginStore", ["setLoginName"]),
    getInfo(){
      userInfo().then((response) => {
      if (response.data.code === 200) {
        this.age = response.data.data.age;
        this.avatar = response.data.data.avatar;
        this.username = response.data.data.userName;
        this.nickName = response.data.data.nickName;
        this.area = response.data.data.area;
        this.sex = response.data.data.sex;
        this.phone = response.data.data.phone;
        this.points = response.data.data.points;
        this.vip = response.data.data.vip;
        this.setLoginName(this.nickName)
      } else {
        alert("服务器出错了，请重试!");
      }
    });
    },
    validate() {
      let errMsg = "";
      const phoneRegx =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      if (this.age < 0) {
        errMsg = "年龄不能小于0岁<br/>";
      }
      if (!phoneRegx.test(this.phone)) {
        errMsg += "手机号格式不正确<br/>";
      }
      if (errMsg != "") {
        alert(errMsg);
        return false;
      } else {
        return true;
      }
    },
    convertMsg(e) {
      //修改信息
      if (e.currentTarget.getAttribute("value") == "确认修改") {
        //更新个人基础信息
        const params = {
          age: this.age,
          username: this.username,
          nickName: this.nickName,
          area: this.area,
          sex: this.sex,
          phone: this.phone,
          points: this.points,
        };
        if (this.validate()) {
          convertInfo(params).then((response) => {
            if (response.data.code === 200) {
              this.show = false;
              this.getInfo()
              alert("修改成功");
              this.$router.go(0)
              this.show = true;
            } else {
              alert("修改失败");
            }
            this.isCancel = false;
          });
        }
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        for (var i = 1; i < n; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].setAttribute("disabled", "disabled");
        }
        document.documentElement
          .getElementsByTagName("select")[0]
          .setAttribute("disabled", "disabled");
        e.currentTarget.setAttribute("value", "修改");
      } //退出修改信息
      else if (e.currentTarget.getAttribute("value") == "修改") {
        this.isCancel = true
        // document.documentElement
        //   .getElementsByClassName("upAvatar")[0]
        //   .setAttribute("style", "display:block");
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        for (var i = 2; i < n - 2; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].removeAttribute("disabled");
        }
        document.documentElement
          .getElementsByTagName("select")[0]
          .removeAttribute("disabled");
        //vip不可以修改
        document.documentElement;
        document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input")[6]
          .setAttribute("disabled", "disabled");
        e.currentTarget.setAttribute("value", "确认修改");
      }
    },
    cancel(e){
      document.documentElement
          .getElementsByClassName("upAvatar")[0]
          .setAttribute("style", "display:none");
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        for (var i = 2; i < n - 2; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].setAttribute("disabled", "disabled");
        }
        document.documentElement
          .getElementsByTagName("select")[0]
          .setAttribute("disabled", "disabled");
        //vip不可以修改
        document.documentElement;
        document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input")[6]
          .setAttribute("disabled", "disabled");
        this.isCancel = false
      }
  },
};
</script>
<style scoped>
.right {
  width: 59rem;
  background-color: rgb(255, 255, 255);
  /* top: 1rem; */
  /* left: 24rem; */
  border: 1px solid gray;
  border-radius: 10px;
  display: inline-block;
  margin: 0;
  margin-left: 25rem;
  float: left;
  margin-top: -43rem;
}

.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}

.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
}

table {
  width: 95%;
  margin: 0 auto;
  margin-top: 3rem;
  font-size: small;
  font-weight: bolder;
  border-collapse: separate;
  /* 控制是否合并边框 */
  border-spacing: 0;
  /* 控制单元格之间的距离 */
  border: solid 2px rgb(215, 215, 215);
  /*控制外边框*/
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 8rem;
}

td {
  text-align: left;
  padding: 0.5rem;
  border-top: 1px solid rgb(213, 213, 213);
}

td:last-child,
th:last-child {
  border-right-color: transparent;
}

.title {
  width: 4rem;
  background-color: rgb(245, 245, 245);
  padding-left: 1rem;
  margin: 0;
}

.headPortrait {
  height: 6rem;
}

td,
th {
  border-right: 2px solid rgb(213, 213, 213);
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
  font-size: large;
}

table td h3 {
  display: inline-block;
  font-size: 1rem;
}

table td .el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
  font-size: large;
  position: absolute;
  top: 1.1rem;
  left: -0.4rem;
}

table td div {
  position: relative;
  text-align: justify;
  padding-left: 1rem;
}

input[type="button"] {
  background-color: #409eff;
  width: 6rem;
  height: 2rem;
  border-radius: 1rem;
  position: absolute;
  right: 2rem;
  border: none;
  top: 0.5rem;
  color: white;
  text-aselcectlign: center;
  letter-spacing: 0.3rem;
  cursor: pointer;
}

/* 输入框的样式 */
table input[data-v-b263d3c0] {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 90%;
  height: 2rem;
  border: none;
  /* outline: none; */
  color: rgb(63, 62, 62);
  font-size: 1rem;
  font-weight: bold;
  padding-left: 0.5rem;
}

.input {
  padding: 0;
  padding-left: 0.4rem;
}

table select {
  width: 5rem;
  font-size: 1rem;
  border: none;
}

table select:disabled {
  width: 5rem;
  color: black;
  font-size: 1rem;
  border: none;
  font-weight: bold;
}

/* 头像样式 */
.avatarParent {
  position: relative;
}

.avatar {
  margin-top: 0.5rem;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
}

table input[type="file"] {
  display: none;
  position: absolute;
  top: -1.5rem;
  left: 8rem;
  /*   background-color: #409eff;
  border: none;
  color: white; */
}

table img {
  width: 100%;
  height: auto;
}

/* vip图片 */
.vipImg {
  width: 1.4rem !important;
  height: auto !important;
  position: absolute;
  left: -0.1rem;
  top: -0.25rem;
}
</style>
