<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-if="is_admin == 3 || is_admin == 4" 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>
      <div v-if="activeName == '0'">
        <el-form ref="form" :model="user_data">
          <el-form-item class="info_item">
            <p>账号：</p>
            <el-input v-model="user_data.accountNo"></el-input>
          </el-form-item>
          <el-form-item class="info_item info_item_right_btn">
            <p>密码：</p>
            <el-input type="password" v-model="user_data.password" :disabled="true"></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="user_data.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="user_data.contactPerson"></el-input>
          </el-form-item>
          <el-form-item class="info_item">
            <p>手机号：</p>
            <el-input v-model="user_data.phone"></el-input>
          </el-form-item>
          <el-form-item class="info_item">
            <p>邮箱：</p>
            <el-input v-model="user_data.email"></el-input>
          </el-form-item>
          <el-form-item class="info_item">
            <p>组织机构：</p>
            <el-input v-model="user_data.organization" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item class="info_item info_item_right_btn">
            <p>当前用户类型：</p>
            <el-select v-model="user_data.userType" :disabled="true">
              <el-option
                v-for="item in userTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button class="option_btn" @click="upLevel">升级为开发者</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="activeName == '1'">
        <el-form ref="formBusiness" :model="formBusiness">
          <el-form-item class="info_item">
            <p>业务系统名：</p>
            <el-input v-model="formBusiness.businessSystemName"></el-input>
          </el-form-item>
          <el-form-item class="info_item">
            <p>域名：</p>
            <el-input v-model="formBusiness.domainName"></el-input>
          </el-form-item>
          <el-form-item class="info_item">
            <p>IP（白名单）：</p>
            <div class="ip_block">
              <div v-for="item in formBusiness.ip_white" :key="item.id" class="ip_item">
                {{ item.ip }}
                <i class="el-icon-close ip_del" @click="delIp(item.ip, 'white')"></i>
              </div>
              <el-input
                v-if="whiteAddShow"
                class="ip_input"
                v-model="newIpWhite"
                @keyup.enter.native="watchKeyboardWhite"
              ></el-input>
              <el-button class="add_ip" @click="addIp('white')" icon="el-icon-plus">增加</el-button>
            </div>
          </el-form-item>
          <el-form-item class="info_item">
            <p>IP（黑名单）：</p>
            <div class="ip_block">
              <div v-for="item in formBusiness.ip_black" :key="item.id" class="ip_item">
                {{ item.ip }}
                <i class="el-icon-close ip_del" @click="delIp(item.ip, 'black')"></i>
              </div>
              <el-input
                v-if="blackAddShow"
                class="ip_input"
                v-model="newIpBlack"
                @keyup.enter.native="watchKeyboardBlack"
              ></el-input>
              <el-button class="add_ip" @click="addIp('black')" icon="el-icon-plus">增加</el-button>
            </div>
          </el-form-item>
          <el-form-item class="info_item info_item_right_btn_2">
            <p>密钥：</p>
            <el-input ref="keys" v-model="formBusiness.key"></el-input>
            <el-button class="option_btn" @click="copyKey">复制</el-button>
            <el-button class="option_btn_gray" @click="upLevel">重置</el-button>
          </el-form-item>
          <el-form-item class="info_item">
            <p>描述：</p>
            <el-input type="textarea" :rows="2" v-model="formBusiness.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <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.passwordOld"></el-input>
            </el-form-item>
            <el-form-item class="dia_item">
              <p>新密码：</p>
              <el-input v-model="form.passwordNew"></el-input>
            </el-form-item>
            <el-form-item class="dia_item">
              <p>请再次输入密码：</p>
              <el-input v-model="form.nextname"></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",
    is_admin: 0,
    user_data: {
      accountNo: "",
      password: "12345678",
      nickname: "",
      contactPerson: "",
      phone: "",
      email: "",
      organization: "",
      userType: ""
    },
    form: {
      passwordOld: "",
      passwordNew: "",
      nextname: ""
    },
    imgList: [],
    formBusiness: {
      businessSystemName: "",
      domainName: "",
      ip_white: [
        { ip: "255.255.255.255", id: "123789244" },
        { ip: "255.255.255.255", id: "123576744" },
        { ip: "255.255.255.255", id: "123467866874" },
        { ip: "255.255.255.255", id: "1226783544" }
      ],
      ip_black: [
        { ip: "255.255.255.255", id: "12773844" },
        { ip: "255.255.255.255", id: "12561344" },
        { ip: "255.255.255.255", id: "1235672344" },
        { ip: "255.255.255.255", id: "12342314" },
        { ip: "255.255.255.255", id: "12386444" },
        { ip: "255.255.255.255", id: "12783544" },
        { ip: "255.255.255.255", id: "121678344" },
        { ip: "255.255.255.255", id: "127678344" }
      ],
      key: "",
      description: ""
    },
    whiteAddShow: false,
    blackAddShow: false,
    newIpWhite: "",
    newIpBlack: "",
    diaPassWord: false,
    userTypeOptions: [
      { value: 1, label: "超级管理员" },
      { value: 2, label: "组织管理员" },
      { value: 3, label: "普通用户" },
      { value: 4, label: "普通用户开发者" }
    ]
  }),
  mounted() {
    this.getCurrentUser();
  },
  methods: {
    getCurrentUser() {
      this.$api.user.getNowUser().then(response => {
        if (response.data.success == 1) {
          this.is_admin = response.data.data.is_admin;
          this.getUserInfo(response.data.data.user_id);
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    getUserInfo(id) {
      this.$api.user.getUserDetail({ id: id }).then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.user_data.accountNo = data.user_id;
          this.user_data.nickname = data.user_name;
          this.user_data.contactPerson = data.link_man;
          this.user_data.phone = data.phone;
          this.user_data.email = data.email;
          this.user_data.organization = data.department;
          this.user_data.userType = data.is_admin;
          this.imgList.push(data.picture_path);
          this.formBusiness.businessSystemName = data.system_name;
          this.formBusiness.domainName = data.domain_name;
          this.formBusiness.ip_white = data.ip_whitelist;
          this.formBusiness.ip_black = data.ip_blacklist;
          this.formBusiness.key = data.key;
          this.formBusiness.description = data.description;
        }
      });
    },
    changeTab() {},
    getNewList(val) {
      this.imgList[0] = val.url;
    },
    previous() {},
    registe() {
      let query = {};
      if (this.activeName == 0) {
        console.log(this.user_data, this.imgList);
        query = {
          pageType: "personalFile", // this page is user info
          user_id: this.user_data.accountNo,
          user_name: this.user_data.nickname,
          phone: this.user_data.phone,
          email: this.user_data.email,
          is_admin: this.user_data.userType,
          link_man: this.user_data.contactPerson,
          picture_path: this.imgList[0]
        };
      } else if (this.activeName == 1) {
        query = {
          pageType: "systemFile", // this page is system info
          system_name: this.formBusiness.businessSystemName,
          domain_name: this.formBusiness.domainName,
          ip_whitelist: this.formBusiness.ip_white,
          ip_blacklist: this.formBusiness.ip_black,
          description: this.formBusiness.description
        };
      }
      this.$api.authority.setUserInfo(query).then(response => {
        if (response.data.success == 1) {
          this.$message({
            message: "修改个人信息成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "修改个人信息失败",
            type: "error"
          });
        }
      });
    },
    changePassword() {
      this.diaPassWord = true;
    },
    cancelChangePwd() {
      this.diaPassWord = false;
    },
    submitChangePwd() {
      this.$api.user.editUserPassword(query).then(response => {
        if (response.data.success == 1) {
          this.$message({
            message: "修改密码成功",
            type: "success"
          });
          this.diaPassWord = false;
        } else {
          this.$message({
            message: "修改密码失败",
            type: "error"
          });
        }
      });
    },
    upLevel() {},
    copyKey() {
      this.$refs.keys.select();
      document.execCommand("Copy");
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    delIp(ip, type) {
      console.log(ip, type);
    },
    addIp(type) {
      if (type == "white") {
        this.whiteAddShow
          ? this.$message({
              message: "请按回车完善本次ip填写",
              type: "error"
            })
          : (this.whiteAddShow = true);
      } else if (type == "black") {
        this.blackAddShow
          ? this.$message({
              message: "请按回车完善本次ip填写",
              type: "error"
            })
          : (this.blackAddShow = true);
      }
    },
    watchKeyboardWhite() {
      let self = this;
      if (self.newIpWhite != "") {
        self.formBusiness.ip_white.push({ ip: self.newIpWhite, id: 0 });
        self.whiteAddShow = false;
        self.newIpWhite = "";
      }
    },
    watchKeyboardBlack() {
      let self = this;
      if (self.newIpBlack != "") {
        self.formBusiness.ip_black.push({ ip: self.newIpBlack, id: 0 });
        self.blackAddShow = false;
        self.newIpBlack = "";
      }
    }
  }
};
</script>
<style scoped>
.info_block {
  margin: 0 20px 20px;
  position: relative;
}
.btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 60px 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;
}
.option_btn_gray {
  width: 124px;
  background-color: #e3e5ef;
  border-radius: 8px;
  color: #0f2683;
}
.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;
}
.ip_block {
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  padding: 10px 0 0 10px;
  line-height: 24px;
}
.ip_item {
  display: inline-block;
  position: relative;
  background-color: #e6ebfe;
  border-radius: 4px;
  color: #0f2683;
  font-size: 12px;
  line-height: 24px;
  padding: 0 26px 0 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ip_del {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 14px;
  color: #6573ae;
  cursor: pointer;
}
.ip_del:hover {
  color: #e56600;
}
.add_ip {
  background-color: #495feb;
  border-radius: 4px;
  color: #f8f9fd;
  font-size: 12px;
  line-height: 24px;
  padding: 0 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ip_input {
  width: 110px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
<style>
.info_item_right_btn .el-input {
  width: calc(100% - 140px);
  margin-right: 10px;
}
.info_item_right_btn .el-select {
  width: calc(100% - 140px);
  margin-right: 10px;
}
.info_item_right_btn .el-select .el-input {
  width: 100%;
}
.info_item_right_btn_2 .el-input {
  width: calc(100% - 280px);
  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;
}
.ip_input .el-input__inner {
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
}
</style>