<template>
  <div class="header">
    <div class="left" @click="goHome">
      <img class="logo" src="../../../assets/images/systemNav/logo.png" alt="">
    </div>
    <div class="searchBar">
      <a-input-search placeholder="输入描述关键字" enter-button="搜索" size="large" @search="onSearch" />
    </div>
    <div class="right">
      <button class="skinBtn"></button>
      <a-dropdown class="quit">
        <button class="quitBtn"></button>

        <a-menu slot="overlay">
          <!--<a-menu-item key="0">-->
          <!--<router-link :to="{ name: 'center' }">-->
          <!--<a-icon type="user"/>-->
          <!--<span>个人中心</span>-->
          <!--</router-link>-->
          <!--</a-menu-item>-->
          <a-menu-item key="0">
            {{ nickName }}
          </a-menu-item>
          <a-menu-item key="1">
            <a-icon type="edit" />
            <span @click="showupdatedModel=true">修改密码</span>
            <a-modal
              :destroyOnClose="true"
              v-model="showupdatedModel"
              title="修改密码"
              on-ok="handleOk"
              width="600px"
              @ok="handleSubmit">
              <a-form-model ref="form" :rules="rules" :model="form">
                <a-form-model-item label="用户名" prop="userName" :labelCol="{span:6}" :wrapperCol="{ span: 12 }">
                  <a-input :disabled="true" v-model="form.userName" />
                </a-form-model-item>
                <a-form-model-item prop="newPassword" label="旧密码" :labelCol="{span:6}" :wrapperCol="{ span: 12 }">
                  <a-input-password placeholder="请输入旧密码" v-model="form.newPassword" />
                </a-form-model-item>
                <a-form-model-item prop="confirmPassword" label="新密码" :labelCol="{span:6}" :wrapperCol="{ span: 12 }">
                  <a-input-password placeholder="请输入新密码" v-model="form.confirmPassword" />
                </a-form-model-item>
              </a-form-model>
            </a-modal>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="logout" />
            <span @click="SystemOut()">退出登录</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>

    </div>

  </div>

</template>

<script>
// import { getUserSystemByRole } from '@/api/login'
import { mapActions } from 'vuex'
import { resetUserPwd } from '@/api/system/user'
// import storage from 'store'
// import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  data () {
    const validateNewPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){5,20}$/.test(value)) {
        callback(new Error('请输入5-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
      } else {
        if (this.form.confirmPassword !== '') {
          this.$refs.form.validateField('confirmPassword')
        }
        callback()
      }
    }

    return {
      nickName: this.$store.state.user.name, // 真实姓名
      username: this.$store.state.user.userName, // 登录名字
      userId: this.$store.state.user.userId,
      form: {
        userName: this.$store.state.user.userName,
        newPassword: undefined,
        confirmPassword: undefined
      }, // antd表单必备初始值
      showupdatedModel: false, // 修改密码弹框
      ArrImg: [],
      rules: {
        newPassword: [{ required: true, validator: validateNewPass, trigger: 'change' }],
        confirmPassword: [{ required: true, validator: validateNewPass, trigger: 'change' }]
      }
    }
  },
  created () {
    // this.systemList=this.ArrImg
    console.log(`this.$store.state.user.userName`, this.$store.state.user)
    // this.systemInit()
  },
  methods: {
    ...mapActions(['Logout']),
    // systemInit (key) {
    //   getUserSystemByRole().then((res) => {
    //     if (res != null && res !== '') {
    //       console.info(res)
    //       this.systemList = res
    //     } else {
    //       this.systemList = this.ArrImg
    //     }
    //   })
    // },
    goHome () {
      // console.log('1234567890 :>> ', 1234567890)
      this.$router.push({ path: '/user/systemNav' })
    },
    SystemOut () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          // return this.Logout({})
          return this.Logout({})
            .then(() => {
              setTimeout(() => {
                window.location.reload()
              }, 16)
            })
            .catch((err) => {
              this.$message.error({
                title: '错误',
                description: err.message
              })
            })
        },
        onCancel () {}
      })
    },
    handleSubmit (e) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          resetUserPwd(this.form.newPassword, this.form.confirmPassword).then((response) => {
            if (response.code === 200) {
              this.$message.success('修改成功', 3)
              this.showupdatedModel = false
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    // 搜索
    onSearch (value) {
      // console.log(value)
    }
  }
}
</script>

<style lang='less' scoped>
.header {
  width: 100%;
  height: 185px;
  padding: 0 78px 42px;
  display: flex;
  background: url('../../../assets/images/systemNav/bg.png') no-repeat center center;
  background-size: 100% 100%;
  justify-content: space-between;
  align-items: center;
  .right {
    .skinBtn {
      width: 42px;
      height: 42px;
      border: none;
      margin-right: 25px;
      background: url('../../../assets/images/systemNav/skin.png') no-repeat center center;
      background-size: 100% 100%;
    }
    .quitBtn {
      width: 42px;
      height: 42px;
      border: none;
      background: url('../../../assets/images/systemNav/pic.png') no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .searchBar {
    width: 620px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);

    &:active, &:visited{
      box-shadow: 0 0 8px rgba(3,123,198,0.5);
    }
    /deep/.ant-input-group {
      width: 620px;
      height: 60px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);
      .ant-input {
        height: 100%;
        padding-left: 38px;
        color: #999999;
        font-size: 16px;
        border: none;
        box-shadow: none;
      }

      .ant-input-group-addon {
        .ant-btn-primary {
          font-weight: Bold;
          font-size: 24px;
          width: 145px;
          height: 100%;
          text-align: center;
          color: #037BC6;
          background: #e6f5fb;
          border: none;
        }
      }
    }
  }
}
</style>
<style>
.ant-dropdown {
  display: block;
  width: 160px;
  color: rgba(255, 255, 255, 0.8);
}
.ant-dropdown-menu {
  text-align: center;
  padding: 8px 20px;
  margin-top: 5px;
  border-radius: 6px;
  opacity: 1;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgb(0, 0, 0, 15%);
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.ant-dropdown-menu-item:first-child {
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: none;
}
</style>
