<template>
  <el-card id="information-card-body">
    <template #header>
      <span style="font-weight: bold; font-size: larger">
        基本信息
      </span>
    </template>
    <div>
      <el-row class="row">
        <el-col :span="3" class="title">
          昵称
        </el-col>
        <el-col :span="6">
          <el-input v-model="name" class="content" disabled/>
        </el-col>
        <el-col :span="1">
          <el-icon :size="18" class="content-edit" @click="nameEditable = !nameEditable">
            <Edit/>
          </el-icon>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="nameEditable" title="修改昵称" width="30vw" @open="newName=this.name">
      <el-input v-model="newName" autofocus compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" maxlength="10" placeholder="请输入昵称, 长度为1-10个字符"></el-input>
      <template #footer>
      <span>
        <el-button @click="cancelName">取消</el-button>
        <el-button type="primary" @click="saveName">确认</el-button>
      </span>
      </template>
    </el-dialog>

    <div>
      <el-row class="row">
        <el-col :span="3" class="title">
          用户名
        </el-col>
        <el-col :span="6">
          <el-input v-model="user.username" class="content" disabled/>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row class="row">
        <el-col :span="3" class="title">
          邮箱
        </el-col>
        <el-col :span="6">
          <el-input v-model="email" class="content" disabled/>
        </el-col>
        <el-col :span="1">
          <el-icon :size="18" class="content-edit" @click="emailEditable = !emailEditable">
            <Edit/>
          </el-icon>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="emailEditable" title="修改邮箱" width="30vw" @open="newEmail=this.email">
      <el-input v-model="newEmail" autofocus maxlength="255" placeholder="请输入邮箱"></el-input>
      <template #footer>
      <span>
        <el-button @click="cancelEmail">取消</el-button>
        <el-button type="primary" @click="saveEmail">确认</el-button>
      </span>
      </template>
    </el-dialog>

    <div>
      <el-row class="row">
        <el-col :span="3" class="title">
          手机号
        </el-col>
        <el-col :span="6">
          <el-input v-model="user.phone" class="content" disabled/>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row class="row">
        <el-col :span="3" class="title">
          个性签名
        </el-col>
        <el-col :span="6">
          <el-input v-model="signature" class="content" disabled/>
        </el-col>
        <el-col :span="1">
          <el-icon :size="18" class="content-edit" @click="signatureEditable = !signatureEditable">
            <Edit/>
          </el-icon>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="signatureEditable" title="修改个性签名" width="30vw" @open="newSignature=this.signature">
      <el-input v-model="newSignature" autofocus maxlength="20" placeholder="请输入个性签名，长度1-20个字符"></el-input>
      <template #footer>
      <span>
        <el-button @click="cancelSignature">取消</el-button>
        <el-button type="primary" @click="saveSignature">确认</el-button>
      </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { Edit } from "@element-plus/icons-vue";

export default {
  name: "InformationCard",
  components: { Edit },
  data() {
    return {
      newName: "",
      nameEditable: false,
      newEmail: "",
      emailEditable: false,
      newSignature: "",
      signatureEditable: false,
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    name() {
      return this.$store.state.user.name;
    },
    email() {
      return this.$store.state.user.email;
    },
    signature() {
      return this.$store.state.user.signature;
    }
  },
  methods: {
    cancelName() {
      this.newName = "";
      this.nameEditable = false;
    },
    saveName() {
      const that = this;
      this.$store.dispatch("update_user_name", that);
      this.nameEditable = false;
    },
    cancelEmail() {
      this.newEmail = "";
      this.emailEditable = false;
    },
    saveEmail() {
      const that = this;
      this.$store.dispatch("update_user_email", that);
      this.emailEditable = false;
    },
    cancelSignature() {
      this.newSignature = "";
      this.signatureEditable = false;
    },
    saveSignature() {
      const that = this;
      this.$store.dispatch("update_user_signature", that);
      this.signatureEditable = false;
    },
  }
};
</script>

<style scoped>
:deep(.el-card__body) {
  padding: 48px;
  display: grid;
  grid-gap: 24px;
}

.title {
  font-size: medium;
}

.row {
  display: flex;
  align-items: baseline;
}

.content-edit {
  padding-left: 10px;
}

.content-edit:hover {
  cursor: pointer;
  color: #409eff;
}
</style>