<template>
  <div>
    <header id="header">
      <div class="containers">
        <!-- id="logo"class="pull-left" -->
        <div>
          <a :href="portalUrl"><img src="@/assets/img/logos.png" style="margin:0px!important;width:126px;height:58px" alt="" title="" /></a>
        </div>
        <div style='display:flex;align-items:center;height:80px;'> 
              <img style="margin-right:10px!important;" src="@/assets/img/dianhua.png" alt="">
              <p style="font-size: 18px;font-weight: bold;color: #595959;margin:0">咨询热线：010-56682165</p>
        </div>
      </div>
    </header>
    <main id="main" >
      <section id="login" class="wow fadeInUp">
        <div class="container" style="height: 10px!important;">
          <h4>找回密码</h4>
        </div>
      </section>
    </main>
    <div class="login-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="login-form"
        id="registerForm"
      >
        <div class="Cbody_item">
          <el-row>
            <el-col :span="24">
              <el-form-item
                v-if="form.userId == undefined"
                label="手机号码"
                prop="phonenumber"
              >
                <el-input
                  v-model="form.phonenumber"
                  placeholder="请输入手机号码"
                  maxlength="11"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item
                v-if="form.userId == undefined"
                label="验证码"
                prop="remark"
              >
                <el-input
                  v-model="form.remark"
                  placeholder="请输入短信验证码"
                  maxlength="6"
                  style="width: 265px!important;"
                />
                <span class="show-pwd">
              <el-button
                :loading="sending"
                :disabled="sendDisabled"
                size="small"
                class="btn-blue"
                style="padding:11px 15px!important;color: #ffff!important;vertical-align: top;"
                @click="submitCode"
              >{{ sendButtonText }}</el-button
              >
            </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                v-if="form.userId == undefined"
                label="新密码"
                prop="password"
              >
                <el-input
                  v-model="form.password"
                  maxlength="16"
                  placeholder="请输入新密码"
                  type="password"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                v-if="form.userId == undefined"
                label="确认新密码"
                prop="checkPass"
              >
                <el-input
                  v-model="form.checkPass"
                  maxlength="16"
                  placeholder="请输入确认密码"
                  type="password"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" >
              <el-button :loading="loading" class="btn btn-primary btn-blue" style="width: 450px; margin: 30px; font-size: 18px;color: #ffff"
                         @click="submitForm">提&nbsp;&nbsp;交
              </el-button>
              <p><a href="/" style="color: #0969bd!important; margin-left: 190px;">使用已有帐户登录</a></p>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <footer id="footer" style="width:100%;line-height: 30px;padding:30px 0;margin-top:30px ;">
      <div class="bottok" style="display:flex;text-align:left;line-height: 30px;width:1000px;margin-left: auto;margin-right: auto;justify-content: space-between;">      
          <div style="display:flex;align-items: center;width:590px;">
             <p><a href="http://www.keyware.cn">关于我们</a></p>
             <p><a href="http://www.keyware.cn">加入我们</a></p>
             <p><a href="http://www.keyware.cn">招聘信息</a></p>
          </div>   
          <div>
             <img src="@/assets/pic/code.png">
           </div>
         
             <div >
               <p style="margin-top: 20px!important;"><a href="http://www.keyware.cn">联系我们</a></p>
               <p><a href="">咨询热线：13911064391</a></p>
               <p><a href="">电邮：89705132@qq.com</a></p>
             </div>
         
          
         
       </div>
       <div style="text-align:center;margin-top: 20px;color: #ffffffad;">
           海南关键科技有限公司 版权所有 琼ICP备2023014024号 琼公网安备 46010002000162号
       </div>
        
    </footer>
  </div>
</template>
<script>
  import { Notification, MessageBox, Message } from "element-ui";
  import { getCodeChangePasswd } from "@/api/login";
  import {
    listUser,
    getUser,
    delUser,
    changePasswd,
    updateUser,
    exportUser,
    resetUserPwd,
    changeUserStatus,
    importTemplate,
  } from "@/api/system/user";
  import { getToken } from "@/utils/auth";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Cookie from "js-cookie";
  import moment from "moment";

  export default {
    name: "User",
    components: { Treeselect },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.form.checkPass !== "") {
            this.$refs.form.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.form.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        portalUrl: '',
        dialogVisible: false,
        sending: false,
        sendDisabled: false,
        timer: 0,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: undefined,
        // 是否显示弹出层
        open: false,
        // 部门名称
        deptName: undefined,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 性别状态字典
        sexOptions: [],
        // 岗位选项
        postOptions: [],
        // 角色选项
        roleOptions: [],
        // 表单参数
        form: {
          password: "",
          phonenumber: "",
          checkPass: "",
          // email: "testuser00@163.com"
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined,
        },
        // 列信息
        columns: [
          { key: 0, label: `用户编号`, visible: true },
          { key: 1, label: `用户名称`, visible: true },
          { key: 2, label: `用户昵称`, visible: true },
          { key: 3, label: `部门`, visible: true },
          { key: 4, label: `手机号码`, visible: true },
          { key: 5, label: `状态`, visible: true },
          { key: 6, label: `创建时间`, visible: true },
        ],
        // 表单校验
        rules: {
          userName: [
            { required: true, message: "用户名称不能为空", trigger: "blur" },
          ],
          nickName: [
            { required: true, message: "用户昵称不能为空", trigger: "blur" },
          ],
          password: [{ validator: validatePass, trigger: "blur" },
            { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
          checkPass: [{ validator: validatePass2, trigger: "blur" }],
          email: [
            {
              type: "email",
              message: "'请输入正确的邮箱地址",
              trigger: ["blur", "change"],
            },
          ],
          phonenumber: [
            { required: true, message: "手机号码不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
          remark: [
            { required: true, message: "短信验证码不能为空", trigger: "blur" },
            {
              pattern: /^\d{6}$/,
              message: "请输入正确的手机短信验证码",
              trigger: "blur",
            },
          ],
        },
      };
    },
    computed: {
      sendButtonText() {
        if (this.timer === 0) {
          return "发送验证码";
        } else {
          return `${this.timer}秒后重发`;
        }
      },
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
      timer(num) {
        if (num > 0) {
          this.sendDisabled = true;
          setTimeout(() => {
            this.timer = --num;
          }, 1000);
        } else {
          this.sendDisabled = false;
        }
      },
    },
    created() {
      this.getClientConfigKey("website.homepage").then((response) => {
        this.portalUrl = response.msg;
      });
      const lastSendTime = Cookie.get("last-send-time");
      if (lastSendTime) {
        const timer = 60 - moment().diff(moment(lastSendTime), "seconds");
        this.timer = timer > 0 ? timer : 0;
      }
    },
    methods: {
      handleBack() {
        // this.dialogVisible = false;
        // location.href = "/index";

        MessageBox.confirm(
          "帐户修改成功",
          "系统提示",
          {
            confirmButtonText: "返回首页",
            // cancelButtonText: "取消",
            type: "warning",
            showClose: false,
            showCancelButton: false,
          }
        ).then(() => {
          // store.dispatch("LogOut").then(() => {
          location.href = "/index";
          // });
        });
      },
      // getCode(phoneNumber) {
      //   getCodeUserRegister(phoneNumber).then(res => {
      //     // this.codeUrl = "data:image/gif;base64," + res.img;
      //     this.form.sex = res.uuid;
      //   });
      // },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
          (response) => {
            this.userList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.getList();
      },
      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要"' + text + '""' + row.userName + '"用户吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return changeUserStatus(row.userId, row.status);
          })
          .then(() => {
            this.msgSuccess(text + "成功");
          })
          .catch(function () {
            row.status = row.status === "0" ? "1" : "0";
          });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          userId: undefined,
          deptId: undefined,
          userName: undefined,
          nickName: undefined,
          password: undefined,
          checkPass: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: undefined,
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: [],
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.getTreeselect();
        getUser().then((response) => {
          this.postOptions = response.posts;
          this.roleOptions = response.roles;
          this.open = true;
          this.title = "添加用户";
          this.form.password = this.initPassword;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.getTreeselect();
        const userId = row.userId || this.ids;
        getUser(userId).then((response) => {
          this.form = response.data;
          this.postOptions = response.posts;
          this.roleOptions = response.roles;
          this.form.postIds = response.postIds;
          this.form.roleIds = response.roleIds;
          this.open = true;
          this.title = "修改用户";
          this.form.password = "";
        });
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            resetUserPwd(row.userId, value).then((response) => {
              this.msgSuccess("修改成功，新密码是：" + value);
            });
          })
          .catch(() => {});
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.userId != undefined) {
              updateUser(this.form).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              this.form.userName = this.form.phonenumber;
              this.form.nickName = this.form.userName;
              changePasswd(this.form).then((response) => {
                // this.msgSuccess("新增普通测试者成功");
                // this.dialogVisible = true;
                // this.getList();

                this.handleBack();
              });
            }
          }
        });
      },
      /** 提交按钮 */
      submitCode: function () {
        // this.loginWay = false;
        // this.$refs.form.validateField("mobile", (err) => {
        if (!this.sending) {
          this.sending = true;
          // const { mobile } = this.loginForm;
          getCodeChangePasswd(this.form.phonenumber)
            .then((res) => {
              this.form.sex = res.uuid;
              this.$message.success("短信发送成功，请注意查收");
              Cookie.set("last-send-time", new Date());
              this.timer = 60;
            })
            .catch((e) => {
              // this.$message.error("网络异常");
              console.log(e);
            })
            .finally(() => (this.sending = false));
        }
        // });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const userIds = row.userId || this.ids;
        this.$confirm(
          '是否确认删除用户编号为"' + userIds + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delUser(userIds);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有用户数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportUser(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          });
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then((response) => {
          this.download(response.msg);
        });
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
    },
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width:100%;
    background-size: cover;
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .login-code-img {
    height: 38px;
  }
</style>

<style lang="scss" scoped>
  $bg: #fff;
  $dark_gray: #021826;
  $light_gray: #444444;
  .containers{
    width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .login-form {
      position: relative;
      width: 550px;
      max-width: 100%;
      padding: 0px 35px 0;
      margin: 0 auto;
      overflow: hidden;
      font-size: 16px!important;
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      height: 36px;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }
  }
</style>

<style lang="scss" scoped>
  a {
    color: #444;
    margin: 50px;
  }
  .login_header {
    margin-bottom: 30px;
    text-align: center;
  }
  .login_header span {
    margin-right: 20px;
    cursor: pointer;
  }
  .Cbody_item {
    border: 0px solid #999;
    overflow: hidden;
  }
  .active {
    color: #444;
    padding-bottom: 10px;
    border-bottom: 3px solid #444;
  }
</style>

<style type="text/css">
  #header {
    position: relative;
    padding: 0;
    height: 84px;
    transition: all 0.5s;
    z-index: 997;
    background: #fff;
    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
  }

  #header #logo h1 {
    position: absolute;
    font-size: 28px;
    margin: 6px 0 0 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    top: -20px;
  }

  #header #logo h1 a {
    line-height: 1;
    display: inline-block;
    color: #a4a2a3;
  }
  #registerForm .el-form-item__label {
    font-size: 17px!important;
    background: #fff;
    color: #444;
    font-family: "Open Sans", "微软雅黑", sans-serif;
  }
  .bottok p{
    margin:0!important;
    
  }
  .bottok a{
    color:#FFFFFF
  }
</style>
