<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item :to="{ path: '/user' }">{{ $t("lang.personalCenter") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.profile") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <block-radius class="info_block">
      <el-tabs v-model="activeName" @tab-click="changeTab">
        <el-tab-pane label="个人信息详情" name="0"></el-tab-pane>
        <el-tab-pane label="业务系统详情" name="1"></el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form">
        <el-form-item class="info_item">
          <p>账号：</p>
          <el-input v-model="form.accountNo"></el-input>
        </el-form-item>
        <el-form-item class="info_item info_item_right_btn">
          <p>密码：</p>
          <el-input v-model="form.password"></el-input>
          <el-button class="option_btn" @click="changePassword">修改密码</el-button>
        </el-form-item>
        <el-form-item class="info_item">
          <p>昵称：</p>
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item class="info_item">
          <p>头像：</p>
          <upload-file
            :multiple="false"
            :max="1"
            type="cropper"
            :readOnly="false"
            :list="imgList"
            @getNewList="getNewList"
          ></upload-file>
        </el-form-item>
        <el-form-item class="info_item">
          <p>联系人：</p>
          <el-input v-model="form.contactPerson"></el-input>
        </el-form-item>
        <el-form-item class="info_item">
          <p>手机号：</p>
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item class="info_item">
          <p>邮箱：</p>
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item class="info_item">
          <p>组织机构：</p>
          <el-input v-model="form.organization"></el-input>
        </el-form-item>
        <el-form-item class="info_item info_item_right_btn">
          <p>当前角色：</p>
          <el-input v-model="form.role"></el-input>
          <el-button class="option_btn" @click="upLevel">升级为开发者</el-button>
        </el-form-item>
      </el-form>
      <div class="btn_footer">
        <el-button class="previous" @click="previous">取消</el-button>
        <el-button class="registe" @click="registe">修改</el-button>
      </div>
      <el-dialog
        title="修改密码"
        :visible.sync="diaPassWord"
        width="440px"
        :modal-append-to-body="false"
      >
        <div class="change_psw">
          <el-form ref="form" :model="form">
            <el-form-item class="dia_item">
              <p>旧密码：</p>
              <el-input v-model="form.accountNo"></el-input>
            </el-form-item>
            <el-form-item class="dia_item">
              <p>新密码：</p>
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item class="dia_item">
              <p>请再次输入密码：</p>
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dia_btn_footer">
          <el-button class="previous" @click="cancelChangePwd">取消</el-button>
          <el-button class="registe" @click="submitChangePwd">修改</el-button>
        </div>
      </el-dialog>
    </block-radius>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
import UploadFile from "@/components/upload_file";
export default {
  components: {
    BlockRadius,
    UploadFile
  },
  data: () => ({
    activeName: "0",
    form: {
      accountNo: "",
      password: "",
      nickname: "",
      contactPerson: "",
      phone: "",
      email: "",
      organization: "",
      role: ""
    },
    imgList: [],
    diaPassWord: false
  }),
  mounted() {
    this.imgList.push(
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    );
  },
  methods: {
    changeTab() {},
    getNewList(val) {
      console.log(val);
    },
    previous() {},
    registe() {},
    changePassword() {
      this.diaPassWord = true;
    },
    cancelChangePwd() {
      this.diaPassWord = false;
    },
    submitChangePwd() {},
    upLevel() {
      this.diaPassWord = true;
    }
  }
};
</script>
<style scoped>
.info_block {
  margin: 0 20px 20px;
  position: relative;
}
.btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 40px 20px 10px;
}
.previous {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.registe {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.option_btn {
  width: 124px;
  background-color: #495feb;
  border-radius: 8px;
  color: #f8f9fd;
}
.info_item {
  width: 70%;
  min-width: 600px;
  max-width: 1200px;
  margin-bottom: 12px;
}
.info_item p {
  padding-left: 15px;
  color: #242c43;
}
.change_psw {
  text-align: left;
}
.dia_item {
  width: 100%;
  margin-bottom: 12px;
}
.dia_item p {
  padding-left: 15px;
  color: #242c43;
}
.dia_btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 0;
}
</style>
<style>
.info_item_right_btn .el-input {
  width: calc(100% - 140px);
  margin-right: 10px;
}
.info_block .el-dialog__wrapper {
  padding-left: 180px;
}
.info_block .v-modal {
  position: absolute;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}
.info_block .el-dialog__body {
  padding: 15px 20px 20px;
}
</style>