<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>
      <div v-if="activeName == '0'">
        <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>
      <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.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: [],
    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
  }),
  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;
    },
    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_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>