<template>
  <div>
    <div class="layout-header-wrap  flex-row">
      <div class="layou-header-left-box flex-row align-items-center" style="width: 300px;">
        <div class="flex-row">
          <img src="../../../assets/image/header-logo1.png" height="30" alt="">
          <span class="f20 color-fff ml-8">金桥云调</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <span class="f20 color-fff ">互联网人民调解</span>

      </div>
      <div class="layou-header-left-box flex-row align-items-center">
        <SideMenu/>
      </div>

      <div class="flex-row align-items-center">
        <!-- <el-badge :value="1" :max="99" class="item">
            <el-avatar size="medium" icon="el-icon-user-solid"></el-avatar>
        </el-badge> -->
        <div class="mr-16 cursor-pointer flex-row-center align-items-center" @mouseover="showInfo=true">
          <el-avatar size="medium" :src="userInfo.headUrl?userInfo.headUrl:defaultHeadUrl" ></el-avatar>
          <span class="f16 color-fff ml-16">{{ userInfo.realName || userInfo.showName || '-' }}</span>
        </div>
        <div class="cursor-pointer border-radius-8 p-8-16" style="background-color:#00000010 ;">
          <el-dropdown @command="handleCommand">
            <div class="flex-row align-items-center">
              <img :src="require(`@/assets/image/${agentStatus}.png`)" alt="" class="mr-8">
              <span class="el-dropdown-link" style="color: white;">
                {{agentStatusName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="free">
                空闲
              </el-dropdown-item>
              <el-dropdown-item command="busy">
                忙碌
              </el-dropdown-item>
              <el-dropdown-item command="arrange">
                话后整理
              </el-dropdown-item>
              <el-dropdown-item command="notReady">
                示忙
              </el-dropdown-item>
              <el-dropdown-item command="rest">
                小休
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- <div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer">
          <div class="f16 color-text-regular">坐席状态</div>
          <div class="f16 color-text-secondary">
            <el-dropdown @click="handleClick">
              <span class="el-dropdown-link">
                {{agentStatusName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="free">空闲</el-dropdown-item>
                <el-dropdown-item command="busy">忙碌</el-dropdown-item>
                <el-dropdown-item command="arrange">话后整理</el-dropdown-item>
                <el-dropdown-item command="notReady">示忙</el-dropdown-item>
                <el-dropdown-item command="rest">小休</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div> -->
      </div>


    </div>

    <div v-show="showInfo">
      <el-collapse-transition>
        <div class="show-info-wrap border-radius-8" @mouseleave="showInfo=false">
          <div class="flex-row align-items-center show-info-header">
            <el-avatar :size="56" :src="userInfo.headUrl?userInfo.headUrl:defaultHeadUrl"></el-avatar>
            <div class="ml-8 f14">
              <div class="f18 color-text-primary pb-8">{{ userInfo.realName || userInfo.showName || '-' }}</div>
              <div class="f14 color-text-regular">{{ userInfo.phone || '-' }}</div>
            </div>
          </div>
          <div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer"
               @click="handleChangePassword">
            <div class="f16 color-text-regular">密码管理</div>
            <div class="f16 color-text-secondary">修改密码<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer"
               @click="handleChangePersonal">
            <div class="f16 color-text-regular">个人信息</div>
            <div class="f16 color-text-secondary">查看信息<i class="el-icon-arrow-right"></i></div>
          </div>
          
          <div class="border-t-solid-lighter-1 p-16 f16 color-1960F4 text-center cursor-pointer"
               @click="handleLoginOut()">退出登录
          </div>
        </div>
      </el-collapse-transition>
    </div>


    <!-- 修改密码弹框 -->
    <el-dialog
        title="修改密码"
        :visible="changePasswordVisible"
        width="30%"
        :before-close="handleClose"
    >
      <div class="p-16">
        <el-form ref="ruleForm"
                 :model="passwordInfo"
                 :rules="rulesClient"
                 label-width="80px"
                 class="demo-ruleForm">
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="旧密码" prop="oldPwd">
                <el-input
                    v-model.trim="passwordInfo.oldPwd"
                    placeholder="请输入旧密码"
                    clearable
                    maxlength="18"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="新密码" prop="pwd">
                <el-input
                    v-model.trim="passwordInfo.pwd"
                    placeholder="请输入新密码"
                    clearable
                    maxlength="18"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="确认密码" prop="confirmPwd">
                <el-input
                    v-model.trim="passwordInfo.confirmPwd"
                    placeholder="请再次输入新密码"
                    clearable
                    maxlength="18"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit()">确 定</el-button>
                </span>
    </el-dialog>
    <!-- 个人信息 -->
    <el-dialog
        title="个人信息"
        :visible="changePersonalVisible"
        width="30%"
        :before-close="handleClose"
    >
      <div class="p-16">
        <el-form ref="ruleForm"
                 :model="PersonalInfo"
                 :rules="rulesClient"
                 label-width="80px"
                 class="demo-ruleForm">
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="姓名">
                <el-input
                    v-model.trim="PersonalInfo.realName"
                    disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="证件号码">
                <el-input
                    v-model.trim="PersonalInfo.pwd"
                    disabled
                    maxlength="18"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="手机号码">
                <el-input
                    v-model.trim="PersonalInfo.phone"
                    placeholder="请输入手机号码"
                    clearable
                    maxlength="11"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="24">
              <el-form-item label="回呼电话">
                <el-input
                    v-model.trim="PersonalInfo.replyPhone"
                    placeholder="请输入回呼电话"
                    clearable
                    maxlength="11"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="8">
              <el-form-item v-if="PersonalInfo.signPic !=''" label="个人签名">
                <img :src="signUrl" width="125px" height="125px"/>
                <span class="cursor-pointer color-86909C"><i class="el-icon-refresh"></i> 重新签名</span>
              </el-form-item>
              <el-form-item v-else label="个人签名">
                <img :src="signUrl" width="125px" height="125px"/>
              </el-form-item>
            </el-col>
            <el-col v-if="PersonalInfo.signPic ==''" :span="16" class="line-height-10 color-86909C">
              请使用微信扫码，完成签字及刷脸认证！
              <p>注：请保证个人信息中的姓名及身份证号信息是本人的真实信息。</p>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handlePersonalSubmit()">确 定</el-button>
                </span>
    </el-dialog>

  </div>

</template>
<script>
import api from "@/services/systemManage";

export default {
  components: {
    SideMenu: () => import('./SideMenu'),
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordInfo.confirmPwd !== '') {
          this.$refs.ruleForm.validateField('confirmPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordInfo.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      showInfo: false,
      changePasswordVisible: false,
      changePersonalVisible: false,
      strKey: 'trydotec',
      passwordInfo: {
        oldPwd: '',//旧密码
        pwd: '',//新密码
        confirmPwd: '',//再次
      },
      PersonalInfo: {
        realName: '',
        phone: '',
        id: '',
        signPic: '',
        replyPhone: '',
        cardNo: '',
        roleIds: []
      },
      signUrl: '',
      rulesClient: {
        oldPwd: [
          {required: true, message: '请输入旧密码', trigger: 'change',},
        ],
        pwd: [
          {required: true, validator: validatePass, trigger: 'change',},
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{6,18}$/,
            message: '只能输入由6-18个字母、数字、下划线组成的密码',
            trigger: ['blur', 'change']
          }
        ],
        confirmPwd: [
          {required: true, validator: validatePass2, trigger: 'change',},
        ],
      },
      userInfo: {},
      defaultHeadUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片

      agentStatus: 'free',
      agentStatusName: '空闲',
    }
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem('userInfo'))) {
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    }
    // console.log('获取当前登录人的信息',this.userInfo)
    // console.log(this.userInfo.showName)
  },
  methods: {
    // 个人信息
    handleChangePersonal() {
      api.getUserById({id: this.userInfo.id}).then(res => {
        this.PersonalInfo.id = res.id
        this.PersonalInfo.realName = res.realName
        // this.PersonalInfo.realName = res.realName
        this.PersonalInfo.phone = res.phone
        this.PersonalInfo.signPic = res.signPic
        this.PersonalInfo.replyPhone = res.replyPhone
        this.PersonalInfo.cardNo = res.cardNo

        this.PersonalInfo.deptId = res.deptId
        this.PersonalInfo.roleIds = res.roleIds
      })
      api.getQrCode().then(res => {
        this.signUrl = 'data:image/jpg;base64,' + res
      })

      this.changePersonalVisible = true
      this.showInfo = false
    },
    handlePersonalSubmit() {
      api.updateUserById(this.PersonalInfo).then(res => {
        this.$message.success("修改成功")
        this.handleClose()
      })
    },

    // 修改密码
    handleChangePassword() {
      this.changePasswordVisible = true
      this.showInfo = false
      for (let key in this.passwordInfo) {
        this.passwordInfo[key] = ''
      }
    },
    // 确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          // let data = {
          //     id:this.userInfo.id,
          //     ...this.passwordInfo
          // }

          let data = {
            id: this.userInfo.id,
            oldPwd: this.$util.encryptByDES(this.strKey, this.passwordInfo.oldPwd),
            pwd: this.passwordInfo.pwd,
            confirmPwd: this.passwordInfo.confirmPwd,
          }

          console.log('修改密码数据===', data)
          this.$fetchApi.updatePassword(data).then(res => {
            this.$message.success("修改成功")
            this.handleClose()
          })
        }
      })


    },
    handleCommand(command) {
      console.log(command)
      this.agentStatus = command
      if (command === 'free') {
        this.agentStatusName = '空闲'
      } else if (command === 'busy') {
        this.agentStatusName = '忙碌'
      } else if (command === 'arrange') {
        this.agentStatusName = '话后整理'
      } else if (command === 'notReady') {
        this.agentStatusName = '示忙'
      } else if (command === 'rest') {
        this.agentStatusName = '小休'
      }
    },
    // 关闭
    handleClose() {
      this.changePasswordVisible = false
      this.changePersonalVisible = false
    },
    // 退出登录
    handleLoginOut() {
      // token注销失效
      this.$fetchApi.logout().then(res => {
        // if(!res.code){
        this.$router.push('/login')
        sessionStorage.removeItem('token');
        this.$store.commit('setToken', '');
        sessionStorage.removeItem('userInfo')
        this.$store.commit('setUserInfo', '');
        this.$store.commit('setRoutes', '');
        sessionStorage.removeItem('brokerEndpoint');
        this.$store.commit('brokerEndpoint', '');
        // }

      })
    },
  }
}
</script>
<style lang="scss">
.layout-header-wrap {
  width: 100%;
  height: $height56;
  display: flex;
  padding: 0 $size24;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  // background: url('~@/assets/image/header-bg-1920.png') no-repeat ;
  background-size: cover;
  background-color: #C66A5B;

  .el-badge__content {
    height: $height20;
    line-height: $height20;
    border: 0 !important;
    top: 30px;
  }

  .layou-header-right-box {
    width: 300px;
    display: inline-block;
    text-align: right;
  }

  .layout-side-menu-wrap .side-menu-container {
    border-right: 0;
  }

  .el-menu {
    border: 0;
    background-color: transparent;
  }

  .el-menu--horizontal > .el-menu-item {
    color: #FFFFFFB2;
  }

  .el-menu--horizontal > .el-submenu .el-submenu__title {
    color: #FFFFFFB2;
  }

  .el-menu--horizontal > .el-menu-item:hover {
    color: #C66A5B;
    background-color: transparent;
    color: #fff;
  }

  .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
    color: #C66A5B;
    background-color: transparent;
    color: #fff;
  }

  .el-submenu__title i {
    color: #FFFFFFB2;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid #fff;
    background-color: transparent;
    color: #fff;
  }

  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom: 2px solid #fff;
    background-color: transparent;
    color: #fff;
  }

}

.el-menu--horizontal .el-menu.el-menu--popup .el-menu-item:not(.is-disabled):hover {
  color: #C66A5B;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #C66A5B;
}

.layout-header-number {
  position: absolute;
  right: -10px;
  bottom: -4px;
  min-width: $height20;
  height: $height20;
  border-radius: 50%;
  background-color: $color-F56C6C;
  color: $color-white;
  line-height: $height20;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 1px 5px;
}

.show-info-wrap {
  position: absolute;
  width: 320px;
  // height: 248px;
  background-color: $color-white;
  top: 8px;
  right: 16px;
  border: 1px solid $border-color-lighter;
  z-index: 999;
  box-shadow: 2px 2px 5px $border-color-lighter;
  transition: opacity 2s;

  .show-info-header {
    padding: 40px 16px;
  }
}

// 修改图标样式
.el-icon-caret-bottom {
  font-size: 30px;
  color: $color-text-placeholder;
  cursor: pointer;
}

/* 在小于或等于 1440 像素的屏幕上 */
@media screen and (max-width: 1440px) {
  .layout-header-wrap {
    background: url('~@/assets/image/header-bg-1440.png') no-repeat;
    background-size: cover;
  }
}

</style>