<template>
  <div class="header-mine-new" id="header-mine-new">
    <el-row class="headerContent" v-if="getUsers">
      <el-col :span="4" class="headerContentLeft"><img :src="getUsers.kings_lims" class="leftImg" @click="shouye" /></el-col>
      <el-col :span="20" class="headerContenRight">
        <!-- <div class="RigInput" v-if="searchShow">
					<transition name="fold"><el-input placeholder="请输入内容" 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="请输入待测项目查询" @input="prjSearchInput" suffix-icon="el-icon-search"
            v-model.trim="prjSearch"></el-input>
        </el-popover>

        <div class="rigcontent2">
          <el-badge :hidden="warringInfo.warringInfoNum ? false:true" :max="99" :value="warringInfo.warringInfoNum" class="infoWarring">
            <i @dblclick="referrence1" v-show="getUsers.messageinfo&&getUsers.messageinfo==true" @click="referrence2" class="el-icon-qz-iconxiaoxi"></i>
          </el-badge>
          <el-dialog :visible.sync="infoWarring" width="672" :modal="false" custom-class="infoWarringPop" @open="infoWarringPopShow" @closed="infoWarringPopClose">
            <el-radio-group @change="getList" v-model="tabPosition">
              <el-radio-button label="noRead">未读{{warringInfo.warringInfoNum}}</el-radio-button>
              <el-radio-button label="read">已读{{warringInfo.warringInfoReadNum}}</el-radio-button>
            </el-radio-group>
            <ul class="infoWarringScroll">
              <div v-for="(v,i) in tabPosition === 'read'?warringInfo.infoReadList:warringInfo.infoList" :key="i">
                <li class="clearfix" v-for="(vv,ii) in v.list" :key="ii">
                  <p><span class="ellipse fl" @click="goTarget(vv)" style="max-width:400px;">{{vv.promotion_info[0]}}</span><span class="fr">{{vv.time_str}}</span></p>
                </li>
              </div>
              <li style="text-align: center;" v-if="tabPosition === 'read' && warringInfo.infoReadList.length > 0 && warringReadInfoIsLastPage">~没有更多了~</li>
              <li style="text-align: center;" v-if="tabPosition === 'noRead' && warringInfo.infoList.length > 0 && warringInfoIsLastPage">~没有更多了~</li>
            </ul>
            <p style="text-align: center;">
              <el-button size="small" type="primary" v-if="warringInfoBtnUrl">
                <a style="color: #fff;" target="_blank" :href="warringInfoBtnUrl">我的消息</a>
              </el-button>
              <el-button v-if="tabPosition === 'noRead'" size="small" type="primary" :disabled="warringInfo.infoList.length===0" @click='clearWarringInfo'>全部已读</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"></i>
          <!-- <el-badge :value="12" class="item"><i class="el-icon-qz-iconxiaoxi elfont"></i></!-->
          <i 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="`${data.baseUrl}${data.Pictureshows}${getUsers.avatar_icon_uri}`" 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-dropdown @command="handleCommand">
              <span class="el-dropdown-link"><i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown" class="el-dropdown-content">
                <el-dropdown-item command="a">
                  <i class="el-icon-qz-icongerendangan dropIcon"></i>
                  个人档案
                </el-dropdown-item>
                <el-dropdown-item command="b">
                  <i class="el-icon-qz-iconxiugaimima dropIcon"></i>
                  修改密码
                </el-dropdown-item>
                <!-- <el-dropdown-item command="c">
									<i class="el-icon-qz-iconxiugaizhuti dropIcon"></i>
									更改主题
								</el-dropdown-item> -->
                <el-dropdown-item command="d">
                  <i class="el-icon-qz-icontuichudenglu dropIcon"></i>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 资料修改 -->
    <el-dialog title="我的档案" :visible.sync="dialogFormVisible" class="header-main-dialog" :modal-append-to-body="true" :append-to-body="true">
      <el-form :model="form" label-width="42px" class="diLogFrom">
        <div class="formIParents">
          <div class="formIMgContent">
            <img :src="`${data.baseUrl}${data.Pictureshows}${getUsers.avatar_icon_uri}`" class="dImage" v-if="getUsers.avatar_icon_uri != '' && getUsers.avatar_icon_uri != undefined" />
            <img src="../img/noHeaderImg.png" class="dImage" v-else />
            <input id="fileId1" type="file" name="file" class="inputFile" @change="ImgUpLoad" />
            <div class="dtext">更改</div>
          </div>
          <div class="title">{{ getUsers.user_name }}</div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名">
              <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="性别">
              <el-radio-group v-model="getUsers.sex" disabled>
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司">
              <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="部门">
              <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="职务">
              <el-input v-model="getUsers.duty" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话">
              <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">保存</el-button>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
        </div> -->
    </el-dialog>
    <!-- 皮肤系统 -->
    <el-dialog class="header-mine-dialog header-mine-skin" title="系统皮肤" width="380px" 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">
            {{ item.skinName }}
            <span v-show="item.show" class="icon_ok"><i class="el-icon-circle-check-outline"></i></span>
          </div>
        </li>
      </ul>
      <template slot="footer">
        <el-button size="small" type="primary" @click="setSkin">确 定</el-button>
        <el-button size="small" @click="centerDialogVisible = false">取 消</el-button>
      </template>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog class="header-mine-dialog header-mine-password" title="修改密码" width="600" center :modal-append-to-body="true" :append-to-body="true" :close-on-click-modal="false"
      :visible.sync="changPassVisible">
      <el-form ref="updateUserRef" label-width="150px" :rules="formDataRules" :model="updateUser_formData">
        <el-form-item label="用户名:">
          <el-input :disabled="true" v-model="updateUser_formData.username" class="wd288"></el-input>
        </el-form-item>
        <el-form-item label="当前密码:" prop="passWord">
          <el-input clearable type="password" v-model="updateUser_formData.passWord" placeholder="请输入当前密码" class="wd288"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <el-input type="password" clearable v-model="updateUser_formData.newPassword" placeholder="请输入新密码" class="wd288"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPw">
          <!-- :class="{isRedBorder:isPwDiffer,isGreenBorder:!isPwDiffer}" -->
          <el-input :class="isPwDiffer ? 'form-error-tips' : ''" type="password" clearable v-model="updateUser_formData.checkPw" placeholder="请再次输入新密码" class="wd288"></el-input>
          <span v-if="isPwDiffer">两次密码不一致!</span>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button size="small" @click="changPassVisible = false" class="btncommon">取消</el-button>
        <el-button size="small" type="primary" @click="setPw" class="btncommon">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
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 Elcol from 'element-ui-qz/packages/col';
import ElDialog from 'element-ui-qz/packages/dialog';
import {
  default as ElDropdown,
  default as ElDropDown
} from 'element-ui-qz/packages/dropdown';
import {
  default as ElDropdownItem,
  default as 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 keyboard from '../keyBoard/keyboard';
// import '../keyBoard/keyboard.css';
import logo from '../../../examples/assets/images/logo.png';

// const _keyboard = keyboard();
export default {
  name: 'ElHeaderMineNew1',
  components: {
    ThemePicker,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElForm,
    ElInput,
    ElFormItem,
    ElButton,
    ElDialog,
    Elcol,
    ElRow,
    ElDropDown,
    ElDropDownItem,
    ElIcon,
    ElBadge,
    ElSelect
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          baseUrl: 'https://192.168.2.215:20300/',
          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'
        };
      }
    }
  },
  data() {
    const skin = localStorage.getItem('skin');
    const userInfo = localStorage.getItem('userInfo');
    const myUserinfo = localStorage.getItem('myUserinfo');
    return {
      tabPosition: 'noRead',
      infoWarring: false,
      centerDialogVisible1: false,
      warringInfoPageNo: 1,
      warringReadInfoPageNo: 1,
      warringInfoBtnUrl: '',
      warringInfo: {
        warringInfoNum: 0,
        infoList: [],
        warringInfoReadNum: 0,
        infoReadList: []
      },
      warringInfoIsLastPage: false,
      warringReadInfoIsLastPage: false,
      headerBg: skin && skin.includes('green') ? '#0A3464' : '#4C85FF',
      isCollapse: true,
      dialogFormVisible: false /* 修改资料 */,
      changPassVisible: false /* 修改密码 */,
      leftMenuList: [],
      value: '',
      searchShow: false,
      skinBox: [
        {
          css: 'blueSkin',
          skinName: '经典蓝',
          show: false
        },
        {
          css: 'greenSkin',
          skinName: '经典绿',
          show: false
        }
      ],
      centerDialogVisible: false,
      formDataRules: {
        passWord: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        newPassword: [
          { required: true, trigger: 'blur', message: '请输入新密码' }
        ],
        checkPw: [
          { required: true, trigger: 'blur', message: '确认密码不能为空' }
        ]
      },
      updateUser_formData: {
        username: userInfo ? JSON.parse(userInfo)['env$user_name'] : 'admin',
        passWord: '',
        newPassword: '',
        checkPw: ''
      },
      userInfo: userInfo ? JSON.parse(userInfo) : '',
      getUsers: myUserinfo ? JSON.parse(myUserinfo) : '',
      logo: logo,
      keyboardOpen: false,
      warringInfoUrl: 'mhgl-prj/login/searchNavigateMsg',
      warringReadInfoUrl: 'mhgl-prj/login/searchReadNavigateMsg',
      warringNumUrl: 'mhgl-prj/login/searchUnreadNavigateMsgCount',
      warringReadNumUrl: 'mhgl-prj/login/searchReadNavigateMsgCount',
      readAllWarringInfo: 'mhgl-prj/login/readAllNavigateMsg',
      readOneWarringInfo: 'mhgl-prj/login/readNavigateMsg',
      timer: null,
      timer1: null,
      timer2: null,
      prjSearch: '',
      prjSearchUrl: '/mhgl-prj/login/searchTestProdCount',
      prjSearchloading: false,
      prjSearchList: []
    };
  },
  created() {
    // this.loginRend();
    if (!this.getUsers) {
      this.getUser();
    }
    this.getWarringInfoNum();
  },
  mounted() {
    this.$symbolbox = this.$symbolbox || ElSymbolbox;
    this.$symbolbox(this.data.baseUrl);
  },
  methods: {
    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() {
      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;
          this.timer && clearTimeout(this.timer);
          if (this.infoWarring) return;
          this.timer = setTimeout(() => {
            this.getWarringInfoNum();
          }, 60000);
        });
    },
    getWarringInfoReadNum() {
      let param = {};
      param.userPrn = this.userInfo.env$user_prn;
      param.jid = this.data.JID;
      this.$http
        .post(this.data.baseUrl + this.warringReadNumUrl, param, {
          emulateJSON: true
        })
        .then(res => {
          if (!res || !res.data || !res.data.obj) return;
          this.warringInfo.warringInfoReadNum = res.data.obj.readNum;
        });
    },
    getWarringInfo(pageNo) {
      if (this.warringInfoIsLastPage) return;
      let param = {};
      param.userPrn = this.userInfo.env$user_prn;
      param.pageNo = pageNo;
      param.pageSize = 10;
      this.$http
        .post(this.data.baseUrl + this.warringInfoUrl, param, {
          emulateJSON: true
        })
        .then(res => {
          if (!res.data.obj.list || !res.data.obj.list.length) {
            res.data.obj.list = [];
          }
          let arr = this.warringInfo.infoList.concat(res.data.obj.list);
          this.warringInfo.infoList = arr;
          this.warringInfo.warringInfoNum = res.data.obj.warringInfoNum;
          this.warringInfoIsLastPage = res.data.isLastPage;
          this.infoWarring = true;
        });
    },
    getWarringReadInfo(pageNo) {
      if (this.warringReadInfoIsLastPage) return;
      let param = {};
      param.userPrn = this.userInfo.env$user_prn;
      param.pageNo = pageNo ? pageNo : this.warringReadInfoPageNo;
      param.pageSize = 10;
      this.$http
        .post(this.data.baseUrl + this.warringReadInfoUrl, param, {
          emulateJSON: true
        })
        .then(res => {
          if (!res.data.obj.list || !res.data.obj.list.length) {
            res.data.obj.list = [];
          }
          let arr = this.warringInfo.infoReadList.concat(res.data.obj.list);
          this.warringInfo.infoReadList = arr;
          this.warringReadInfoIsLastPage = res.data.isLastPage;
        });
    },
    getList(v) {
      if (v === 'noRead') {
        this.warringInfo.infoList = [];
        this.referrence2();
        return;
      }
      this.warringInfo.infoReadList = [];
      this.warringReadInfoPageNo = 1;
      this.warringReadInfoIsLastPage = false;
      this.getWarringReadInfo(1);
    },
    goTarget(v) {
      if (!v.jump_url) return;
      window.open(v.jump_url);
      if (this.tabPosition === 'noRead' && v.id) {
        this.$http
          .post(
            this.data.baseUrl + this.readOneWarringInfo,
            { id: v.id },
            { emulateJSON: true }
          )
          .then(res => {
            if (res.data.obj === 'successful') {
              document.getElementsByClassName(
                'infoWarringScroll'
              )[0].scrollTop = 0;
              this.getWarringInfoNum();
              this.getWarringInfoReadNum();
              this.warringInfo.infoList = [];
              this.referrence2();
            }
          });
      }
    },
    referrence1() {
      clearTimeout(this.timer1);
    },
    referrence2() {
      clearTimeout(this.timer1);
      this.timer1 = setTimeout(() => {
        this.warringInfoIsLastPage = false;
        this.warringInfoPageNo = 1;
        this.getWarringInfo(1);
      }, 250);
    },
    infoWarringPopShow() {
      this.tabPosition = 'noRead';
      this.getWarringInfoReadNum();
      clearTimeout(this.timer2);
      this.timer2 = setTimeout(() => {
        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 &&
            scrollTop + scrollClientHeight >= scrollHeight
          ) {
            if (this.tabPosition === 'noRead') {
              this.getWarringInfo(this.warringInfoPageNo + 1);
              this.warringInfoPageNo++;
              return;
            }
            this.getWarringReadInfo(this.warringReadInfoPageNo + 1);
            this.warringReadInfoPageNo++;
          }
        };
      }, 260);
    },
    infoWarringPopClose() {
      this.getWarringInfoNum();
      this.warringInfo.infoList = [];
    },
    clearWarringInfo() {
      this.$http
        .post(
          this.data.baseUrl + this.readAllWarringInfo,
          { userPrn: this.userInfo.env$user_prn },
          { emulateJSON: true }
        )
        .then(res => {
          if (res.data.obj === 'successful') {
            this.warringInfo = {
              warringInfoNum: 0,
              infoList: []
            };
            this.warringInfoIsLastPage = false;
            this.getWarringInfoReadNum();
          }
        });
    },
    loginRend() {
      let parmas = {};
      parmas.username = 'admin';
      parmas.password = 'admin2020';
      this.$http
        .post('https://cdqrqz.f3322.net:30100/tu-prj/userLoginJson', parmas, {
          emulateJSON: true
        })
        .then(res => {
          localStorage.setItem(
            'userInfo',
            JSON.stringify(res.data.data.TU_ENV)
          );
          localStorage.setItem('__JID__', res.data.data.JID);
          this.JID = res.data.data.JID;
        });
    },
    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;
          });
      }
    },
    handleCommand(command) {
      let that = this;
      if (command === 'a') {
        that.dialogFormVisible = true;
      } else if (command === 'd') {
        that
          .$confirm('您将退出系统,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            that.loginOut();
          })
          .catch(() => {});
      } else if (command === 'c') {
        that.centerDialogVisible = true;
      } else if (command === 'b') {
        that.changPassVisible = true;
      }
    },
    searchClick() {
      this.searchShow = true;
    },
    loginOut() {
      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.setItem('userInfo', '');
            localStorage.setItem('myUserinfo', '');
            localStorage.setItem('__JID__', '');
            location.href = res.data.redirectUrl;
          } 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) {
          const userInfo = localStorage.getItem('userInfo');
          const jsonDataStr = {
            login_name: userInfo ? JSON.parse(userInfo)['env$login_na'] : '',
            skin_code: v.css
          };
          this.$http
            .post(
              this.data.baseUrl + this.data.setSkinUrl,
              {
                jsonDataStr: JSON.stringify(jsonDataStr),
                btnCode: this.data.btnCodeSetSkin
              },
              { 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);
                // this.headerBg = v.css && v.css.includes('green') ? '#0A3464' : '#4C85FF';
              }
            });
        }
      });
    },
    setPw() {
      if (!this.isPwDiffer) {
        this.$refs.updateUserRef.validate(valid => {
          if (!valid) return;
          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('修改密码成功,请重新登录');
                  localStorage.setItem('userInfo', '');
                  localStorage.setItem('__JID__', '');
                } 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 (this.getUsers.url_homepage !== '') {
        location.href = this.getUsers.url_homepage;
      }
    },
    ImgUpLoad(e) {
      let formData = new FormData();
      formData.append('file', e.target.files[0]);
      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() {
      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.getUser();
            this.dialogFormVisible = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    }
  },
  beforeDestroy() {
    this.$symbolbox.close();
    this.$symbolbox.destroy();
    this.timer && clearTimeout(this.timer);
    this.timer1 && clearTimeout(this.timer1);
    this.timer2 && clearTimeout(this.timer2);
  }
};
</script>

<style lang="scss">
.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;
}
.infoWarringPop {
  margin-top: 48px !important;
  margin-right: 0;
  button[aria-label='Special'] {
    display: none !important;
  }
  .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;
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 28px;
      border: 1px solid #dcdcdc;
      margin: 13px 15px;
      text-align: center;
      &:hover {
        background: #fe3e3b;
        border-color: #fe3e3b;
        i {
          color: #fff;
        }
      }
    }
  }
  .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;
    max-height: 310px;
    overflow: auto;
    li {
      list-style: none;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 4px;
      p {
        margin: 14px 0;
      }
      p:hover {
        color: #409eff;
      }
      p > span.fl {
        cursor: pointer;
      }
    }
  }
  .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;
    .headerContentLeft {
      .leftImg {
        display: inline-block;
        width: auto;
        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;
          }
        }
      }
    }
  }
}

.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-skin {
  /* .el-dialog__header {
		      border-bottom: 2px solid #67bcff;
		  } */
  .el-dialog__body {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        display: inline-block;
        padding: 8px;
        width: 50%;
        box-sizing: border-box;
        div {
          background-color: #67bcff;
          color: #fff;
          height: 100px;
          line-height: 100px;
          text-align: center;
          position: relative;
          cursor: pointer;
          .icon_ok {
            position: absolute;
            top: -34px;
            right: 5px;
            .el-icon-circle-check-outline {
              font-size: 20px;
            }
          }
          &:hover {
            opacity: 0.5;
          }
        }
        .greenSkin {
          background-color: #2dcf49;
        }
      }
    }
  }
}
.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;
}
.infoWarringPop .el-radio-button .el-radio-button__inner {
  border-radius: 4px;
}
.el-dialog.infoWarringPop .el-dialog__header {
  height: unset;
  padding: 6px 0;
  border-bottom: unset;
}
.el-dialog.infoWarringPop .el-dialog__body {
  padding: 12px;
  padding-top: 0;
}
.el-radio-button:last-child .el-radio-button__inner {
  margin-left: 10px;
}
.el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
}
</style>
