<template>
  <div class="app-container">
    <el-descriptions title="基本信息" :column="1">
      <template slot="extra">
        <el-button type="primary" size="small" @click="handleEdit"
          >编辑</el-button
        >
      </template>
      <el-descriptions-item label="账号"> {{ name }} </el-descriptions-item>
      <el-descriptions-item label="密码"> ****** </el-descriptions-item>
      <el-descriptions-item label="头像">
        <el-avatar :src="avatar"></el-avatar>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 用户信息弹出层 -->
    <el-dialog
      title="用户信息"
      :visible.sync="userDialog"
      class="common-dialog"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        size="mini"
        label-width="80px"
      >
        <el-form-item label="账号" prop="name">
          {{ name }}
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            style="width: 15rem"
            v-model.trim="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <ImageUpload class="upload" :isShowTip="false" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >保存</el-button
        >
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ImageUpload from "@/components/ImageUpload";
import { mapGetters } from "vuex";
import { validateForm, validatePassword } from "@/utils/validate";
import { resetAccountPwd } from "@/api/system/account";
export default {
  name: "Account",
  components: { ImageUpload },
  data() {
    return {
      userDialog: false,
      loading: false,
      form: {
        password: "",
        avatar: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: validateForm(
              validatePassword,
              "密码至少由6个字母或数字"
            ),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["avatar", "name", "userId"]),
  },

  methods: {
    handleEdit() {
      this.userDialog = true;
    },
    close() {
      this.userDialog = false;
    },
    async handleSubmit() {
      await this.$refs["form"].validate();
      this.loading = true;
      await resetAccountPwd(this.userId, this.form.password)?.finally(() => {
        this.loading = false;
      });
      await this.$modal.alertSuccess("密码修改成功");
      this.$store.dispatch("LogOut").then(() => {
        location.href = "/";
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .upload .el-upload {
  width: 80px;
  height: 80px;
  line-height: 88px;
  border-radius: 10%;
}
</style>
