<template>
  <div class="personal-info">
    <el-descriptions class="margin-top" title="个人信息" :column="3" border>
      <template slot="extra">
        <div v-if="!isEditing">
          <el-button
            type="primary"
            size="small"
            @click.native="handleEdit('userInfo')"
            >编辑个人信息</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click.native="handleEdit('pwd')"
            >修改密码</el-button
          >
        </div>
        <div v-else>
          <el-button type="primary" size="small" @click.native="handleReSet"
            >取消修改</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click.native="handleSubmit('userInfo')"
            >保存</el-button
          >
        </div>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        <el-input
          v-if="isEditing"
          v-model="userInfoForm.username"
          size="small"
        ></el-input>
        <span v-else> {{ userInfo.username }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        <el-input
          size="small"
          v-if="isEditing"
          v-model="userInfoForm.phone"
        ></el-input>
        <span v-else> {{ userInfo.phone }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      width="400px"
      :modal="false"
    >
      <!-- <el-form :model="pwdData" label-position="right" label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="pwdData.oldPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdData.newPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码">
          <el-input v-model="pwdData.repeatPwd" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Info",
  data() {
    return {
      dialogFormVisible: false,
      pwdData: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: "",
      },
      isEditBasicInfo: true,
      isEditing: false,
      userInfoForm: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },

  mounted() {
    this.userInfoForm = JSON.parse(JSON.stringify(this.userInfo));
  },
  methods: {
    handleEdit(type) {
      switch (type) {
        case "userInfo":
          this.isEditing = true;
          break;
        case "pwd":
          if (this.isEditing) {
            this.isEditing = false;
          }
          break;
      }
    },

    handleSubmit(type) {
      switch (type) {
        case "userInfo":
          console.log(this.userInfoForm);
          break;
        case "pwd":
          break;
      }
    },

    handleReSet() {
      this.isEditing = false;
    },
    editInfo() {
      this.dialogFormVisible = true;
      this.isEditBasicInfo = true;
    },
    editPassword() {
      this.dialogFormVisible = true;
      this.isEditBasicInfo = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header.is-left {
  margin-right: 50px;
}
::v-deep .el-descriptions__extra {
  .el-button {
    background-color: #2069c4;
    border-radius: 0;
    border: none;
  }
}
</style>