<template>
  <div class="Header">
    <!-- <div class="Header_left">
      <span
        ><strong>管理系统 欢迎您!</strong><em>{{ getTodayDate() }}</em></span
      >
    </div>
    <div class="Header_right">
      <el-dropdown trigger="click">
        <div class="username_wrapper">
          <span class="user-avator"
            ><img :src="require('@/assets/comImgs/topNav_user.png')"
          /></span>
          <span class="user_info"
            ><span>用户</span><i class="el-icon-arrow-down el-icon--right"></i
          ></span>
        </div>
        <el-dropdown-menu slot="dropdown" class="dropdownlist userlist">
          <el-dropdown-item
            ><span @click="logOut" class="lispan"
              ><em class="LogoutICON"></em>退出登录</span
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click">
        <div class="username_wrapper">
          <span class="user-avator user_guest"
            ><img :src="require('@/assets/comImgs/topNav_color.png')"
          /></span>
          <span class="user_info"
            ><span>皮肤</span><i class="el-icon-arrow-down el-icon--right"></i
          ></span>
        </div>
        <el-dropdown-menu slot="dropdown" class="dropdownlist themelist">
          <el-dropdown-item
            ><span @click="changeTheme('theme1')" class="lispan"
              >白色</span
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><span @click="changeTheme('theme2')" class="lispan"
              >蓝色</span
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><span @click="changeTheme('theme3')" class="lispan"
              >粉色</span
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-dialog
      v-dialogDrag
      title="修改密码"
      :visible.sync="dialogPasswordVisible"
      class="el-dialog-single"
      :close-on-click-modal="false"
    >
      <el-form
        :model="passwordForm"
        :rules="passwordRules"
        ref="passwordForm"
        label-width="78px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="旧密码：" prop="password">
              <el-input
                type="password"
                v-model="passwordForm.password"
                placeholder="请输入旧密码"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="新密码：" prop="newPassword">
              <el-input
                type="password"
                v-model="passwordForm.newPassword"
                placeholder="请输入新密码"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="updatePassword"
          >确 定</el-button
        >
        <el-button @click="dialogPasswordVisible = false">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
// import { removeToken } from "@/utils/Auth";
// import { logout, updatePassword } from "@/api/User/User";
// import { mapGetters } from "vuex";
// import store from "@/store";
// import QRCode from "qrcodejs2";
// import html2canvas from "html2canvas";

export default {
  // computed: {
  //   ...mapGetters([
  //     "userName",
  //     "currentPlot",
  //     "userPlot",
  //     "groupUser",
  //     "quickPayParams",
  //   ]), //mapGetters包含addRouters，cachedViews，permission_routers，userName，visitedviews,currentPlot,userPlot,groupUser
  // },
  inject: ["reload"], //注入App里的reload方法---子级接收
  data() {
    return {
      show: false, //授权信息 显示
      dialogVisible: false, //二维码弹窗
      LogoImg: "",
      dataURL: "",
      passwordForm: {
        password: "",
        newPassword: "",
      },
      passwordRules: {
        password: [
          {
            required: true,
            message: "旧密码不能为空",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false, // 转圈
      dialogPasswordVisible: false, //修改密码 弹框 显示
    };
  },
  mounted() {
    if (localStorage.getItem("theme")) {
      //判断选中的皮肤
      this.changeTheme(localStorage.getItem("theme"));
    } else {
      this.changeTheme("theme"); //默认颜色
    }
  },
  methods: {
    ercodeClick() {
      setTimeout(() => {
        // this.qrcode();
      }, 500);
      this.dialogVisible = true;
    },
    qrcode() {
      // this.LogoImg = document.getElementById("LogoImg").src;
      // document.getElementById("qrcode").innerHTML = "";
      // // debugger
      // if (this.quickPayParams.dbName) {
      //   let qrcode = new QRCode("qrcode", {
      //     width: 250, // 设置宽度，单位像素
      //     height: 250, // 设置高度，单位像素
      //     text:
      //       this.quickPayParams.q5Url +
      //       "?dbName=" +
      //       this.quickPayParams.dbName +
      //       "&GLCID=" +
      //       this.quickPayParams.GLCID +
      //       "&YXDID=" +
      //       this.quickPayParams.YXDID +
      //       "&JT_ZJ=" +
      //       this.quickPayParams.JT_ZJ +
      //       "", // 设置二维码内容或跳转地址
      //   });
      //   this.toImage(); //420*595
      //}
    },
    toImage() {
      const _this = this;
      setTimeout(() => {
        // 创建一个新的canvas
        const _canvas = _this.$refs.poster;
        // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
        const width = _canvas.offsetWidth;
        const height = _canvas.offsetHeight;
        const canvas2 = document.createElement("canvas");
        const scale = 1;
        canvas2.width = width * scale;
        canvas2.height = height * scale;
        const context1 = canvas2.getContext("2d");
        if (context1) {
          context1.scale(scale, scale);
        }
        const opts = {
          scale,
          canvas: canvas2,
          // logging: true, //日志开关，便于查看html2canvas的内部执行流程
          width,
          height,
          // 【重要】开启跨域配置
          useCORS: true,
        };
        html2canvas(_canvas, opts).then((canvas) => {
          const context = canvas2.getContext("2d");
          if (context) {
            context.scale(1, 1);
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
          }
          // canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
          _this.dataURL = canvas.toDataURL();
        });
      }, 100);
    },
    goto() {
      //切换集团端
      if (location.href.indexOf("/wy/") > -1) {
        var url = location.href.replace("/wy/", "/jt/");
        var indexsite = url.indexOf("/jt/");
        var reurl = url.substring(0, indexsite);
        window.location.href = reurl + "/jt";
      }
    },
    //更换皮肤--第一步
    changeTheme(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
      localStorage.setItem("theme", theme);
    },
    //点击右上角下拉小区
    userPlotChange(value) {},
    // 获取今日日期
    getTodayDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var day = date.getDay();
      var day_ary = ["日", "一", "二", "三", "四", "五", "六"];
      return (
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        "  星期" +
        day_ary[day]
      );
    },

    // 修改密码 弹框 显示
    showChangePW() {
      this.dialogPasswordVisible = true;
    },

    // 修改密码
    updatePassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          updatePassword(this.passwordForm).then((response) => {
            this.loading = false;
            if (response.returnStatus == "SUCCESS") {
              if (localStorage.getItem("password")) {
                localStorage.setItem("password", this.passwordForm.newPassword);
              }
              this.dialogPasswordVisible = false;
              this.passwordForm.password = "";
              this.passwordForm.newPassword = "";
            }
          });
        } else {
          return false;
        }
      });
    },

    // 退出系统
    logOut() {
      removeToken();
      sessionStorage.clear();
      this.$router.push({ path: "/Login" });
    },
  },
  // components: {
  //   QRCode,
  // },
};
</script>

<style lang="scss">
.userlist {
  margin-top: 6px !important;
}
.themelist {
  margin-top: 6px !important;
}
.lispan {
  display: block;
}

.Header {
  z-index: 1;
  background: #fff;
  width: 100%;
  min-width: 660px;
  height: 40px;
  overflow: hidden;
  .Header_left {
    display: inline;
    float: left;
    span {
      display: block;
      padding-top: 10px;
      padding-left: 28px;
      strong {
        color: #1a1a1a;
        font-size: 16px;
        font-weight: normal;
        margin-right: 20px;
      }
      em {
        color: #1a1a1a;
        font-size: 14px;
      }
    }
  }
  .Header_right {
    float: right;
    margin-right: 26px;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .goto {
    width: 100px;
    display: inline-block;
    font-size: 14px;
    vertical-align: 4px;
    cursor: pointer;
    img {
      vertical-align: -4px;
      margin-right: 10px;
    }
  }

  .HeaderPlotSpan {
    display: inline-block;
    .el-input__icon {
      line-height: 30px !important;
    }
  }
  .username_wrapper {
    cursor: pointer;
    img {
      margin-left: 8px;
    }
    .user-avator img {
      width: 18px;
    }
    .user_info {
      vertical-align: 4px;
      margin-left: 5px;
    }
    .user_guest {
      img {
        cursor: pointer;
        width: 18px;
      }
    }
  }
  .el-popper {
    margin-top: 0;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 0;
  } //打包后冲突css
  .el-dropdown {
    color: #1a1a1a;
    font-size: 14px;
    line-height: 31px;
    margin-left: 25px;
  }
  .el-dropdown-menu {
    width: 130px;
    background: #fff;
    border: 0;
    padding: 0;
  }
  .dropdownlist {
    top: 48px;
  }
  .dropdownlist span {
    display: inline-block !important;
    width: 100% !important;
    /* width: 170px; */
    height: 48px;
    line-height: 48px;
    color: #262626;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
  }
  .dropdownlist span img {
    vertical-align: -4px;
    margin-right: 14px;
  }

  .plotlist {
    width: 150px;
    max-height: 290px;
    overflow: auto;
  }
  .themelist {
    width: 70px;
    max-height: 290px;
    overflow: auto;
  }

  .screensize .Header_left {
    display: none;
  }

  .el-form-item__content {
    margin-left: 70px;
  }
  .el-dropdown-menu__item {
    .updatePWDICON {
      background: url("../../../assets/comImgs/topNav_password_black.png")
        no-repeat;
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 10px;
      vertical-align: -2px;
    }
    .LogoutICON {
      background: url("../../../assets/comImgs/topNav_exit_black.png") no-repeat;
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 10px;
      vertical-align: -2px;
    }
    &:hover {
      .updatePWDICON {
        background: url("../../../assets/comImgs/topNav_password_white.png")
          no-repeat;
      }
      .LogoutICON {
        background: url("../../../assets/comImgs/topNav_exit_white.png")
          no-repeat;
      }
    }
  }
}

.ercodepic {
  position: relative;
  width: 420px;
  height: 595px;
  .unit {
    position: absolute;
    z-index: 10;
    top: 213px;
    left: 86px;
    width: 250px;
    height: 250px;
  }
  .ercodeimg {
    width: 420px;
    height: 595px;
  }
  .LogoImg {
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 10px;
  }
  .plotName {
    position: absolute;
    z-index: 10;
    top: 70px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: #262626;
    font-size: 34px;
  }
}
.epic {
  position: relative;
}
.ercodepicNew {
  width: 420px;
  height: 595px;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
