<template>
  <div id="user_wrapper">
    <el-card class="box-card" id="user" shadow="hover" style="width:30%;">
      <div slot="header" style="text-align:center" class="clearfix">
        <span style="font-size:24px;color:#eff0dc">修改密码</span>
      </div>

      <el-form ref="password_form" :model="password_form" :rules="password_form_rules" label-width="60px" label-position="top">
        <el-form-item prop="odd_password">
          <el-input :type="odd_password_type" v-model="password_form.odd_password" auto-complete="off">
            <template slot="prepend">原密码</template>
            <el-button class="append_button" slot="append" :icon="odd_password_view" @click="show_odd_password"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="new_password">
          <el-input :type="new_password_type" v-model="password_form.new_password" auto-complete="off">
            <template slot="prepend">新密码</template>
            <el-button class="append_button" slot="append" :icon="new_password_view" @click="show_new_password"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="check_password">
          <el-input :type="new_password_type" v-model="password_form.check_password" auto-complete="off">
            <template slot="prepend">新密码</template>
            <el-button class="append_button" slot="append" :icon="new_password_view" @click="show_new_password"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="submitForm('password_form')">提交</el-button>
            <el-button type="warning" @click="resetForm('password_form')">重置</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" id="user" shadow="hover" style="width:30%;">
      <div slot="header" style="text-align:center" class="clearfix">
        <span style="font-size:24px;color:#eff0dc">主题颜色</span>
      </div>
      <el-radio-group v-model="color" @change="change_color">
        <el-row style="padding-bottom:1px">
          <el-radio-button label="天空蓝"></el-radio-button>
          <el-radio-button label="梦幻紫"></el-radio-button>
          <el-radio-button label="活力橙"></el-radio-button>
        </el-row>
        <el-row>
          <el-radio-button label="柠檬绿"></el-radio-button>
          <el-radio-button label="灰灰灰"></el-radio-button>
          <el-radio-button label="小清新"></el-radio-button>
        </el-row>
      </el-radio-group>
    </el-card>
  </div>

</template>

<script>
  export default {
    name: "user",
    data() {
      return {
        color: "天空蓝",
        new_password_type: "password",
        odd_password_type: "password",
        new_password_view: "icon i-password-not-view",
        odd_password_view: "icon i-password-not-view",
        rtoken: "",
        user_unid: "",
        auth_base_url: this.$disparch_data.auth_base_url,
        password_form: {
          odd_password: "",
          new_password: "",
          check_password: ""
        },
        password_form_rules: {
          odd_password: {
            required: true,
            message: "请填写旧密码",
            trigger: "blur"
          },
          new_password: [
            {
              pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
              message: "密码至少6位，至多16位",
              trigger: "blur"
            },
            {
              required: true,
              message: "必须填写新密码",
              trigger: "blur"
            },
            {
              validator: (rule, value, callback) => {
                if (value == this.password_form.odd_password) {
                  callback(new Error("新密码不能和旧密码相同"));
                } else callback();
              },
              trigger: "blur"
            }
          ],
          check_password: [
            {
              pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
              message: "密码至少6位,至多16位",
              trigger: "blur"
            },
            {
              required: true,
              message: "必须填写新密码",
              trigger: "blur"
            },
            {
              validator: (rule, value, callback) => {
                if (value != this.password_form.new_password) {
                  callback(new Error("两次输入不一致"));
                } else callback();
              },
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      change_color() {
        var backgroundColor = "none";
        var backgroundImage = "none";
        switch (this.color) {
          case "天空蓝":
            backgroundColor = "lightblue";
            break;
          case "梦幻紫":
            backgroundColor = "#8ec5fc";
            backgroundImage = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
            break;
          case "活力橙":
            backgroundColor = "#FBAB7E";
            backgroundImage = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
            break;
          case "柠檬绿":
            backgroundColor = "#F4D03F";
            backgroundImage = "linear-gradient(132deg, #F4D03F 0%, #16A085 100%)";
            break;
          case "灰灰灰":
            backgroundColor = "#f0f0f0";
            break;
          case "小清新":
            backgroundColor = "#FFDEE9";
            backgroundImage = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
            break;
        }
        let main = document.getElementsByClassName("el-main")[0];
        main.style["background-color"] = backgroundColor;
        main.style.backgroundImage = backgroundImage;
        localStorage.setItem("color", this.color);
        this.$router.go(0)
      },

      show_odd_password() {
        if (this.odd_password_type == "password") {
          this.odd_password_type = "text";
          this.odd_password_view = "icon i-password-view";
        } else {
          this.odd_password_type = "password";
          this.odd_password_view = "icon i-password-not-view";
        }
      },
      show_new_password() {
        if (this.new_password_type == "password") {
          this.new_password_type = "text";
          this.new_password_view = "icon i-password-view";
        } else {
          this.new_password_type = "password";
          this.new_password_view = "icon i-password-not-view";
        }
      },
      submitForm(form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            this.$Axios({
              method: "post",
              url: this.auth_base_url + "users/" + this.user_unid + "/password",
              headers: { authorization: this.rtoken },
              data: {
                old_pwd: this.password_form.odd_password,
                new_pwd: this.password_form.new_password
              }
            })
              .then(response => {
                if (response.data.user_unid) {
                  this.$message({
                    type: "success",
                    message: "修改成功"
                  });
                  this.resetForm("password_form");
                }
              })
              .catch(err => {
                this.$message.error("修改失败");
                this.resetForm("password_form");
              });
          }
        });
      },
      resetForm(form) {
        this.$refs[form].resetFields();
      }
    },
    created() {
      if (!sessionStorage.getItem("user_unid")) {
        this.$router.push("/");
      } else {
        this.rtoken = sessionStorage.getItem("rtoken");
        this.user_unid = sessionStorage.getItem("user_unid");
      }

      if (localStorage.getItem("color")) {
        this.color = localStorage.getItem("color");
      }
    }
  };
</script>


<style scoped>
#user_wrapper {
  width: 100%;
  height: 100%;
}
#user >>> label {
  color: black;
}
#user_wrapper >>> .el-card {
  /* float: left; */
  /* display: inline-block; */
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-card__body {
  background-color: rgba(0, 0, 0, 0);
}
#user >>> input {
  border-color: black;
  color: black;
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-card__header {
  background-color: #34352c;
}
#user >>> .el-input-group__prepend {
  border-color: black;
  color: black;
  /* background-color: lightgray; */
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-input-group__append {
  color: black;
  border-color: black;
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-radio-button__inner {
  border-color: black;
  background-color: rgba(0, 0, 0, 0);
}
</style>