<template>
  <div id="heads">
    <el-row>
      <el-col :span="24">
        <el-col :span="1" style="width: 35px;padding-top: 20px;">
          <el-image style="width: 35px; height: 35px;border-radius: 50%" :src="require('../../assets/top.png')"></el-image>
        </el-col>
        <el-col :span="14" class="title">
          吉企银通管理后台
        </el-col>
        <el-col :span="3" class="admin"> </el-col>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" style="">
          <el-form :model="form" :rules="rules">
            <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldpasswd">
              <el-input type="password" v-model="form.oldpasswd" autocomplete="off" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="newpasswd">
              <el-input type="password" v-model="form.newpasswd" autocomplete="off" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <div class="ccc">
              <el-form-item>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsave(form)">确 定</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-dialog>
        <el-col :span="6" class="admin">
          <el-tooltip class="item" effect="dark" content="修改密码" placement="bottom">
            <el-button type="text" @click="dialogFormVisible = true"><i class="el-icon-unlock"></i></el-button>
          </el-tooltip>
          <i class="el-icon-user icon"></i>
          <span class="name"> 管理员：{{ user.name }}</span>
          <span class="shu">|</span>
          <el-link :underline="false" class="out" @click="toLogout()">退出</el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: otheruser } = createNamespacedHelpers('otheruser');
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => ({
    rules: {
      oldpasswd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
      newpasswd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
    },
    dialogTableVisible: false,
    dialogFormVisible: false,
    form: {},
    formLabelWidth: '120px',
  }),
  created() {},
  watch: {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapMutations(['deleteUser']),
    ...otheruser(['query', 'fetch', 'updates', 'create']),

    async toLogout() {
      this.deleteUser();
      this.$message({
        message: '注销成功',
        type: 'success',
      });
      this.toLogin();
    },
    async toLogin() {
      this.$router.push({ name: 'login' });
    },

    async onsave(form) {
      this.form.uid = this.user.uid;
      console.log(form);
      let res = await this.updates(form);
      if (res.errcode === 0) {
        this.$router.push({ path: '/login' });
        this.$message({
          message: '修改密码成功',
          type: 'success',
        });
      }
      // this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #ffffff;
  padding: 23px 10px;
}
.admin {
  text-align: right;
  padding: 24px 30px;
}
.admin .icon {
  color: #fff;
  padding: 0 5px;
}
.admin .name {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.admin .shu {
  padding: 0 10px;
  color: rgba(255, 255, 255, 1);
}
.admin .out {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(233, 2, 29, 1);
}
.ccc {
  text-align: center;
}
/deep/.el-icon-unlock:before {
  content: '\e6e4';
  color: #ffffff;
}
/deep/.el-dialog {
  height: 340px;

  width: 33%;
}
</style>
