<template>
  <div class="layout-wrapper">

    <el-container>
      <!--头部 -->
      <el-header class="header-two">
        <div class="elheader">
          <div class="headerLeft">
            <div class="collapse" @click="handleChangeCollapse">
              <i :class="[isShow==true?'el-icon-s-unfold':'el-icon-s-fold']"></i>
            </div>
            <div @click='ruotes' style='cursor: pointer'>
              <span class="headertitle">门店业务</span>
              <!-- <span class="headertitle">代收业务</span> -->
              <span class="text-white ">
                {{storeNum}}
              </span>
              <el-tooltip effect="dark" :content="storeName" placement="bottom">
                <i class="el-icon-s-platform icon-plat-form"></i>
              </el-tooltip>
              <span class="text-white ">
                {{storeName}}({{isStoreName}})
              </span>
            </div>
          </div>
          <div class="head_text">
            <span v-if="grt=(ho<9?'早上好！  ':
                    ho<12?'上午好 ！  ':
                    ho<15?'中午好 ！  ':
                    ho<19?'下午好 ！  ':
                    '晚上好 ！  '
                    )">{{grt}}</span>
            <el-tooltip effect="dark" :content="roleName" placement="bottom">
              <span>{{staffName}}</span>
            </el-tooltip>
          </div>
          <div>
            <el-button size="mini" type="primary" class="butlog" plain>关注公众号</el-button>
            <el-tooltip effect="dark" content="点击刷新页面" placement="bottom">
              <i class="el-icon-refresh icon-store" @click="refresh"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="修改密码" placement="bottom">
              <i class="el-icon-key icon-setpassword" @click="editpasswordDialogFormVisible=true"></i>
            </el-tooltip>
            <el-button size="mini" type="primary" class="butlog" @click="Exit()" plain>退出</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 左边 -->
        <el-aside width="200px" :style="contentStyleObj">
          <asider></asider>
        </el-aside>
        <el-container>
          <el-main class="max-height-90" :style="mainStyleObj">
            <emain></emain>
          </el-main>
          <el-footer class="elfooter"></el-footer>
        </el-container>
      </el-container>

    </el-container>
    <!-- 修改密码弹窗 -->
    <div class="editpassword">
      <el-dialog :close-on-click-modal="false" title="修改密码" :visible.sync="editpasswordDialogFormVisible" :before-close="handleClose">
        <el-form :model="editpassword" :rules="rules" ref="editpassword" label-width="100px">
          <el-form-item label=" 原 密 码:" prop="password">
            <el-input type="password" v-model="editpassword.password"></el-input>
          </el-form-item>
          <el-form-item label=" 新 密 码:" prop="newPassword">
            <el-input type="password" v-model="editpassword.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="checkPass">
            <el-input type="password" v-model="editpassword.checkPass"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="success" @click="getPassword" :loading='butLoading'>{{ butLoading?'加载中':'短信密码' }}</el-button>
          <el-button size="mini" type="primary" @click="handleClose">取 消</el-button>
          <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getPsw } from '../api/api'
import { changePassword, logout } from "../api/logout.js";
import asider from "./components/asider";
import emain from "./components/Emain";
import { mapState } from "vuex";
import { delCookie, getCookie } from "../utils/utils.js";
export default {
  inject: ["reload"],
  name: "layout",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.editpassword.checkPass != "") {
          this.$refs.editpassword.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editpassword.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      butLoading:false,
      grt: "hello", //欢迎提示语
      ho: new Date().getHours(), //获取当前时刻
      storeNum: "", //门店编码
      storeName: "", //门店名称
      staffName: "", //员工名称
      roleName: "", //角色名称
      headOffice: "", //是否总店
      isShow: false, //菜单收放
      editpasswordDialogFormVisible: false, //修改密码弹窗开关
      contentStyleObj: {
        //左边菜单样式属性
        height: "",
        width: "",
        left: "",
      },
      editpassword: {}, //修改密码表单
      mainStyleObj: {
        //动态获取高度
        height: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["collapse"]),
    isStoreName(){
      return sessionStorage.getItem("headOffice") == 1 ? "总店" : "分店"
    }
  },
  components: {
    asider,
    emain,
  },
  methods: {
    getPassword(){
      this.butLoading = true
      getPsw().then(res=>{
        this.butLoading = false
        if( res.code == "000000" ){
          this.$message.success({ message: "短信发送成功，注意查收" });
        }else{
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
        }
      })
    },
    //关闭弹窗前的回调方法
    handleClose() {
      this.editpassword = {};
      this.editpasswordDialogFormVisible = false;
      this.$refs.editpassword.clearValidate();
    },
    //刷新方法
    refresh() {
      this.reload();
    },
    //点击门店标签 跳转首页
    ruotes() {
      this.$router.push("/home");
    },
    //菜单收放事件
    handleChangeCollapse(show) {
      this.$store.dispatch("actionChange", !this.collapse);
      this.isShow = !this.isShow;
    },
    //获取当前页面高度
    getHeight() {
      this.contentStyleObj.height = window.innerHeight + "px";
      // this.mainStyleObj.height = window.innerHeight + "px";
    },
    //退出登录
    Exit() {
      var mobilePhone = sessionStorage.getItem("mobilePhone");
      logout({
        mobilePhone: mobilePhone,
      }).then((res) => {
        if (res.code == "000000") {
          this.$router.push("/");
          delCookie("token");
          this.$message.success({
            message: "已退出登录！",
          });
          sessionStorage.clear();
          localStorage.clear();
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => { },
          });
        }
      });
    },
    //确定返回方法
    confirm() {
      this.$refs["editpassword"].validate(async (valid) => {
        if (valid) {
          console.log(this.editpassword.checkPass);
          console.log(this.editpassword.newPassword);
          if (this.editpassword.checkPass == this.editpassword.newPassword) {
            delete this.editpassword.checkPass;
            changePassword(this.editpassword).then((res) => {
              if (res.code == "000000") {
                this.$message.success({
                  message: "密码修改成功 , 跳转到登录页面 ! ",
                });
                setTimeout(() => {
                  this.$router.push("/");
                  delCookie("token");
                }, 1000);
                this.editpasswordDialogFormVisible = false;
              } else {
                this.$alert(res.message, "提示", {
                  confirmButtonText: "确定",
                  confirmButtonClass: "confirmbtnFalses",
                  type: "warning",
                  center: true,
                  callback: (action) => { },
                });
              }
            });
            setTimeout(() => {
              this.editpassword.checkPass = this.editpassword.newPassword;
            }, 500);
          } else {
            this.$message.error({
              message: "两次输入密码不一致",
            });
            this.editpasswordDialogFormVisible = true;
          }
        }
      });
    },
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    const loading = this.$loading({
      lock: true,
      text: "拼命加载中...",
      spinner: "el-icon-loading",
    });
    var that = this;
    setTimeout(() => {
      loading.close();
      that.roleName = sessionStorage.getItem("roleName");
      that.staffName = sessionStorage.getItem("staffName");
      that.storeName = sessionStorage.getItem("storeName");
      that.storeNum = JSON.parse(sessionStorage.getItem("storeInfo")).storeNum;
      that.headOffice =
        sessionStorage.getItem("headOffice") == 1 ? "总店" : "分店";
      console.log('that.headOffice--->',that.headOffice)  
      if (!that.roleName) {
        that.roleName = sessionStorage.getItem("roleName");
      }
    }, 800);
  },
  mounted() {
    window.service = 'true'
   },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>
<style scoped>
.el-main {
  height: calc(100vh - 70px);
}
body {
  position: relative;
}

.layout-wrapper .el-aside {
  width: auto !important;
  height: 100% !important;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.icon-store {
  color: white;
  font-size: 24px;
  position: relative;
  top: 6px;
  margin-right: 10px;
  cursor: pointer;
}

.editpassword .el-input {
  width: 200px;
}

.elheader {
  width: 100%;
  height: 58px;
  display: flex;
  justify-content: space-between;
  /* background: green !important;
  z-index: 9999; */
}

.el-header {
  overflow: hidden;
  height: 58px !important;
}

.headerLeft {
  display: flex;
}

.headertitle {
  font-size: 24px;
  margin: 10px;
  line-height: 50px;
  color: white;
  /* color: #006400; */
}

.icon-plat-form {
  font-size: 32px;
  color: white;
  position: relative;
  top: 5px;
}

.icon-setpassword {
  font-size: 24px;
  position: relative;
  top: 6px;
  color: white;
}

.butlog {
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 10px;
}

.collapse {
  font-size: 28px;
  line-height: 58px;
  text-align: center;
  width: 64px;
  color: white;
}

.head_text {
  width: 150px;
  height: 58px;
  line-height: 58px;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.header-two {
  /* （内边距为0） */
  padding: 0;
  /* （宽度自动占满） */
  width: 100%;
  /* （内容居中显示） */
  text-align: center;
  /* （设置固定高度） */
  height: 58px !important;
}
.elfooter {
  padding: 0;
  width: 100%;
  text-align: center;
  height: 20px !important;
  /* border: 1px solid black; */
}
</style>
