<template>
  <div :class="classObj" class="app-wrapper">
    <div style=" width: 100%; height: 50px; background: #3F9B6A; position: fixed;top:0;left:0;z-index:1001;display: flex;flex-wrap: wrap; margin-bottom: 1px;">
      <div style="width: 15%;margin-top: 8px;padding-left: 20px;">
        <img src="../assets/images/log2.png" alt="" style="height: 36px; object-fit: contain;" />
      </div>

     <div style="position: absolute;top:0px;right:50px;display: flex">
         <div style="border-radius:20px; width: 100px; height: 24px;margin-top: 15px;margin-right: 10px;background:rgba(255, 255, 255, 0.1);display: flex;flex-flow: row nowrap;justify-content: center;
     align-items: center;"  @click="gzt">
            <img src="../../src/assets/images/home.png" alt="" style="height: 20px;object-fit: contain;width:17px;margin-right:6px;"/>
             <div style="color: #fff;line-height: 20px;font-size:14px">工作台</div>
         </div>
        <!-- <div style="margin: 12px; 15px 0 10px">
          <el-badge :value="2" class="item">
           <img src="../assets/images/msg1.png" alt="" style="height: 15px;object-fit: contain;margin: 8px 8px 0 12px;width:16px"/>
          </el-badge>
        </div> -->
        <!-- <div style="position: relative;margin-left:15px">
          <div class="user-profile">
            <div style="width: 30px;height: 30px;border-radius: 50%;background-color: #2d8a58;margin-right: 10px"></div>
         <div  @click="quit()">
           <span class="username">admin</span>
           <i :class=" !quit1?'el-icon-arrow-down':'el-icon-arrow-up'" style="color: #fff;font-size: 16px;margin-left: 5px;"></i>
         </div>

          </div>
          <div v-if="quit1" class="yonghu">
            <div style="width: 100%;padding: 10px 0">修改密码</div>
            <div style="width: 100%;padding: 10px 0">退出登录</div>
          </div>
        </div> -->
         <div class="right-menu" >
        <el-dropdown
          class="avatar-container"
          trigger="click"
        >
          <div
            class="avatar-wrapper"
            style="margin-left: 20px"
          >
            <img
              :src="userAvatar"
              class="user-avatar"
            >
            <span class="user-name">{{ name }}</span>
          </div>
          <el-dropdown-menu
            slot="dropdown"
            class="user-dropdown"
          >

           <!-- <el-dropdown-item @click.native="changeHead">
              <span style="display: block">修改头像</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="changePwd">
              <span style="display: block">修改密码</span>
            </el-dropdown-item> -->

              <div
                class="avatar-wrapper"
                style="height:100px;padding:0 20px;display:flex;align-items:center;"
              >
                <img
                  :src="userAvatar"
                  class="user-avatar"
                  style="width:56px;height:56px;border-radius: 50%"
                >
                <div class="drName" style="color:#000;font-size:16px;margin-left:20px;">{{ name }}</div>
              </div>

            <el-dropdown-item
              divided
              @click.native="logout"

            >
            <div
                class="avatar-wrapper listTUI"
                style="height:40px;display:flex;align-items:center;"
              >
                <div>退出登录</div>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </div>
        <el-dialog
          title="修改密码"
          :visible.sync="changePwdShow"
          width="30%"
          :before-close="handleClose"
        >
          <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPass">
              <el-input v-model="ruleForm.confirmPass" type="password" autocomplete="off" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="confirmChangePwd">确 定</el-button>
          </span>
        </el-dialog>
      </div>


    </div>
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <app-main />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters } from 'vuex'
import { removeToken, removeshopID, removeUserId, setAvatar, getToken } from '@/utils/auth'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import { updatePassword, updateAvatar } from '@/api/user'
import defaultAvatar from '@/assets/images/logo.png'
import { uploadUrl } from '@/utils/request'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  data(){
    const newPassFn = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.ruleForm.newPassword !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const confirmPassFn = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return{
      quit1:false,
      changePwdShow: false,
        ruleForm: {
          password: '',
          newPassword: '',
          confirmPass: ''
        },
        userAvatar: defaultAvatar,
        action: uploadUrl,
        headers: {
          'Authorization-business': getToken()
        },
        dataObj: {
          folderId: 1
        },
        rules: {
          password: [
            { required: true, message: '请输入旧密码', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, validator: newPassFn, trigger: 'blur' }
          ],
          confirmPass: [
            { required: true, validator: confirmPassFn, trigger: 'blur' }
          ]
        }
      }
  },
  mixins: [ResizeMixin],
  computed: {
    name() {
      return localStorage.getItem('roleName')
    },
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    gzt(){
      window.location.href = 'https://jy.scjysm.asia:18086/home'
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    quit(){
      if(!this.quit1){
        this.quit1 = true
      }else{
        this.quit1 = false
      }
    },
    toggleSideBar() {
          this.$store.dispatch('app/toggleSideBar')
        },
        changePwd() {
          this.ruleForm.newPassword = ''
          this.ruleForm.password = ''
          this.ruleForm.confirmPass = ''
          this.changePwdShow = true
        },
        // 修改密码
        confirmChangePwd() {
          this.$refs.ruleForm.validate(valid => {
            if (valid) {
              const obj = {
                password: this.ruleForm.password,
                newPassword: this.ruleForm.newPassword
              }
              updatePassword(obj).then(res => {
                if (res.code === '') {
                  this.changePwdShow = false
                  this.$message({
                    message: '修改成功，请重新登录！',
                    type: 'success'
                  })
                  this.$nextTick(() => {
                    this.$refs['ruleForm'].clearValidate()
                  })
                  setTimeout(() => {
                    localStorage.clear()
                    removeToken()
                    removeshopID()
                    removeUserId()
                    this.$router.push(`/login?redirect=${this.$route.fullPath}`)
                  }, 2000)
                }
              }).catch(() => {
              })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        handleClose() {
          this.changePwdShow = false
          this.$nextTick(() => {
            this.$refs['ruleForm'].clearValidate()
          })
        },
        async logout() {
          localStorage.clear()
          removeToken()
          removeshopID()
          removeUserId()
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        },
        handleImageSuccess(response) {
          const url = response.data.url
          this.userAvatar = url
          updateAvatar({ 'avatar': this.userAvatar, 'name': this.name }, 'POST')
          setAvatar(this.userAvatar)
          console.log('upload success', url)
        }
      }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar{
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
}

.mobile .fixed-header {
  width: 100%;
}

.sidebar-container{
  margin-top: 50px;
}
.main-container{
  margin-top: 50px;
}
.topList{
  position: relative;
  width: 100px;
  font-size: 14px;
}
.topList::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 0;
  bottom: -4px;
  height: 8px;
  width: 50%;
  background: #fff;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
.weiList{
  position: relative;
  width: 100px;
  font-size: 14px;
}
.weiList::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 0;
  bottom: -4px;
  height: 8px;
  width: 50%;
  background: #3f9B6A;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
::v-deep .el-badge__content.is-fixed.is-dot {
  left: -18px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.el-badge {
  ::v-deep .el-badge__content
  {
    margin-top:9px;
    margin-right: 7px;
  }
}

.user-profile {
  display: flex;
  align-items: center;
  margin-top: 10px;
}


.yonghu{
  text-align: center;
  width: 100px;
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 0;
}
.username{
  color:#fff
}
.breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        // padding:20px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 30px;
          height:30px;
          border-radius: 50%;
          margin-top:5px
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }


.user-name {
  vertical-align: top;
  font-size: 14px;
  margin-left: 5px;
  margin-top: -4px;
  display: inline-block;
  color:#fff
}

.el-icon-plus {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a1a0a0;
  border-radius: 5px;
}

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-submenu__icon-arrow{
  position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -7px;
}
.user-dropdown{
  width:340px;
}
.el-popper{
  margin-top:0px;
}
.el-dropdown-menu__item--divided:before{
  height:0px;
}
.drName:hover{
  color:#3f9b6a;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
  background-color:#ecf5f0;
  color:#3f9b6a;
}
.el-menu{
   padding:12px 0;
 }

</style>
