<template>
  <div class="headnavbar">
    <div class="left-part">
      <div class="logo">
        <img src="../../assets/images/v2/logo.png" alt="">
      </div>
      <div class="left-menu">
        <div :class="{'active': itemActive === item.itemId}" class="menu-item"
          v-for="item in topMenuList"
          :key="item.itemId"
          @click="itemActive = item.itemId">
          <img :src="item.icon" alt="">
          <span>{{ item.itemName }}</span>
        </div>
      </div>
    </div>

    <div class="right-part">
      <div class="bus-date"><span class="label">营业日期：</span><span>{{businessDate}}</span></div>
      <div class="org">{{ userInfo.orgName }}</div>
      <div class="right-menu">
        <template v-if="device!=='mobile'">
          <!-- <search id="header-search" class="right-menu-item" /> -->

          <!-- <error-log class="errLog-container right-menu-item hover-effect" /> -->

          <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->

          <!-- <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
            <size-select id="size-select" class="right-menu-item hover-effect" />
          </el-tooltip> -->

          <!-- <lang-select class="right-menu-item hover-effect" /> -->

        </template>

        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper" style="">
            <img src="../../assets/images/user-pic@2x.png" class="user-avatar">
            <span >{{userName}}</span>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu divided slot="dropdown">
            <el-dropdown-item @click.native="tousercenter">
              <span style="font-family: 'SourceHanSansCN';">{{ $t('navbar.profile') }}</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <span style="display:block;font-family: 'SourceHanSansCN';" @click="dialogVisible = true">特定背景</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span style="display:block;font-family: 'SourceHanSansCN';">{{ $t('navbar.logOut') }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <el-dialog
        title="特定背景"
        :visible.sync="dialogVisible"
        width="40%">
        <div class="dial-sty">
          <span style="margin-right: 10px;color: #212121;">自定义背景颜色</span>
          <el-color-picker v-model="themeSetting" show-alpha :predefine="predefineColors" @change="themeChange"></el-color-picker>
          <span style="color: #707070;margin-left: 10px">(注：尚未实现接口，只显示效果)</span>
        </div>
        <el-divider content-position="left">其他版本选择</el-divider>
        <div class="dial-sty">
          <el-radio-group v-model="themeBkg" @change="bkgChange">
            <el-radio
            :label="item.value"
            v-for="item in colorLt"
            :key="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="dialogVisible = false">
            {{ $t('table.sbumit') }}
          </el-button>
          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dialogVisible = false">
            {{ $t('table.cancel') }}
          </el-button> -->
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Vue from 'vue';
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
// import ErrorLog from '@/components/ErrorLog'
// import Screenfull from '@/components/Screenfull'
// import SizeSelect from '@/components/SizeSelect'
import LangSelect from '@/components/LangSelect'
import ThemePicker from '@/components/ThemePicker'
import { getName } from '@/utils/auth'
import { validAlphabets, validateLocalMobile } from '@/utils/validate';

export default {
  components: {
    // Breadcrumb,
    // Hamburger,
    // ErrorLog,
    // Screenfull,
    // SizeSelect,
    LangSelect,
    ThemePicker
    // Search
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device'
    ])
  },
  data(){return{
    userName:getName(),
    dialogVisible: false,
    themeSetting: undefined,
    themeBkg: undefined,
    predefineColors: [
      '#ff4500',
      '#ff8c00',
      '#ffd700',
      '#90ee90',
      '#00ced1',
      '#1e90ff',
      '#c71585',
      'rgba(255, 69, 0, 0.68)',
      'rgb(255, 120, 0)',
      'hsv(51, 100, 98)',
      'hsva(120, 40, 94, 0.5)',
      'hsl(181, 100%, 37%)',
      'hsla(209, 100%, 56%, 0.73)',
      '#c7158577'
    ],
    colorLt: [
      { label: '默认版本', color: 'url('+require('@/assets/images/v3/bg@2x.png')+') 0% 0% / 100% 100% no-repeat', value: '1' },
      { label: '初始版本', color: '#1688c1', value: '2' },
      // { label: '初始版本', color: '#2c8cbc', value: '3' },
      // { label: '初始版本', color: '#2c8cbc', value: '4' },
      // { label: '初始版本', color: '#2c8cbc', value: '5' },
      // { label: '初始版本', color: '#2c8cbc', value: '6' },
      // { label: '初始版本', color: '#2c8cbc', value: '7' },
      // { label: '初始版本', color: '#2c8cbc', value: '8' },
    ],
    itemActive: 0,
    topMenuList: [
      { itemId: 0, icon: require('../../assets/images/v2/internal_documents.png'), itemName: '行内公文', itemRoute: '' },
      { itemId: 1, icon: require('../../assets/images/v2/market_news.png'), itemName: '市场消息', itemRoute: '' },
      { itemId: 2, icon: require('../../assets/images/v2/about_us.png'), itemName: '关于我们', itemRoute: '' },
      { itemId: 3, icon: require('../../assets/images/v2/agency_matters.png'), itemName: '待办事项', itemRoute: '' },
    ],
     userInfo: {
      id: undefined,
      name: undefined,
      employeeNumber: undefined,
      orgName: undefined,
      account: undefined,
      password: undefined,
    },
    businessDate:''
  }},
  created() {
    const USER_INFO = JSON.parse(window.localStorage.getItem('USER_INFO'))
    console.log(typeof USER_INFO, USER_INFO);
    Object.keys(this.userInfo).forEach((v) => {
      this.userInfo[v] = USER_INFO.value[v]
    })
    let date = Vue.ls.get('USER_INFO').businessDate.split(' ')[0]
    this.businessDate = date.split('-')[0]+'年'+date.split('-')[1]+'月'+date.split('-')[2]+'日'
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    tousercenter() {
      this.$router.push({ path:'/usercenter'})
    },
    themeChange(val) {
      this.themeBkg = undefined
      this.$store.dispatch('settings/changeSetting', {
        key: 'themeSetting',
        value: undefined
      })
      this.$store.dispatch('settings/changeSetting', {
        key: 'themeBgk',
        value: val
      })
    },
    bkgChange(val) {
      this.themeSetting = undefined
      if (val == 1) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'themeSetting',
          value: undefined
        })
        let obj = this.colorLt.find(ele => ele.value === val)
        this.$store.dispatch('settings/changeSetting', {
          key: 'themeBgk',
          value: obj.color
        })
      } else if (val == 2) {
        let obj = this.colorLt.find(ele => ele.value === val)
        this.$store.dispatch('settings/changeSetting', {
          key: 'themeBgk',
          value: obj.color
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.headnavbar {
  height: 56px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: url('../../assets/images/v2/blue_sky_v2.png') no-repeat;
  background-size: 100% 100%;
  box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 30%);
  @include flex-between;

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .left-part {
    display: flex;
    .logo {
      width: 168px;
      height: 56px;
      @include flex-center;
      img {
        width: 117px;
        height: 24px;
      }
    }
    .left-menu {
      height: 56px;
      display: flex;
      align-items: center;
      .menu-item {
        height: 54px;
        margin-top: 2px;
        padding: 0 20px;
        @include flex-center;
        font-size: 14px;
        font-family: 'SourceHanSansCN';
        cursor: pointer;
        // &:hover {
        //   background-color: #227CC8;
        // }
        &.active {
          background-color: #227CC8;
          border-bottom: 4px solid #66D202;
          transition: all .3s;
        }
        img {
          width: 30px;
          height: 30px;
        }
        span {
          margin-left: 7px;
          color: #fff;
        }
      }
    }
  }
  .right-part {
    display: flex;
    align-items: center;
    font-family: 'SourceHanSansCN';
    .org {
      min-width: 200px;
      max-width: 300px;
      height: 56px;
      padding: 0 10px;
      font-size: 14px;
      color: #fff;
      border-left: 1px solid rgba(255,255,255,.1);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      @include flex-center;
    }
    .bus-date {
      height: 56px;
      padding: 0 44px;
      font-size: 14px;
      color: #fff;
      @include flex-center;
      .label {
        color: #FFF;
        opacity: .7;
      }
    }
    .right-menu {
      float: right;
      height: 100%;
      // line-height: 56px;

      &: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 .3s;

          &:hover {
            background: rgba(0, 0, 0, .025)
          }
        }
      }

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

        .avatar-wrapper {
          // margin-top: 5px;
          position: relative;
          display: flex;align-items: center;justify-content: center;height: 56px;
          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }
          span{
              font-size: 14px;
              font-family: 'SourceHanSansCN';
              font-weight: 500;
              color: #FFFFFF;
              margin: 0 6px 0 8px;
          }
          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -12px;
            top: 21px;
            color: #FFF;
            font-size: 12px;
          }
        }
      }
    }
  }
}
.dial-sty {
  padding: 10px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
}
::v-deep .el-button--text {
  display: block!important;
}
.el-radio {
  margin-bottom: 10px;
  ::v-deep .el-radio__input {
    width: 16px;
    height: 16px;
    .el-radio__inner {
      border: 1px solid #BDBDBD;
    }
  }
  ::v-deep .el-radio__label {
    font-size: 13px;
    color: #212121;
    padding-left: 5px;
  }
  ::v-deep .el-radio__input.is-disabled.is-checked  .el-radio__inner {
    background-color: #C4CCE0;
    border: 1px solid #C4CCE0;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    color: #707070;
  }
  ::v-deep.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #FFFFFF
  }
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border: 1px solid #3D5298;
    background: #3D5298;
  }
}
.box-card {
  width: 480px;
}
</style>
