<template>
  <div>
    <!-- <el-container> -->
    <div class="el-header">
      <div class="content">
        <!--<img :src="imgSrc1" />-->
        <img class="header-img" src="../../public/logo2.png" alt="">
        <span class="header-text">统一用户身份认证系统</span>
      </div>
    </div>
    <!-- <el-container> -->
    <div class="dhfw-main">
      <div class="main-con">
        <h3 style="font-weight:bolder">我的工作台</h3>
        <!-- <div class="tuichu"   @click="SystemOut()">退出</div> -->
        <a-dropdown class="tuichu">
          <div>{{ nickName }}</div>
          <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="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 class="dhfw-content">
          <div>
            <ul class="list">
              <li v-for="item in systemList" :key="item.joinsysCode">
                <a @click="redrictSystem(item.returnUrl,item.name,item.joinsysCode)">
                  <img :src="item.icon" alt=""/>
                  <h2> {{ item.name }}</h2>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="el-footer">-->
    <!---->
    <!--</div>-->
    <!-- </el-container> -->
  </div>
  <!-- </el-container> -->
</template>

<script>
import { cassss, getUserSystemByRole } from '@/api/login'
import { mapActions } from 'vuex'
// import storage from 'store'
// import { ACCESS_TOKEN } from '@/store/mutation-types'
import { resetUserPwd } from '@/api/system/user'
import { getToken } from '@/utils/auth'

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()
      }
    }
    // const validateConfirmPass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入新密码确认'))
    //   } else if (value !== this.form.newPassword) {
    //     callback(new Error('两次输入的密码不一致'))
    //   } else {
    //     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, // 修改密码弹框
      // imgSrc1: require('../../public/images/logo1.png'),
      ArrImg: [],
      systemList: {},
      rules: {
        newPassword: [
          { required: true, validator: validateNewPass, trigger: 'change' }
        ],
        confirmPassword: [
          { required: true, validator: validateNewPass, trigger: 'change' }
        ]
      }

    }
  },
  components: {},
  computed: {},
  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
        }
      })
    },
    redrictSystem (url, name, code) {
      const token = getToken()
      console.log(url)
      // 如果不是跳转注册系统  就需要带着个人信息跳转
      if (url === '/') {
        window.location.href = '/SSO/'
      } else if (url === '/CAS') {
        // 如果点击的是知识管理系统的话调用接口访问CAS中央服务器
        const username = sessionStorage.getItem('username')
        const password = sessionStorage.getItem('password')
        cassss(username, password, code).then(res => {
          if (res.code === 200) {
            window.open(res.msg)
          }
        })
      } else {
        const form = document.createElement('form')
        form.action = `${url}?token=${token}`
        form.target = '_blank'
        form.method = 'get'
        form.style.display = 'none'
        const opt = document.createElement('input')
        opt.name = 'token'
        opt.value = token
        form.appendChild(opt)
        document.body.appendChild(form)
        // 提交数据
        form.submit()
      }
    },
    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
        }
      })
    }
  }

}
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  background-color: #f5f5fa;
}

.el-header {
  background: #3B75F5;
  position: relative;
  height: 80px;
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .header-img {
    position: absolute;
    top: 35% !important;
    left: 5% !important;
    width: 25%;
    height: 25%;
    transform: scale(0.9);
  }

  .header-text {
    position: absolute;
    font-weight: bolder;
    font-size: 12px !important;
    color: #fff;
    top: 35% !important;
    left: 30% !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1536px) {
  .header-img {
    position: absolute;
    top: 25% !important;
    left: 15% !important;
    transform: scale(0.7);
  }

  .header-text {
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    color: #fff;
    top: 30%;
    left: 35%;
  }
}

.el-header .content {
  width: 1001px;
  margin: 0 auto;
  text-align: left;
}

.el-footer {
  color: #333;
  font-size: 14px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #fff;
  margin-top: 10px;
}
</style>
<style>
ol, ul, li {
  list-style: none;
}

.dhfw-main {
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  height: calc(100vh - 120px);
  min-height: calc(100vh - 120px);
}

.dhfw-main .main-con {
  width: 1001px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2%;
  /* background: url('../../public/skipSystem/icon3.png') no-repeat;
  background-size: 100% 100%; */
  box-shadow: 2px 0px 12px #f6f6f6;
  height: 81%;
  padding-top: 20px;
  margin-top: 10px;
}

.dhfw-main .main-con h3 {
  text-align: left;
  margin: 0;
  border-left: 3px solid #2774b5;
  padding-left: 10px;
}

.dhfw-main .dhfw-content {
  width: 100%;
  height: 60%;
  display: table;
}

.tuichu {
  float: right;
  margin-right: 20px;
  margin-top: -2%;
  color: #6794F7;
  cursor: pointer;
  /* width: 100px; */
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  line-height: 30px;
  background: url('../../public/skipSystem/tuichu.png') no-repeat;
  background-size: 100% 100%;
}

.tuichu:hover {
  background: #53AAF6;
  color: #fff;
}

.dhfw-main .dhfw-content > div {
  display: table-cell;
  vertical-align: middle;
}

.list {
  width: 76%;
  height: 140px;
  margin: 0 auto;
  padding: 0;
}

.list li {
  width: 238px;
  height: 136px;
  float: left;
  display: table;
  border: 1px solid rgb(238, 238, 238);
  border-radius: 10px;
  margin-top: 20px;
  background: url('../../public/skipSystem/anbg.png') no-repeat;
  background-size: 100% 100%;
  box-shadow: 0px 5px 8px 0px rgba(4, 46, 117, 0.05);
}

.list li:hover, .list li.listhover {
  /* border: 1px solid rgb(21, 105, 200); */
  border: 1px solid #53AAF6;
  /* background: rgb(21, 105, 200); */
  background: #53AAF6;
  box-shadow: 0px 5px 8px 0px rgba(4, 46, 117, 0.05);
}

.list li:hover a h2, .list li.listhover a h2 {
  color: #fff;
}

.list li:nth-child(2), .list li:nth-child(5) {
  margin: 20px 20px 0;
}

.list li a {
  display: table-cell;
  vertical-align: middle;
}

.list li a img {
  transform: scale(0.8);
}

.list li a h2 {
  color: #666;
  font-weight: normal;
  font-size: 16px;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-bottom: 15px;
}

.header-img {
  position: absolute;
  top: 25%;
  left: 20%;
  transform: scale(0.7);
}

.header-text {
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  color: #fff;
  top: 30%;
  left: 35%;
}
</style>
