<template>
  <div class="body-box">
    <div class="header clearfix">
      <router-link to="/entrance" tag="div" class="logo-box">智慧园区产业经济综合服务平台</router-link>
      <div class="header-left-box">
        <div class="head-date">
          <a href="http://223.84.218.79:18085/auth.html?token=123" target="_Blank">企业云协作综合服务平台</a>
        </div>
        <div class="nav-ul">
          <router-link :to="'/'+menuShow['经济运行'].path" tag="div" class="nav-li" v-if="menuShow['经济运行'].isShow">经济运行</router-link>
          <router-link :to="'/'+menuShow['数据服务'].path" tag="div" class="nav-li" v-if="menuShow['数据服务'].isShow">数据服务</router-link>
        </div>
      </div>
      <div class="header-right-box">
        <div class="nav-ul">
          <router-link :to="'/'+menuShow['报表管理'].path" tag="div" class="nav-li rightTag" v-if="menuShow['报表管理'].isShow">报表管理</router-link>
          <router-link :to="'/'+menuShow['综合管理'].path" tag="div" class="nav-li rightTag" v-if="menuShow['综合管理'].isShow">综合管理</router-link>
        </div>
        <div class="head-userInfo">
          <div class="hd-user">
            <span class="el-dropdown-link">{{userInfo.realName}}<i class="el-icon-arrow-down el-icon--right"  v-if="false"></i></span>
            <el-dropdown trigger="click" v-if="false"  @command="handleCommand">
              <span class="el-dropdown-link">{{userInfo.realName}}<i class="el-icon-arrow-down el-icon--right"  v-if="false"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="personal">后台系统管理</el-dropdown-item>
                <el-dropdown-item command="reset">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="hd-exit" @click="exitSystem">注销</div>
        </div>
      </div>
    </div>
    <div class="main-body">
      <router-view/>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
      <el-form :model="data" :rules="rules" ref="updateForm" label-width="120px">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="data.oldPwd" clearable auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="data.newPwd" clearable auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPw">
          <el-input v-model="data.confirmPw" clearable auto-complete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePw">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data () {
      let validatePass = (rule, value, callback) => {
        let vm =this;
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (vm.data.confirmPw !== '') {
            vm.$refs['updateForm'].validateField('confirmPw');
          }else{
            if(!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,100}$/.test(value)){
              callback(new Error('密码为大小写字母和数字，不少于6位!'));
            }
          }
          callback();
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再输入新密码'));
        } else if (value !== this.data.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        dateString: new Date().format("yyyy-MM-dd"),
        timeString: new Date().format("HH:mm:ss"),
        timer: null,hearTimer:null,
        userInfo: {realName:'',id:''},token:null,
        menuShow: {
          '经济运行': {isShow:true,path:"economic"},
          '数据服务': {isShow:true,path:"dataService"},
          '报表管理': {isShow:true,path:"reportManage"},
          '综合管理': {isShow:true,path:"synthetical"},
          '领导导航仓':{isShow:true,path:""}
        },
        dialogVisible:false,
        data:{
          oldPwd:"",
          newPwd:"",
          confirmPw:"",
          userId:'',
        },
        rules:{
          oldPwd:[{ required: true, message: '请输入原密码', trigger: 'blur'}],
          newPwd:[{ validator:validatePass,required: true,  trigger: 'blur'}],
          confirmPw:[{ validator: validatePass2, required: true, trigger: 'blur'}],
        }
      }
    },
    created (){
      //时间定时器
      let vm = this;
     /* vm.getHeartbeat();
      vm.hearTimer = setInterval(vm.getHeartbeat,30000);*/
      vm.userInfo = JSON.parse(sessionStorage.getItem("userData"));
      vm.menuList = JSON.parse(sessionStorage.getItem("menuList"));
      vm.token = JSON.parse(sessionStorage.getItem("token"));
      vm.data.userId = vm.userInfo.id;
      axios.defaults.headers.common['Authorization'] = JSON.parse(sessionStorage.getItem("token"));
      vm.menuList.find((v)=>{
        if(vm.menuShow[v.name]){
          vm.menuShow[v.name].isShow = true;
          vm.menuShow[v.name].code = v.code
        }
      })
    },
    methods:{
      exitSystem (){
        let vm = this;
        vm.$confirm('确定退出系统吗？','提示',{type:'warning'}).then(()=> {
          vm.$router.push({path: "/login"})
          vm.$http.post('/dx-economy-api/auth/logout').then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200) {
            axios.defaults.headers.common['Authorization'] = ""
            sessionStorage.setItem("token", "")
            sessionStorage.removeItem("menuList")
            sessionStorage.removeItem("userData");
            vm.$router.push({path: "/login"})
          } else {
            vm.$message.error(_data.message);
          }
        })
        })
      },
      handleCommand(command){
        let vm = this;
        if(command == 'personal') {
          vm.$router.push({ name: "manageSystem", params: {} });
        }
        if(command == 'reset'){
          vm.resetPwFields();
          vm.dialogVisible = true
        }
      },
      resetPwFields(){
        let vm = this
        if(!vm.$Util.isEmpty(vm.$refs['updateForm'])) {
          vm.$refs['updateForm'].resetFields();
        }
        vm.data = {oldPwd:"",newPwd:"",confirmPw:""};
      },
      updatePw(){
        let vm = this;
        vm.$refs.updateForm.validate((valid) => {
          if (valid) {
            let _form = JSON.parse(JSON.stringify(vm.data));
            _form.oldPwd = vm.$md5(_form.oldPwd);
            _form.newPwd = vm.$md5(_form.newPwd);
            _form.userId = vm.userInfo.id;
            vm.$http.put('/dx-economy-api/myCenter/updatePwd', _form).then(function (resp) {
              let _data = resp.data;
              if (_data.code === 200) {
                vm.dialogVisible = false;
                vm.data =  {oldPwd:"",newPwd:"",confirmPw:""};
                vm.$message.success("修改密码成功")
              } else {
                vm.$message.error(_data.message);
              }
            }).catch();
            vm.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      getHeartbeat(){
        let vm = this;
        vm.$http.get('/zhyw/auth/heartbeat',{Authorization: JSON.parse(sessionStorage.getItem("token")),bLoading: false}).then(function (resp) {})
      }
    },
    beforeDestroy() {
      let vm = this;
      if(vm.hearTimer){
        clearInterval(vm.hearTimer);
      }
    }
  }
</script>
<style scoped>
  .body-box{width:calc(100% - 30px);height:100%;background:url(../assets/images/bgbody.png) no-repeat center;font-size:14px;padding:0 15px;}
  .header{width:100%;height:70px;position:relative;color:#07b6ff;}
  .logo-box{position:absolute;width:417px;height:100%;line-height:60px;left:calc(50% - 208px);text-align: center;font-size:0px;user-select:none;color:#e0f8fe;font-weight:bold;background:url(../assets/images/logobg.png) no-repeat center;cursor: pointer;}

  .header-left-box,.header-right-box{position:absolute;top:16px;height:48px;width:calc(50% - 210px)}
  .header-left-box{left:0}
  .head-date{float:left;margin-left:0px;float:left;line-height:46px;border-top:1px dashed rgba(255,255,255,.8);border-bottom:1px dashed  rgba(255,255,255,.8);}
  .head-date a{color:  rgba(255,255,255,.8);}
  .nav-li{width:120px;height:40px;float:left;text-align: center;line-height:40px;margin-right:0px;user-select:none;cursor:pointer;background:url(../assets/images/navbg.png) no-repeat center;background-size:120px auto;font-weight:bold;color: #fff;}
  .nav-li.router-link-active{color:#00bcfa;}
  .nav-li.rightTag{background:url(../assets/images/navbg-right.png) no-repeat center;background-size:120px auto;}
  .header-left-box .nav-ul{float:right;}
  .header-right-box .nav-ul{float:left;margin-left:18px;}
  .header-right-box{right:0px;}
  .head-userInfo{float:right;height:48px;line-height:48px;}
  .head-userInfo div{float:left}
  .hd-exit{height:48px;background: url(../assets/images/exit.png) no-repeat 0 center;margin-left:10px;padding-left:30px;cursor: pointer;}
  .hd-mes span{display:block;position: absolute;left:10px;top:6px;padding:0 8px;height:18px;line-height:18px;background:#f72c2c;color:#fff;border-radius:9px;}
  .hd-user{padding-left:34px;height:48px;line-height:50px;font-weight:bold;background: url(../assets/images/user_icon.png) no-repeat 6px center;margin-right:10px;cursor: pointer;color:#5bc9fa;}
  .main-body{width:100%;height:calc(100% - 80px);}
  .el-dropdown{color:#5bc9fa;}
</style>