<!-- 前台头部 -->
<template>
    <el-header height="60px">
        <div class="header-container">
            <div class="header-left" @click="goIndex">
                <!-- <img class="logo" src="../../assets/img/idx-logo.png" alt /> -->
                <!-- <img class="title" src="../../assets/img/idx-logo.png" alt /> -->
            </div>
            <!-- <div class="first-menus">
                <div
                :class="
                    `first-menus-item ${currentMenu == item.alias ? 'active-menu' : ''}`
                "
                v-for="item in frontMenus"
                :key="item.alias"
                @click="handleClickMenu(item)"
                >
                <svgIcon
                    icon-style="icon header-icon"
                    :icon-class="item.menuIcon ? item.menuIcon : ''"
                />
                {{ item.name }}
                </div>
            </div> -->
            <div class="header-right">
                <!-- <div class="input">
                    <el-input
                        v-model="input"
                        :placeholder="this.$t('navigator.searchTip')"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                        ></el-button>
                    </el-input>
                </div> -->
                <div> <el-button type="primary" size="small" style="height:35px;margin-right:10px" @click="downFile">{{$i18n.locale === 'zh-CN'?'操作手册':'Operation manual'}}</el-button></div>
                <langSelect />
                <el-popover
                    popper-class="header-popper"
                    :visible-arrow="false"
                    width="250"
                    trigger="hover"
                >
                    <HtAvatar
                        class="avatar"
                        slot="reference"
                        :user="currentUser"
                    />
                    <template>
                        <div class="user-box-header">
                            <h3
                                v-if="$store.state.login.currentUser"
                                style="margin: 5px 0"
                            >
                                {{ $store.state.login.currentUser.username }}
                            </h3>
                        </div>
                        <ul class="user-link-ul">
                            <li @click="openPersonalCenter">
                                <i class="el-icon-user"></i>
                                {{ $t('navigator.personalCenter') }}
                            </li>
                            <li @click="openResetPwdDialog">
                                <i class="el-icon-setting"></i>
                                {{ $t('navigator.changePsd') }}
                            </li>
							<!-- v-if="userType !== 2" -->
                            <li  @click="handleSysPlat">
                                <i class="el-icon-monitor" />
                                {{ $t('navigator.manageSys') }}
                            </li>
                            <li @click="logout">
                                <i class="el-icon-circle-close" />
                                {{ $t('navigator.signOut') }}
                            </li>
                        </ul>
                        <!-- <div class="flex user-box-logout" @click="logout">
                            <el-link :underline="false">退出系统</el-link>
                        </div> -->
                    </template>
                </el-popover>
            </div>
        </div>

        <!-- <ht-sidebar-dialog
            title="修改密码"
            :visible.sync="modifyPwdDialogVisible"
            :close-on-click-modal="false"
            width="28%"
            id="modlfy-dialog"
            :before-close="() => (modifyPwdDialogVisible = false)"
        >
            <el-form
                :model="pwdForm"
                :rules="pwdRules"
                ref="pwdForm"
                label-width="120px"
                size="mini"
            >
                <el-form-item label="旧密码" prop="old">
                    <el-input
                        type="password"
                        v-model="pwdForm.old"
                        placeholder="请输入旧密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="new">
                    <el-input
                        type="password"
                        placeholder="请输入新密码"
                        v-model="pwdForm.new"
                    ></el-input>
                </el-form-item>
                <el-form-item label="重复新密码" prop="newRepeat">
                    <el-input
                        type="password"
                        placeholder="请再次输入新密码"
                        v-model="pwdForm.newRepeat"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span
                class="dialog-footer"
                style="text-align: center; bottom: auto"
            >
                <el-button size="small" type="primary" @click="submitForm()"
                    >确认</el-button
                >
                <el-button size="small" @click="modifyPwdDialogVisible = false"
                    >取 消</el-button
                >
            </span>
        </ht-sidebar-dialog> -->
    </el-header>
</template>

<script>
import HtAvatar from '@/components/common/HtAvatar.vue'
import langSelect from '@/components/langSelect'
import {mapState} from 'vuex'
import {Base64} from 'js-base64'
import req from '@/request.js'
import menu from '@/api/menu.js'
import uc from '@/api/uc.js'

export default {
    name: 'navigator',
    components: {HtAvatar, langSelect},
    props: ['menuShow', 'showTopMenu'],
    data() {
        var validateNew = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'))
            }
            let config = this.pwdStrategy
            if (config.enable == 1) {
                let pwdRule = config.pwdRule
                let pwdLength = config.pwdLength
                if (pwdRule) {
                    if (value.length < pwdLength) {
                        callback(new Error('新密码长度至少为' + pwdLength))
                    } else if (pwdRule == 2) {
                        var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
                        if (!re.test(value)) {
                            callback(new Error('新密码必须包含数字、字母'))
                        } else {
                            callback()
                        }
                    } else if (pwdRule == 3) {
                        var re = new RegExp(
                            '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])'
                        )
                        if (!re.test(value)) {
                            callback(
                                new Error('新密码必须包含数字、字母、特殊字符')
                            )
                        } else {
                            callback()
                        }
                    } else if (pwdRule == 4) {
                        var re = new RegExp(
                            '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
                        )
                        if (!re.test(value)) {
                            callback(
                                new Error(
                                    '新密码必须包含数字、大小字母、特殊字符'
                                )
                            )
                        } else {
                            callback()
                        }
                    } else {
                        callback()
                    }
                }
            } else {
                if (value.length < 6) {
                    callback(new Error('新密码长度至少为6'))
                } else {
                    callback()
                }
            }
        }
        var validateold = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'))
            } else {
                callback()
            }
        }
        var validateNewReapeat = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'))
            } else {
                callback()
            }
        }
        return {
            input: '',
            currentMenu: '',
            modifyPwdDialogVisible: false,
            pwdForm: {
                old: '',
                new: '',
                newRepeat: '',
            },
            pwdRules: {
                old: [{validator: validateold, trigger: 'blur'}],
                new: [{validator: validateNew, trigger: 'blur'}],
                newRepeat: [{validator: validateNewReapeat, trigger: 'blur'}],
            },
            actionUrl:''
        }
    },
    created() {
			this.actionUrl = window.context.portal
    },
    beforeMount() {
        // let arr = window.location.pathname.split('/')
        // let num = arr.length
        // this.currentMenu = arr[num - 1]
        // console.log(this.currentMenu, arr)
    },
    mounted() {
        !this.currentUser && this.$store.dispatch('user/loadCurrentUserDetail')
        const currentUser = this.$store.state.login.currentUser
        if ((!this.frontMenus || this.frontMenus.length == 0) && currentUser) {
            this.$store.dispatch('menu/actionFrontMenus').then((res) => {
                this.activePage()
            })
        }
    },
    computed: {
        ...mapState({
            currentUser: (state) => state.user.currentUserDetail,
            token: (state) => state.login.currentUser.token,
            frontMenus: (state) => {
                return state.menu.frontMenus
            },
            sysMenus: (state) => state.menu.sysMenus,
            userType: function () {
                if (this.currentUser && this.currentUser.user) {
                    return this.currentUser.user.userType
                }
            },
            pwdStrategy: (state) => state.user.pwdStrategy,
        }),
    },
    watch: {
        $route: 'activePage',
    },
    methods: {
        goIndex() {
            this.$router.push({
                path: `/business`,
            })
        },
        openResetPwdDialog() {
            // this.$store.dispatch('user/getDefPwdStrategy')
            // this.modifyPwdDialogVisible = true
            // if (this.$refs['pwdForm']) {
            //     this.$refs['pwdForm'].resetFields()
            // }
            this.$router.push({
                path: '/platLayout/resetPwdView',
                query: {type: 'settings'},
            })
        },
        openPersonalCenter() {
            this.$router.push({
                path: '/platLayout/PersonalInfo',
            })
        },
        handleSysPlat() {
            if (!this.sysMenus.length) {
                this.$store.dispatch('menu/actionSysMenus').then((res) => {
                    if (res) {
                        window.open(
                            window.context.manage +
                                // "http://localhost:8081/mvue"+
                                '/sysplat/' +
                                `${this.sysMenus[0].children[0].alias}` +
                                '?token=' +
                                this.token,
                            '_blank'
                        )
                    }
                })
            } else {
                window.open(
                    window.context.manage +
                        // "http://localhost:8081/mvue"+
                        '/sysplat/' +
                        `${this.sysMenus[0].children[0].alias}` +
                        '?token=' +
                        this.token,
                    '_blank'
                )
            }
        },
        logout() {
            this.$store.dispatch('menu/clearMenus')
            this.$store.dispatch('user/clearUser')
            this.$store.dispatch('menu/setCopyMenus', []) //菜单
            let loginRouthPath =
                localStorage.getItem(
                    this.$store.state.login.currentUser.account +
                        'loginRoutePath'
                ) || '/login'
            this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                switch (window.ssoConfig.mode) {
                    case 'cas':
                    case 'oauth':
                        window.sessionStorage.removeItem('currentUser')
                        window.location.href =
                            window.ssoConfig.logout +
                            '?service=' +
                            window.location.href.split('?')[0]
                        break
                    default:
                        this.$router.push({
                            path: loginRouthPath,
                        })
                        break
                }
            })
        },
        handleClickMenu(item) {
            console.log(item)
            let hasSideMenu = item.children.length ? true : false
            this.$emit('update:menuShow', hasSideMenu)
            this.currentMenu = item.alias
            if (item.children.length !== 0) {
                let childrens = item.children
                let subPath = childrens[0].alias
                if (
                    childrens[0].children &&
                    childrens[0].children.length !== 0
                ) {
                    let threeChildrens = childrens[0].children
                    let threePath = threeChildrens[0].alias
                    this.$router.push(
                        '/bizPlat/' +
                            item.alias +
                            '/' +
                            subPath +
                            '/' +
                            threePath
                    )
                } else {
                    this.$router.push('/bizPlat/' + item.alias + '/' + subPath)
                }
            } else {
                this.$router.push('/bizPlat/' + item.alias)
                this.currentMenu = item.alias
            }
        },
        activePage() {
            let fullPath = this.$route.path
            let path = fullPath.split('/')
            let urlAnchor = path[path.indexOf('bizPlat') + 1]
            this.frontMenus.filter((item) => {
                if (item.alias == urlAnchor) {
                    this.currentMenu = urlAnchor
                    console.log(this.currentMenu)
                }
            })
        },
        downFile(){
            window.open(this.actionUrl+'/biz/org/v1/downModel','_blank')
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-header {
  padding: 0;
}
.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: $--navigator-main-color;
  color: #fff;
  z-index: 999;
}
.header-left {
  width: 18%;
  margin-left: 10px;
  display: flex;
  // justify-content: space-around;
  align-items: center;
  cursor: pointer;
  .logo {
    width: 50px;
    height: auto;
    vertical-align: middle;
  }
  .title {
    width: 260px;
    margin-left: 10px;
    height: 60px;
    vertical-align: middle;
  }
}
.first-menus {
  width: 78%;
  display: flex;
}
.first-menus-item {
  margin: 0 10px;
  padding: 8px 20px 12px;
  position: relative;
  cursor: pointer;
  font-size: 18px;
  color: $--navigator-text-color;
  .header-icon {
    font-size: 18px;
  }
}
.first-menus-item.active-menu,
.first-menus-item:hover {
  color: $--navigator-main-text-color;
}
.header-right {
  margin-right: 10px;
  display: flex;
  align-items: center;
  .input {
    width: 340px;
    height: 40px;
    border-radius: 4px;
    margin: 19px 36px;
    margin-left: 24px;

    /deep/ .el-input input,
    /deep/ .el-input-group__append {
      background-color: #f1f1f1;
      border: none;
      .el-icon-search {
        font-size: 18px;
      }
    }
    /deep/ .el-input-group {
      height: 100%;
    }

    /deep/ .el-input {
      input {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 19px;
        letter-spacing: 0px;
        height: 100%;
      }

      input::-webkit-input-placeholder {
        // 针对 谷歌 内核
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #c4c4c4;
      }

      input:-moz-placeholder {
        // 火狐
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #c4c4c4;
      }

      input:-ms-input-placeholder {
        // 微软ie
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #c4c4c4;
      }
    }
  }
}
.el-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.el-avatar i {
  font-size: 16px;
  color: #c0c4cc;
}
.user-box-header {
  padding: 10px;
  h3 {
    color: $--navigator-text-color;
    font-weight: bold;
  }
}

.user-link-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: $--navigator-main-color;
  > li {
    padding: 8px 10px;
    cursor: pointer;
    color: $--navigator-text-color;
  }
  > li > i {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
  }
  > li:hover {
    color: $--navigator-text-color;
    background-color: #f1f1f1;
  }

  .el-link {
    color: #606266 !important;
    i {
      font-size: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
.user-box-logout {
  justify-content: center;
  background: $--navigator-main-color;
  // border-top: 1px solid rgba($--navigator-text-color,0.1);
  // border-bottom: 1px solid rgba($--navigator-text-color,0.1);
  // margin-top: 10px;
  color: $--navigator-main-text-color !important;
}
.user-box-logout:hover {
  background: $--navigator-main-text-color;
}

.user-box-logout > .el-link {
  line-height: 46px;
  width: 100%;
  color: $--navigator-main-text-color !important;
  background: $--navigator-main-color;
}

.user-box-logout > .el-link:hover,
.user-box-logout > .el-link:focus {
  color: $--navigator-main-text-color !important;
}
</style>
<style>
.header-popper {
  /* border-color: #dedede; */
  width: 250px !important;
  border-radius: 10px;
  overflow: hidden;
  padding: 16px !important;
  vertical-align: middle;
  /* top: 54px !important; */
  right: 0 !important;
  left: initial !important;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 10%);
}
</style>
