<template>
  <div class="header-mine-new" id="header-mine-new">
     <!-- v-if="getUsers" -->
    <div class="headerContent">
      <div class="headerContentLeft"
        ><img :src="syncUrl ? syncUrl(getUsers.kings_lims) : getUsers.kings_lims" class="leftImg" @click="shouLink"
      /></div>
      <div  class="headerContentCenter">
       <el-protal-menu :data="data"  v-if="getUsers.topmenu"></el-protal-menu>
      </div>
      <div :span="10" class="headerContenRight">
        <!-- <div class="RigInput" v-if="searchShow">
					<transition name="fold"><el-input :placeholder="t(`headerMenu.enterContent`)" suffix-icon="el-icon-qz-iconsousuo"></el-input></transition>
				</div> -->
        <el-popover placement="bottom" width="400" trigger="focus">
          <el-table
            class="itemSearchTable"
            height="200"
            :show-header="false"
            v-loading="prjSearchloading"
            :data="prjSearchList"
          >
            <el-table-column property="name" width="300">
              <template slot-scope="props">
              <span
                  v-html="props.row.name"
                  style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
                ></span>
              </template>
              </el-table-column>
            <el-table-column property="num">
              <template slot-scope="props">
                <span>{{ props.row.num }}</span>
                </template></el-table-column
            >
          </el-table>
          <el-input
            v-show="getUsers.searchinfo && getUsers.searchinfo == true"
            class="itemSearchInput"
            slot="reference"
            :placeholder="t(`headerMenu.enterItems`)"
            @input="prjSearchInput"
            suffix-icon="el-icon-search"
            v-model.trim="prjSearch"
          ></el-input>
        </el-popover>

        <div class="rigcontent2">
          <div class="online" v-if="online.value">
            <a @click="openOnlineVisible">{{ t(`headerMenu.online`) }}：{{online.value}}</a>
          </div>
          <el-badge
            v-show="(getUsers.messageinfo && getUsers.messageinfo == true)||iconmassage==true"
            :max="99"
            :value="warringInfo.warringInfoNum || ''"
            class="infoWarring"
          >
            <i
              @click="referrence"
              class="el-icon-qz-iconxiaoxi"
             
            ></i>
             <!-- v-show="getUsers.messageinfo && getUsers.messageinfo == true" -->
          </el-badge>
          <el-dialog
           :visible.sync="infoWarring"
            :modal="false"
            width="672"
           :custom-class="`
              infoWarringPop
              ${dialogInfoWarringStyle ? 'infoWarringPop1' : ''} 
              ${positionbottom ? 'infoWarringPop2' : ''}
           `"
            @opened="infoWarringPopShow"
            @closed="clearList"
          >
            <ul class="infoWarringScroll">
              <div
                v-if="warringInfo.infoList.length === 0"
                style="text-align: center; padding: 20px"
              >
                <img src="../img/noData.png" />
                <p>{{ t(`headerMenu.noMsg`) }}!</p>
              </div>
              <li v-for="(v, i) in warringInfo.infoList" :key="i">
	
                <div class="divider">
                  <p>{{ v.date }}</p>
                </div>
                <div class="clearfix infoRow" v-for="(vv, ii) in v.list" :key="ii">
                  <img
                    class="fl"
                    width="40"
                    height="40"
                    :src="
                      vv.head_portrait
                        ? vv.head_portrait
                        : (vv.id_mark === 'person'
                        ? require('../img/noHeaderImg.png')
                        : require('../img/sysMark.png'))
                    "
                  />
                  <div class="fl" style="padding-left: 8px; width: calc(100% - 54px)">
                    <div class="clearfix colInfo">
                      <p class="fl">
                        <span style="width: 425px">{{ vv.name }}</span
                        ><br />
                        <span style="width: 425px; color: #8c8c8c; font-size: 12px">{{
                          vv.occupation
                        }}</span>
                      </p>
                      <span class="fr">{{ vv.time_str }}</span>
                    </div>
                    <div
                      class="expandDiv"
                      v-for="(item, index) in vv.promotion_info"
                      :key="index"
                      @click="goDetail(v,item, index)"
                      :style="{cursor: v.listT && v.listT[index] && v.listT[index].opt_result?'pointer':'text'}"
                    >
                      <p class="triangle"></p>
                      <p v-html="item"></p>
                    </div>
                  </div>
                </div>
              </li>
              <li
                style="text-align: center"
                v-if="!warringInfo.warringInfoNum"
              >
                ~{{ t(`headerMenu.noMore`) }}~
              </li>
            </ul>
            <p style="text-align: center">
              <el-button size="small" type="primary" v-if="warringInfoBtnUrl">
                <a style="color: #fff" target="_blank" :href="warringInfoBtnUrl">
                  {{ t(`headerMenu.myMsg`) }}
                </a>
              </el-button>
              <el-button
                v-if="warringInfo.warringInfoNum"
                size="small"
                type="primary"
                :disabled="warringInfo.infoList.length === 0"
                @click="clearWarringInfo"
              >
                {{ t(`headerMenu.allRead`) }}
              </el-button>
            </p>
          </el-dialog>
          <!-- <i class="el-icon-qz-iconsousuo elfont" v-if="searchShow == false" @click="searchClick"></i> -->
          <i
            class="el-icon-qz-iconshouye1 elfont"
            @click="shouye"
            v-if="data.portal !== false"
          ></i>
          <!-- <el-badge :value="12" class="item"><i class="el-icon-qz-iconxiaoxi elfont"></i></!-->
          <i
            v-if="data.symbol !== false"
            class="el-icon-qz-iconoumu elfont"
            @click="keyboardBtn"
            :class="[keyboardOpen == false ? 'keyboard_btn_open' : 'keyboard_btn_close']"
          ></i>
        </div>
        <div class="rigcontent">
          <div>
            <img
              :src="`${syncUrl ? syncUrl(data.Pictureshows) : data.Pictureshows}${getUsers.avatar_icon_uri}&JID=${data.JID}`"
              class="rigHeaderImg"
              v-if="
                getUsers.avatar_icon_uri != '' && getUsers.avatar_icon_uri != undefined
              "
            />
            <img src="../img/noHeaderImg.png" class="rigHeaderImg" v-else />
          </div>
          <div class="textPro">{{ getUsers.user_name }}</div>
          <div class="menuTab">
            <el-menu mode="horizontal" class="el-menu-dropdown" @select="handleSelect">
              <el-submenu index="default" popper-append-to-body popper-class="el-menu-dropdown--popper">
                <template v-for="item in menuDropDown">
                  <template v-if="(item.children || []).length">
                    <el-submenu
                      :key="item.value"
                      :index="item.value"
                      popper-append-to-body
                      popper-class="el-menu-dropdown--popper"
                    >
                      <template slot="title">
                        <i :class="['dropIcon', item.icon]"></i>
                        <span>{{item.label}}</span>
                      </template>
                      <el-menu-item
                        v-for="child in item.children"
                        :key="child.value"
                        :index="child.value"
                      >
                        <template slot="title">{{ child.label }}</template>
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <template v-else>
                    <el-menu-item :key="item.value" :index="item.value">
                      <template slot="title">
                        <i :class="['dropIcon', item.icon]"></i>
                        <span>{{item.label}}</span>
                      </template>
                    </el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </el-menu>
          </div>
        </div>
      </div>
    </div>
    <!-- 资料修改 -->
    <el-dialog
      :title="t(`headerMenu.dropDown.personal`)"
      :visible.sync="dialogFormVisible"
      class="header-main-dialog"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form
        ref="ruleForm"
        :model="getUsers"
        label-width="100px"
        class="diLogFrom"
        :rules="formDataMy"
      >
        <div class="formIParents">
          <div class="formIMgContent">
            <img
              :src="`${syncUrl ? syncUrl(data.Pictureshows) : data.Pictureshows}${getUsers.avatar_icon_uri}&JID=${data.JID}`"
              class="dImage"
              v-if="
                getUsers.avatar_icon_uri != '' && getUsers.avatar_icon_uri != undefined
              "
            />
            <img src="../img/noHeaderImg.png" class="dImage" v-else />
            <input
              :accept="accept"
              id="fileId1"
              type="file"
              name="file"
              class="inputFile"
              @change="ImgUpLoad"
            />
            <div class="dtext">{{ t(`headerMenu.change`) }}</div>
          </div>
          <div class="title">{{ getUsers.user_name }}</div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t(`headerMenu.personal.name`)">
              <el-input
                v-model="getUsers.user_name"
                autocomplete="off"
                disabled
              ></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t(`headerMenu.personal.sex`)">
              <el-radio-group v-model="getUsers.sex" disabled>
                <el-radio :label="t(`headerMenu.personal.man`)">{{ t(`headerMenu.personal.man`) }}</el-radio>
                <el-radio :label="t(`headerMenu.personal.woman`)">{{ t(`headerMenu.personal.woman`) }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t(`headerMenu.personal.company`)">
              <el-tooltip
                class="item"
                effect="light"
                :content="getUsers.org_name"
                placement="bottom-start"
              >
                <el-input
                  v-model="getUsers.org_name"
                  autocomplete="off"
                  disabled
                ></el-input>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t(`headerMenu.personal.department`)"
              ><el-input
                v-model="getUsers.section_name"
                autocomplete="off"
                disabled
              ></el-input
            ></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t(`headerMenu.personal.duty`)"
              ><el-input v-model="getUsers.duty" autocomplete="off" disabled></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="t(`headerMenu.personal.tel`)"
              prop="work_phone"
              @click.native="rulesError2('work_phone', $event)"
              ><el-input
                v-model="getUsers.work_phone"
                autocomplete="off"
                type="text"
              ></el-input
            ></el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="footerCont">
          <el-button type="primary" @click="saveFfrom">{{ t(`toolbar.save`) }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 皮肤系统 -->
    <el-dialog
      class="header-mine-dialog header-mine-skin"
      :title="t(`headerMenu.dropDown.themes`)"
      width="700px"
      center
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
    >
      <ul>
        <li :key="i" v-for="(item, i) in skinBox">
          <div @click="selectSkin(item)" :class="item.css" class="themeCont">
            <div :class="[{ themeImgSelect: item.show }, 'themeImgContent']">
              <img :src="item.img" class="themeImg" />
              <span v-show="item.show" class="icon_ok"
                ><i class="el-icon-success"></i
              ></span>
            </div>
            <div class="desc">{{ item.skinName }}</div>
          </div>
        </li>
      </ul>
      <template slot="footer">
        <el-button size="small" @click="centerDialogVisible = false">{{ t(`toolbar.cancel`) }}</el-button>
        <el-button size="small" type="primary" @click="setSkin">{{ t(`toolbar.confirm`) }}</el-button>
      </template>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      class="header-mine-dialog header-mine-password"
      :title="t(`headerMenu.dropDown.password`)"
      width="600"
      center
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="changPassVisible"
    >
      <template slot="title">
        <span>{{ t(`headerMenu.dropDown.password`) }}</span>
        <p class="pwdMsg">{{ pwdMsg }}</p>
      </template>
      <el-form
        ref="updateUserRef"
        label-width="180px"
        :rules="formDataRules"
        :model="updateUser_formData"
      >
        <el-form-item :label="`${t(`headerMenu.password.name`)}:`">
          <el-input
            :disabled="true"
            v-model="updateUser_formData.username"
            class="wd288"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="`${t(`headerMenu.password.pwd`)}:`" 
          prop="passWord"
          @click.native="rulesError('passWord', $event)"
        >
          <el-input
            clearable
            type="password"
            v-model="updateUser_formData.passWord"
            :placeholder="t(`headerMenu.password.enterCurrPwd`)"
            class="wd288"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="`${t(`headerMenu.password.newPwd`)}:`" 
          prop="newPassword"
          @click.native="rulesError('newPassword', $event)"
        >
          <el-input
            @blur="checkPW"
            type="password"
            clearable
            v-model="updateUser_formData.newPassword"
            :placeholder="t(`headerMenu.password.enterNewPwd`)"
            class="wd288"
          >
            <template slot="suffix" v-if="data.passwordTips">
                <el-tooltip class="item" effect="dark" :content="data.passwordTips" placement="top-end">
                    <i class="el-input__icon el-icon-warning"></i>
                </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="`${t(`headerMenu.password.checkPwd`)}:`"
          prop="checkPw"
          @click.native="rulesError('checkPw', $event)"
        >
          <!-- :class="{isRedBorder:isPwDiffer,isGreenBorder:!isPwDiffer}" -->
          <el-input
            @blur="checkPW"
            :class="isPwDiffer ? 'form-error-tips' : ''"
            type="password"
            clearable
            v-model="updateUser_formData.checkPw"
            :placeholder="t(`headerMenu.password.pwdError`)"
            class="wd288"
          ></el-input>
          <span v-if="isPwDiffer">{{ t(`headerMenu.password.pwdWrong`) }}!</span>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button size="small" @click="changPassVisible = false" class="btncommon">
          {{ t(`toolbar.cancel`) }}
        </el-button>
        <el-button size="small" type="primary" @click="setPw" class="btncommon">
          {{ t(`toolbar.confirm`) }}
        </el-button>
      </template>
    </el-dialog>
    <!-- 在线人数 -->
    <el-dialog
      class="header-mine-dialog header-mine-online"
      :title="t(`headerMenu.online`)"
      :custom-class="data.diagStyle && data.diagStyle.customClass || ''"
      width="900px"
      center
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="onlineVisible"
    >
      <!-- <ul class="header-mine-online-ul">
        <li class="header-mine-online-ul-li" :key="idx" v-for="(user, idx) in data.onlineUserList">
          <span class="online-li-span online-li-user-name">{{ user.user_name }}</span>
          <span class="online-li-login-time">{{ user.login_time }}</span>
        </li>
      </ul> -->
      <el-table
        :data="data.onlineUserList"
        style="width: 100%"
        height="350"
        :show-header="false"
      >
        <el-table-column
            v-for="(v, idx) in cp_onlineUserListProps"
            :key="idx"
            :prop="v.prop"
            :label="v.label"
        >
          </el-table-column>
        </el-table>
    </el-dialog>

     <!-- 版本信息 -->
     <el-dialog class="header-main-dialog bzheader-content" :title="t(`headerMenu.dropDown.version`)" width="368px"  append-to-body :close-on-click-modal="false" :visible.sync="bzVisible">
        <div class="bzheader-img">
           <img :src="Information.logoUrl" class="leftImg" />
        </div>
        <div class="bz-title">{{Information.systemName}}</div>
        <div class="bz-bolist">
          <div class="title">{{ t(`headerMenu.version.name`) }}</div>
          <div class="desc">{{Information.version}}</div>
        </div>
        <div class="bz-bolist">
          <div class="title">{{ t(`headerMenu.version.support`) }}</div>
          <div class="desc">{{Information.Technical}}</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import Locale from 'element-ui-qz/src/mixins/locale';
import ThemePicker from 'element-ui-qz/examples/components/theme-picker.vue';
import ElBadge from 'element-ui-qz/packages/badge';
import ElButton from 'element-ui-qz/packages/button';
import ElCascader from 'element-ui-qz/packages/cascader';
import Elcol from 'element-ui-qz/packages/col';
import ElDialog from 'element-ui-qz/packages/dialog';
import ElDropdown from 'element-ui-qz/packages/dropdown';
import ElDropdownItem from 'element-ui-qz/packages/dropdown-item';
import ElDropdownMenu from 'element-ui-qz/packages/dropdown-menu';
import ElForm from 'element-ui-qz/packages/form';
import ElFormItem from 'element-ui-qz/packages/form-item';
import ElIcon from 'element-ui-qz/packages/icon';
import ElInput from 'element-ui-qz/packages/input';
import ElRow from 'element-ui-qz/packages/row';
import ElSelect from 'element-ui-qz/packages/select';
import ElSymbolbox from 'element-ui-qz/packages/symbolbox';
import ElTooltip from 'element-ui-qz/packages/tooltip';
import ElMenu from 'element-ui-qz/packages/menu';
import ElSubmenu from 'element-ui-qz/packages/submenu';
import ElMenuItem from 'element-ui-qz/packages/menu-item';
import ElProtalMenu from '../menu/index.vue';
// import keyboard from '../keyBoard/keyboard';
// import '../keyBoard/keyboard.css';
function isvalidPhone(str) {
  const reg = /^1[345789]\d{9}$/;
  return reg.test(str);
}
var validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'));
  } else if (!isvalidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'));
  } else {
    callback();
  }
};
// const _keyboard = keyboard();
export default {
  name: 'ElHeaderMineBz',
  mixins: [Locale],
  components: {
    ThemePicker,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElForm,
    ElInput,
    ElFormItem,
    ElButton,
    ElDialog,
    Elcol,
    ElRow,
    ElIcon,
    ElBadge,
    ElSelect,
    ElCascader,
    ElTooltip,
    ElMenu,
    ElSubmenu,
    ElMenuItem,
    ElProtalMenu
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          baseUrl: 'https://192.168.2.223:23400/',
          btnCodeSetSkin: 'BTN_310682130088',
          JID: localStorage.getItem('__JID__'),
          setSkinUrl: 'ywpz-prj/gzyq/runGzyq',
          setPasswordUrl: 'tu-prj/cu/update/loginpwdbyToken',
          loginOutUrl: 'tu-prj/userLogOut',
          uploadImg: 'sz-prj/filemgr/addBusinessFile',
          Pictureshows: 'sz-prj/filemgr/downloadFile?prn=',
          getUserInfo: 'mhgl-prj/userInfo/search',
          saveModify: 'mhgl-prj/userInfo/modify',
          portal: true,
          symbol: true,
          pwdMsg: '',
          passwordTips: '',
          onlineUserList: [],
          messageForm: '',
          diagStyle: { customClass: 'diag-custom-online-wrapper' }
        };
      }
    }
  },
  computed: {
    cp_onlineUserListProps() {
      const [ first ] = this.data.onlineUserList || [];
      return (Object.keys(first || {})).map(key => {
        return {
          prop: key,
          label: key
        };
      });
    },
    menuDropDown() {
      const { canChPwd, isSingleLogin } = localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')) || {}
      const { theme } = this.getUsers || {}
      let data = [
        { icon: 'el-icon-qz-icongerendangan', label: this.t(`headerMenu.dropDown.personal`), value: 'personal' },
        { icon: 'el-icon-qz-iconxiugaimima', label: this.t(`headerMenu.dropDown.password`), value: 'password' },
        { icon: 'el-icon-qz-iconxiugaizhuti', label: this.t(`headerMenu.dropDown.themes`), value: 'themes' },
        {
          icon: 'el-icon-star-on',
          label: this.t(`headerMenu.dropDown.translate`),
          value: 'translate',
          children: [
            { label: this.t(`headerMenu.dropDown.zhCn`), value: 'zh-CN' },
            { label: this.t(`headerMenu.dropDown.enUs`), value: 'en-US' }
          ]
        },
        { icon: 'el-icon-info', label: this.t(`headerMenu.dropDown.version`), value: 'version' },
        { icon: 'el-icon-qz-icontuichudenglu', label: this.t(`headerMenu.dropDown.signOut`), value: 'signOut' }
      ]
      // 国际化
      if (!this.$store.state.basic_global_sql.get('interLangShow')) {
        data = data.filter(item => item.value !== 'translate')
      }
      // 个人档案
      if (!this.$store.state.basic_global_sql.get('infoSwitch')) {
        data = data.filter(item => item.value !== 'personal')
      }
      // 主题
      if (!theme || !this.$store.state.basic_global_sql.get('themeSwitch')) {
        data = data.filter(item => item.value !== 'themes')
      }
      // 密码
      if (canChPwd !== undefined && !canChPwd) {
        data = data.filter(item => item.value !== 'password')
      }
      // 单点登录(仅显示个人档案)
      if (isSingleLogin !== undefined && isSingleLogin === '1') {
        data = data.filter(item => item.value === 'personal')
      }
      return data || []
    },
  },
  data() {
    const skin = localStorage.getItem('skin');
    const userInfo = localStorage.getItem('userInfo');
    const myUserinfo = localStorage.getItem('myUserinfo');
    const configs = localStorage.getItem('__config__');
    return {
      onlineVisible: false,
      infoWarring: false,
      centerDialogVisible1: false,
      warringInfoPageNo: 1,
      warringInfoBtnUrl: '',
      warringInfo: {
        warringInfoNum: 0,
        infoList: []
      },
      headerBg: skin && skin.includes('green') ? '#0A3464' : '#4C85FF',
      isCollapse: true,
      dialogFormVisible: false /* 修改资料 */,
      changPassVisible: false /* 修改密码 */,
      leftMenuList: [],
      value: '',
      searchShow: false,
      skinBox: [
        {
          css: 'blueSkin',
          skinName: this.t(`headerMenu.themes.blue`),
          show: false,
          img: require('../img/blueSkin.png')
        },
        {
          css: 'diabloSkin',
          skinName: this.t(`headerMenu.themes.diablo`),
          show: false,
          img: require('../img/diabloSkin.png')
        },
        {
          css: 'greenSkin',
          skinName: this.t(`headerMenu.themes.green`),
          show: false,
          img: require('../img/greenSkin.png')
        },
        {
          css: 'balackGreen',
          skinName: this.t(`headerMenu.themes.balackGreen`),
          show: true,
          img: require('../img/balackGreen.png')
        },
        {
          css: 'blueSkin ks-cssvar-theme',
          skinName: this.t(`headerMenu.themes.customColor`),
          show: true,
          img: require('../img/blueSkin.png')
        }
      ],
      centerDialogVisible: false,
      formDataRules: {
        passWord: [{ required: true, trigger: 'blur', message: this.t(`headerMenu.password.enterPwd`) }],
        newPassword: [{ required: true, trigger: 'blur', message: this.t(`headerMenu.password.enterNewPwd`) }],
        checkPw: [{ required: true, trigger: 'blur', message: this.t(`headerMenu.password.checkPwdEmpty`) }]
      },
      formDataMy: {
        work_phone: [
          { required: true, trigger: 'blur', validator: validPhone } // 这里需要用到全局变量
        ]
      },
      isPwDiffer: false,
      updateUser_formData: {
        username: userInfo ? JSON.parse(userInfo)['env$user_name'] : 'admin',
        passWord: '',
        newPassword: '',
        checkPw: ''
      },
      userInfo: userInfo ? JSON.parse(userInfo) : '',
      getUsers: myUserinfo ? JSON.parse(myUserinfo) : '',
      keyboardOpen: false,
      warringInfoUrl: 'mhgl-prj/login/searchNavigateMsg',
      warringNumUrl: 'mhgl-prj/login/searchUnreadNavigateMsgCount',
      readAllWarringInfo: 'mhgl-prj/login/readAllNavigateMsg',
      timer: null,
      prjSearch: '',
      prjSearchUrl: '/mhgl-prj/login/searchTestProdCount',
      prjSearchloading: false,
      prjSearchList: [],
      changTheme: false,
      setThemeUrl: 'mhgl-prj/userInfo/modifyLeftMenuColor',
      accept: '.jpg,.jpeg,.png',
      online: {},
      wsInstance: null,
      bzVisible: false,
      dialogInfoWarringStyle: true,
      positionbottom: false,
      iconmassage: true,
      Information: window.configs ? window.configs.versionInfo : {},
	  pwdMsg:''
      // Information:configs ? JSON.parse(JSON.parse(configs).versionInfo): {}
    };
  },
  created() {
    if (!this.getUsers) {
      this.getUser();
    } else {
      if (this.getUsers.messageinfo && this.getUsers.messageinfo == true) {
        if (this.data.messageForm && this.data.messageForm == '1') {
          this.warringInfoPageNo = 0;
        }
        this.getWarringInfoNum();
      }
    }
    this.initOnline();
  },
  watch: {
    'data.messageForm': {
      handler: function handler(val, oldVal) {
        this.warringInfoPageNo = 0;
      }
    }
  },
  mounted() {
    const $symbolbox = document.getElementById('symbolbox');
    if (!$symbolbox) {
      this.$symbolbox = this.$symbolbox || ElSymbolbox;
      this.$symbolbox(this.data.baseUrl);
    }

  },
  methods: {
    openOnlineVisible() {
      if (`${this.online.value}`.indexOf('0') === 0) {
        return;
      }
      this.$emit('get-online-user-list');
      this.onlineVisible = true;
    },
    initOnline() {
      const self = this;
      this.$http.get(`${this.data.baseUrl}ks-prj/compApi/headerComp/onlineUser`, {
        params: {
          JID: this.data.JID
        }
      }, {
        emulateJSON: true
      }).then((response) => {
        const data = response.data;
        this.online = data.obj || {};
        //
        const { update = {} } = this.online;
        if (update.protocol === 'websocket') {
          let url = `${self.data.baseUrl}ks-prj/websocket/connect/${update.channleName}?JID=${self.data.JID}`;
          url = url.replace('https://', 'wss://');
          url = url.replace('http://', 'ws://');
          // websocket
          const ws = new WebSocket(self.syncUrl ? self.syncUrl(url) : url);
          ws.onopen = function(evt) {
            console.log('ws-----open', evt);
            // ws.send('text');
            self.wsInstance = ws;
          };
          ws.onmessage = function(evt) {
            console.log('ws-----message', evt);
            if (evt.data) {
              self.$set(self.online, 'value', evt.data);
            }
            // ws.close();
          };
          ws.onclose = function(evt) {
            console.log('ws-----close', evt);
          };
          ws.onerror = function(evt) {
            console.log('ws-----error', evt);
          };
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    rulesError(item, event) {
      // console.log(event, event.target.parentNode)
      let className = event.target.className;
      // console.log(className)
      if (className.includes('el-form-item__error')) {
        this.$refs.updateUserRef.clearValidate(item);
        // 自动聚焦
        let el = null;
        let path = event.path[1];
        el =
          path.getElementsByTagName('textarea')[0] ||
          path.getElementsByTagName('input')[0];

        el && el.focus();
      }
    },
    rulesError2(item, event) {
      // console.log(event, event.target.parentNode)
      let className = event.target.className;
      // console.log(className)
      if (className.includes('el-form-item__error')) {
        this.$refs.ruleForm.clearValidate(item);
        // 自动聚焦
        let el = null;
        let path = event.path[1];
        el =
          path.getElementsByTagName('textarea')[0] ||
          path.getElementsByTagName('input')[0];

        el && el.focus();
      }
    },
    prjSearchInput(val) {
      if (this.prjSearch === '') {
        this.prjSearchList = [];
        return;
      }
      this.prjSearchloading = true;
      let param = {};
      param.userPrn = this.userInfo.env$user_prn;
      param.str = this.prjSearch;
      this.$http
        .post(this.data.baseUrl + this.prjSearchUrl, param, {
          emulateJSON: true
        })
        .then((res) => {
          this.prjSearchloading = false;
          this.prjSearchList = res.data.obj ? res.data.obj : [];
        });
    },
    getWarringInfoNum() {
      if (this.data.messageForm && this.data.messageForm == '1') {
        // 来自快研
        this.getWarringInfo(-1);
        this.timer && clearTimeout(this.timer);
        if (!this.infoWarring) return;
        this.timer = setTimeout(() => {
          this.getWarringInfoNum();
        }, 6000);
        return;
      }
      let param = {};
      param.userPrn = this.userInfo.env$user_prn;
      param.jid = this.data.JID;
      this.$http
        .post(this.data.baseUrl + this.warringNumUrl, param, {
          emulateJSON: true
        })
        .then((res) => {
          if (!res || !res.data || !res.data.obj) return;
          this.warringInfo.warringInfoNum = res.data.obj.unReadNum;
          this.warringInfoBtnUrl = res.data.obj.msgUrl;
            if(this.$store.state.basic_global_sql.get('ringMsgShowType') !== '0'){
          if (this.warringInfo.warringInfoNum > 0) {
            if (this.infoWarring == false) {
              this.referrence2();
            }
          }
            }
          this.timer && clearTimeout(this.timer);
         if (this.infoWarring) return;
          this.timer = setTimeout(()=> {
            this.getWarringInfoNum();
          }, 6000)
         }).catch(function (e) {
        if (this.infoWarring) return;
        this.timer = setTimeout(function () {
          this.getWarringInfoNum();
        }, 6000);
        });
    },
    getWarringInfo(type) {
      // messageForm:0来自业务，1来自快研
      let url = this.warringInfoUrl,param = {
        userPrn: this.userInfo.env$user_prn,
        pageNo: this.warringInfoPageNo,
        pageSize: 10
      };
      // 快研
      if (this.data.messageForm && this.data.messageForm == '1') {
        param = {
          logic_code: 'logic_code$1142894289400',
          sourceDataJsonStr: JSON.stringify({
            lgObj: {
              pageNum: this.warringInfoPageNo,
              pageSize: 10
            }
          })
        };
        url = 'ks-prj/logicOpt/doOpt';
      }
      this.$http
        .post(this.data.baseUrl + url, param, {
          emulateJSON: true
          // headers: {
          //     JID: this.data.JID
          // }
        })
        .then((res) => {
          if (!res.body.status) {
            this.$message.error(res.body.error[0]);
            return;
          }
            if (this.$store.state.basic_global_sql.get('ringMsgShowType') == 0) {
           // this.infoWarring = false;
          }
          // 获取铃铛ringMsgShowType消息显示方式（true）显示(默认显示)
          if (this.$store.state.basic_global_sql.get('ringMsgShowType') == 1) {
            this.dialogInfoWarringStyle = false;
          }
          if (this.$store.state.basic_global_sql.get('ringMsgShowType') == 2) {
            this.positionbottom = true;
          }
          if (this.$store.state.basic_global_sql.get('ringMsgShowType') == 3) {
            this.iconmassage = false;
          }
          this.warringInfo.warringInfoNum = res.data.obj.warringInfoNum;
          //   自动弹窗
          if (type == -1) {
            if (this.$store.state.basic_global_sql.get('ringMsgShowType') && this.$store.state.basic_global_sql.get('ringMsgShowType') != '0') {
              if (res.data.obj.list.length > 0) {
                this.warringInfo.infoList = res.data.obj.list;
                if (!this.infoWarring) {
                  this.infoWarring = true;
                }
              }
            }
            return;
          }
		  if(type == 2){
        if (!this.infoWarring) {
                  this.infoWarring = true;
                }
		        }
          this.warringInfo.infoList = this.warringInfo.infoList.concat(res.data.obj.list || []);
        });
    },
    referrence() {
      this.$http
        .get(`${this.data.baseUrl}mhgl-prj/login/getMsgUrl`, null)
        .then((res) => {
          // 广西站内信变更--链接跳转到消息页面(只针对来自业务)
          if (this.data.messageForm == 1) {
            this.$message.error(this.t(`headerMenu.noSupport`));
            return;
          }
          if (!res.body.status || !res.body.obj) {
            this.$message.error(this.t(`headerMenu.getFail`) + res.body.error[0]);
            return;
          }
          window.open(res.body.obj);
        })
        .catch((e) => {
          if (e.status == 404) {
            // 其他项目接口不存在这个接口，保留打开消息弹窗
            if (this.infoWarring) return;
            this.warringInfoPageNo = 1;
            if (this.data.messageForm && this.data.messageForm == '1') {
              this.warringInfoPageNo = 0;
            }
			     this.getWarringInfo(2);

          }
        });
    },
    referrence2() {
      this.$http
        .get(`${this.data.baseUrl}mhgl-prj/login/getMsgUrl`, null)
        .then((res) => {
          // 广西站内信变更--链接跳转到消息页面(只针对来自业务)
          if (this.data.messageForm == 1) {
            this.$message.error(this.t(`headerMenu.noSupport`));
            return;
          }
          if (!res.body.status || !res.body.obj) {
            this.$message.error(this.t(`headerMenu.getFail`) + res.body.error[0]);
            return;
          }
          window.open(res.body.obj);
        })
        .catch((e) => {
          if (e.status == 404) {
            this.getWarringInfo();
          }
        });
    },
    clearList() {
      // 清空消息
      this.warringInfo.infoList = [];
    },
    infoWarringPopShow() {
      var infoWarringScroll = document.getElementsByClassName('infoWarringScroll')[0];
      infoWarringScroll.scrollTop = 0;
      window.addEventListener('scroll', infoWarringScroll, true);
      infoWarringScroll.onscroll = () => {
        var scrollTop = infoWarringScroll.scrollTop;
        var scrollHeight = infoWarringScroll.scrollHeight;
        var scrollClientHeight = infoWarringScroll.clientHeight;
        if (scrollTop + scrollClientHeight >= scrollHeight) {
          this.warringInfoPageNo++;
          this.getWarringInfo();
        }
      };
    },
    clearWarringInfo() {
      let param = { userPrn: this.userInfo.env$user_prn }, url = this.readAllWarringInfo;
      if (this.data.messageForm && this.data.messageForm == '1') {
        param = {
          logic_code: 'logic_code$1161063486576',
          sourceDataJsonStr: JSON.stringify({
            lgObj: {
              updateName: this.userInfo.env$login_na
            }
          })
        };
        url = 'ks-prj/logicOpt/doOpt';
      }
      this.$http
        .post(
          this.data.baseUrl + url,
          param,
          { emulateJSON: true }
        )
        .then((res) => {
          if (res.data.obj === 'successful' || res.data.obj == true) {
            this.warringInfo = {
              warringInfoNum: 0,
              infoList: []
            };
          }
        });
    },
    getUser() {
      if (this.userInfo) {
        let parmas = {};
        parmas.prn = this.userInfo.env$user_prn;
        this.$http
          .post(this.data.baseUrl + this.data.getUserInfo, parmas, {
            emulateJSON: true
          })
          .then((res) => {
            const getUsers = res.data.obj;
            localStorage.setItem('myUserinfo', JSON.stringify(getUsers));
            this.getUsers = getUsers;
            if (getUsers.messageinfo) {
              if (this.getUsers.messageinfo && this.getUsers.messageinfo == true) {
                if (this.data.messageForm && this.data.messageForm == '1') {
                  this.warringInfoPageNo = 0;
                  this.getWarringInfoNum();
                }
              }
              this.getWarringInfoNum();
            }
            if (getUsers.homePageIcon && getUsers.homePageIcon != '' && getUsers.homePageIcon != null) {
              var link = document.createElement('link');// 先获取link标签对象
              link.rel = 'shortcut icon';// 设置rel类型
              link.href = getUsers.homePageIcon;// 设置href链接
              document.head.appendChild(link);// 输出修改
            }
          });
      }
    },
    handleSelect(key, keyPath){
      const that = this
      switch(keyPath[1]) {
      case 'personal':
        that.dialogFormVisible = true;
        break
      case 'password':
        const pwdFn = (msg) => {
          this.pwdMsg = msg || '';
          that.changPassVisible = true;
        };

        let getUrl = 'tu-prj/cu/update/loginpwdCompose';
        if (this.$store.state.basic_global_sql.get('versionSelectorSwitch')) {
          getUrl = 'ks-prj/cu/update/loginpwdCompose';
        }

        this.$http.get(`${this.data.baseUrl}${getUrl}`, {
          params: {
            JID: this.data.JID
          }
        }).then((response) => {
          pwdFn(response.data.obj);
        }).catch(() => {
          pwdFn();
        });
        break
      case 'themes':
        let skin = localStorage.getItem('skin');
        for (let v of that.skinBox) {
          if (v.css === skin) {
            v.show = true;
          } else {
            v.show = false;
          }
        }
        that.centerDialogVisible = true;
        break
      case 'version':
        that.bzVisible = true;
        break
      case 'translate':
        localStorage.setItem('qzLang', key)
        that.$emit('translate', key)
        break
      case 'signOut':
        that.$confirm(this.t(`confirm.message.logOut`), this.t(`confirm.title`), {
          confirmButtonText: this.t(`toolbar.confirm`),
          cancelButtonText: this.t(`toolbar.cancel`),
          type: 'warning'
        }).then(() => {
          that.loginOut();
        }).catch(() => {});
        break
      }
    },
    searchClick() {
      this.searchShow = true;
    },
    loginOut() {
      if (this.$store.state.basic_global_sql.get('versionSelectorSwitch')) {
        this.data.loginOutUrl = 'ks-prj/userLogOut';
      }
      const topWindow = this.$topWindow || window.top
      this.$http
        .post(
          this.data.baseUrl + this.data.loginOutUrl,
          { JID: this.data.JID },
          { emulateJSON: true }
        )
        .then((res) => {
          if (res.data.code !== -1) {
            // _keyboard.close();
            // localStorage.clear();

            let ZloginInfo = localStorage.getItem('yhLoginInfo') || null;
            let CloginInfo = ZloginInfo && JSON.parse(JSON.stringify(ZloginInfo));
            localStorage.clear();
            ZloginInfo && localStorage.setItem('yhLoginInfo', CloginInfo);

            // window.top.location.href = `${window.configs.api.url}:${window.configs.api.port}`;
            // location.href = res.data.redirectUrl;
            topWindow.location.href =
              res.data.redirectUrl ||
              `${window.configs.api.url}:${window.configs.api.port}`;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    selectSkin(val) {
      this.skinBox.forEach((v) => {
        if (v.css === val.css) {
          v.show = true;
        } else {
          v.show = false;
        }
      });
    },
    setSkin() {
      this.centerDialogVisible = false;
      this.skinBox.forEach((v) => {
        if (v.show) {
          this.$http
            .post(
              this.data.baseUrl + this.setThemeUrl,
              {
                menuColor: v.css
              },
              { emulateJSON: true }
            )
            .then((res) => {
              if (!res.data.status) {
                this.$message.error(res.data.errors[0]);
              } else {
                localStorage.setItem('skin', v.css);
                this.$emit('skinSelect', v.css);
              }
            });
        }
      });
    },
    checkPW() {
      let pw = this.updateUser_formData.checkPw;
      let oldPw = this.updateUser_formData.newPassword;
      if (pw) {
        this.isPwDiffer = pw != oldPw;
      } else {
        this.isPwDiffer = false;
      }
    },
    setPw() {
      if (!this.isPwDiffer) {
        this.$refs.updateUserRef.validate((valid) => {
          if (!valid) return;
          if (this.$store.state.basic_global_sql.get('versionSelectorSwitch')) {
            this.data.setPasswordUrl = 'ks-prj/cu/update/loginpwdbyToken';
          }
          this.$http
            .post(
              this.data.baseUrl + this.data.setPasswordUrl,
              Object.assign({
                plainOldPassword: this.updateUser_formData.passWord,
                plainNewPassword: this.updateUser_formData.newPassword,
                JID: this.data.JID
              }),
              { emulateJSON: true }
            )
            .then((res) => {
              if (res.data.resultCode === 'FAIL') {
                this.$message.error(res.data.errors[0]);
              } else {
                if (this.changPassVisible) {
                  // 关闭弹窗
                  this.changPassVisible = false;
                  this.$message.success(this.t(`headerMenu.password.editSuccess`));
                  localStorage.clear();
                } else {
                  this.loginOut();
                }
              }
            });
        });
      }
    },
    powerSwitch(status) {
      // status ? _keyboard.open() : _keyboard.close();
    },
    keyboardBtn() {
      this.keyboardOpen = !this.keyboardOpen;
      if (this.keyboardOpen) {
        this.$symbolbox.open();
      } else {
        this.$symbolbox.close();
      }
      // this.powerSwitch(this.keyboardOpen);
    },
    shouye() {
      if (localStorage.getItem('homeUrl')) {
        let path = localStorage.getItem('homeUrl');
        this.$router.push({ path: path });
      }
    },
    shouLink() {
      if (this.getUsers && this.getUsers.dapingUrl && this.getUsers.dapingUrl != '') {
        const linkUrl = this.getUsers.dapingUrl;
        window.open(linkUrl, '_blank');
      } else {
        if (localStorage.getItem('homeUrl')) {
          let path = localStorage.getItem('homeUrl');
          this.$router.push({ path: path });
        }
      }
    },
    ImgUpLoad(e) {
      let file = e.target.files[0];
      let fileName = file.name.lastIndexOf('.');
      let fileType = file.name.substr(fileName);
      let accept = this.accept.split(',');
      if (!accept.includes(fileType.toLowerCase())) {
        this.$message.error(this.t(`message.uploadAccept`));
        return;
      }
      let formData = new FormData();
      formData.append('file', file);
      formData.append('bus_type', 'report_user_signature');
      this.$http
        .post(this.data.baseUrl + this.data.uploadImg, formData, {
          emulateJSON: true
        })
        .then((res) => {
          if (res.data.status === true) {
            this.getUsers.avatar_icon_uri = res.data.obj.prn;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    saveFfrom() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let parmas = {};
          parmas.work_phone = this.getUsers.work_phone;
          parmas.pic = this.getUsers.avatar_icon_uri;
          parmas.prn = this.userInfo.env$user_prn;
          this.$http
            .post(this.data.baseUrl + this.data.saveModify, parmas, {
              emulateJSON: true
            })
            .then((res) => {
              if (res.data.status === true) {
                this.$message.success(this.t(`headerMenu.personal.editSuccess`));
                this.getUser();
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.data.msg);
              }
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goDetail(listT,index,vv){
      if(vv.menu_id && vv.search_param && vv.search_val){
        // 任务22146 站内信消息提醒，增加跳转的方式
        const url = `#/${vv.menu_id}?column=${vv.search_param}&value=${vv.search_val}&open=${vv.open_details=='Dk_true'}`
        switch (vv.open_current) {
          case "Dk_true":
            location.hash = url;
            break;
          case "Dk_pop":
            window.open(`${location.origin}${location.pathname}${url}`, 'newwindow',`left=0,top=0,width=${screen.availWidth},height=${screen.availHeight}`);
            break;
          default:
            window.open(`${location.origin}${location.pathname}${url}`, '_blank');
            break;
        }
        return
      }
      if(listT && listT.length>0 && listT[index] && listT[index].opt_result){
        let obj = JSON.parse(listT[index].opt_result);
        if(obj.paramConfigMap && obj.paramConfigMap.content){
          let menuObj = JSON.parse(obj.paramConfigMap.content)
          if(menuObj && menuObj[0]){
            const url_ = `#/${menuObj[0].ksmenu}?column=${menuObj[0].ktable}&value=${menuObj[0].dataid}&open=${menuObj[0].details=='Dk_true'}`;
            switch (menuObj[0].currenta) {
              case "Dk_true":
              location.hash = url_;
                break;
              case "Dk_pop":
              window.open(`${location.origin}${location.pathname}${url_}`, 'newwindow',`left=0,top=0,width=${screen.availWidth},height=${screen.availHeight}`);
                break;
              default:
              window.open(`${location.origin}${location.pathname}${url_}`, '_blank');
                break;
            }
          }
        }
      }
    }
  },
  beforeDestroy() {
    this.$symbolbox.close();
    this.$symbolbox.destroy();
    this.timer && clearTimeout(this.timer);
    this.wsInstance && this.wsInstance.close();
  }
};
</script>

<style lang="scss">
a {
  color: #409EFF !important;
}

.itemSearchTable .el-table__body-wrapper {
  overflow-x: hidden !important;
}

.itemSearchInput {
  margin-right: 16px;
  width: 227px;

  .el-input__inner {
    height: 30px !important;
  }

  .el-input__icon {
    line-height: 30px !important;
  }
}

.infoWarring {
  display: inline;
  position: relative;
  top: -2px;

  i {
    font-size: 19px;
    color: #999;
  }

  .el-badge__content {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }

  .el-badge__content.is-fixed {
    position: absolute;
    top: 0;
    right: 10px;
    transform: translateY(-50%) translateX(100%);
  }
}

i.el-icon-qz-iconxiaoxi:hover {
  cursor: pointer;
  color: #1a90fd;
}

.infoWarringPop2 {
  margin: 0;
  right: 10px;
  bottom: 10px;
  position: fixed;
}

.infoWarringPop1 {
  margin-top: 48px !important;
  margin-right: 0;
}

.infoWarringPop {

  //   margin-top: 48px !important;
  //   margin-right: 0;
  .ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .clearfix {
    zoom: 1;
  }

  .clearfix:after {
    content: "";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 6px 0;

    .el-dialog__headerbtn {
      top: 7px;
      right: 13px;
    }
  }

  .el-dialog__body {
    padding: 0 12px;
    padding-bottom: 12px;
  }

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #dcdfe6;
    position: relative;

    p {
      left: 0;
      top: -12px;
      transform: translateY(-50%);
      padding: 0 4px;
      font-size: 12px;
      color: #8c8c8c;
      position: absolute;
      background-color: #fff;
    }
  }

  .infoWarringScroll {
    padding-left: 0;
    margin-top: 20px;
    max-height: 435px;
    overflow: auto;

    li {
      list-style: none;
    }
  }

  .infoRow {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .colInfo {
    p {
      margin: 0;
    }

    span {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &>span {
      margin-left: 23px;
    }
  }

  .expandDiv {
    position: relative;
    padding: 8px;
    margin-top: 6px;
    border-radius: 5px;
    background: #f7f7f7;
    color: #8c8c8c;

    p {
      margin: 0;
    }
  }

  .triangle {
    position: absolute;
    top: -5px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #f7f7f7;
  }
}

.header-mine-new {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.08);
  z-index: 200;

  .headerContent {
    height: 48px;
    padding-left: 24px;
    padding-right: 32px;
    display: -webkit-flex;
    /* 新版本语法: Chrome 21+ */
    display: flex;
    /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;
    /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;
    /* 混合版本语法: IE 10 */
    display: flex;
    align-items: center;

    .headerContentCenter {
      flex: 1;
      overflow: auto;
      height: 100%;
    }

    .headerContentLeft {
      max-width: 300px;

      .leftImg {
        display: inline-block;
        max-width: 100%;
        height: 48px;
        cursor: pointer;
      }
    }

    .headerContenRight {
      display: -webkit-flex;
      /* 新版本语法: Chrome 21+ */
      display: flex;
      /* 新版本语法: Opera 12.1, Firefox 22+ */
      display: -webkit-box;
      /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box;
      /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox;
      /* 混合版本语法: IE 10 */
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .rigcontent {
        display: -webkit-flex;
        /* 新版本语法: Chrome 21+ */
        display: flex;
        /* 新版本语法: Opera 12.1, Firefox 22+ */
        display: -webkit-box;
        /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;
        /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;
        /* 混合版本语法: IE 10 */
        display: flex;
        align-items: center;
        padding-left: 24px;
        border-left: 1px solid #e6e6e6;

        .rigHeaderImg {
          display: inline-block;
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        .textPro {
          margin-left: 8px;
          margin-right: 15px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 22px;
          color: #333333;
        }
      }

      .rigcontent2 {
        position: relative;
        padding-right: 28px;

        .elfont {
          font-size: 19px;
          margin-left: 32px;
          color: #999999;

          &:hover {
            color: #1a90fd;
            cursor: pointer;
          }
        }
      }

      .online {
        display: inline-block;
        margin-right: 28px;

        a {
          color: #f56c6c;
          cursor: pointer;
          // &:hover {
          //   text-decoration: underline;
          // }
        }
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 16px;
}

.el-dropdown-content {
  .el-dropdown-menu__item {
    line-height: 42px;
  }

  .dropIcon {
    margin-right: 8px;
    font-size: 13px;
    color: #979797;
  }
}

.formIParents {
  text-align: center;
  margin-bottom: 26px;

  .formIMgContent {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    border-radius: 50%;
    overflow: hidden;

    .dImage {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .dtext {
      position: absolute;
      bottom: 0;
      text-align: center;
      height: 20px;
      line-height: 20px;
      background: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      width: 100%;
      font-size: 14px;
    }

    .inputFile {
      position: absolute;
      display: block;
      width: 80px;
      height: 80px;
      top: 0px;
      left: 0px;
      opacity: 0;
      z-index: 200;
    }
  }

  .title {
    height: 28px;
    line-height: 28px;
  }
}

.header-main-dialog {
  .diLogFrom {
    .el-form-item {
      height: 32px;
      margin-bottom: 12px;

      .el-form-item__label {
        font-size: 14px;
        font-weight: 400;
        color: #8c8c8c;
      }

      .el-form-item__content {
        .el-input {
          .el-input__inner {
            height: 28px;
            width: 160px;
            line-height: 28px;
          }
        }
      }
    }
  }

  .el-dialog__header {
    height: 55px;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0;
    padding: 0 16px;
    line-height: 55px;
    font-size: 14px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }

  .el-dialog__headerbtn {
    top: 16px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    width: 20px;
    height: 20px;

    .el-icon {
      font-size: 12px;
      position: absolute;
      top: 50%;
      margin-top: -6px;
      left: 50%;
      margin-left: -6px;
      /*   border-radius:50%; */
      /*  border:1px solid #DCDCDC; */
    }
  }

  .el-dialog__body {
    padding: 39px 57px;
  }

  .footerCont {
    text-align: center;
    margin-top: 10px;

    button {
      width: 72px;
      height: 32px;
      padding: 0;
    }
  }
}

.el-dialog {
  width: 600px;

  .el-dialog__footer {
    .btncommon {
      width: 72px !important;
      height: 32px !important;
      padding: 0;
    }
  }
}

.RigInput {
  input {
    height: 32px;
    line-height: 32px;
  }

  .el-input__suffix {
    .el-input__suffix-inner {
      font-size: 16px;
      color: #999;

      .el-input__icon {
        line-height: 32px;
      }
    }
  }
}

.header-mine-password {
  .el-dialog__body {
    .el-form-item {
      .form-error-tips {
        &+span {
          color: #f5222d;
          font-size: 14px;
          line-height: normal;
          position: absolute;
          bottom: -17px;
          left: 0;
          z-index: 9;
        }
      }
    }
  }
}

.header-mine-skin {

  /* .el-dialog__header {
		      border-bottom: 2px solid #67bcff;
		  } */
  .el-dialog__body {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;

      li {
        display: inline-block;
        width: 120px;
        margin: 16px;
        box-sizing: border-box;

        .themeCont {
          text-align: center;
          cursor: pointer;

          .themeImgSelect {
            background: rgba(0, 0, 0, 0.3);
          }

          .themeImgContent {
            display: block;
            height: 120px;
            width: 120px;
            position: relative;

            .themeImg {
              display: block;
              height: 120px;
              width: 100%;
            }

            .icon_ok {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);

              .el-icon-success {
                font-size: 20px;
                color: #1a90fd;
              }
            }
          }

          .desc {
            height: 42px;
            line-height: 42px;
            font-size: 14px;
            color: #333333;
          }

          &:hover {
            opacity: 0.5;
          }
        }

        .greenSkin {}

        .diabloSkin {}
      }
    }
  }
}

.keyboard_btn_open {}

.keyboard_btn_close {
  opacity: 1;
  color: #1a90fd !important;
}

.el-message-box {
  .el-message-box__btns {
    .el-button {
      min-width: 66px !important;
      height: 32px !important;
    }
  }
}

.wd288 {
  width: 288px;
}

.el-input.is-disabled .el-input__inner {
  background-color: #f5f5f5;
  color: #595959;
}

.pwdMsg {
  color: red;
  font-size: 12px;
}
</style>

<style scoped lang="scss">
.header-mine-dialog {
  &.header-mine-online {
    .header-mine-online-ul {
      line-height: 38px;
      height: 300px;
      overflow: auto;

      .header-mine-online-ul-li {
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

.bzheader-content {
  .bzheader-img {
    text-align: center;

    .leftImg {
      display: inline-block;
      height: auto;
      width: 208px;
    }
  }

  .bz-title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #333333;
    text-align: center;
    margin-top: 14px;
    margin-bottom: 40px;
    // letter-spacing: 20px;
  }

  .bz-bolist {
    margin-bottom: 16px;

    .title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
    }

    .desc {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
  }
}
</style>
