<template>
  <div class="admin-user-bar">
    <div class="menu">
      <el-link :underline="true" v-for="item in menu" :key="item.path" @click="changePage(item.path)" :type="item.belong==belong?'primary':'default'">{{ item.label }}</el-link>
      <el-dropdown @command="importPatent">
        <el-link :underline="true" :type="belong == 'conditionImport'?'primary':'default'" class="el-dropdown-link">
          专利检索<i class="el-icon-arrow-down el-icon--right"></i>
          </el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>接口检索</el-dropdown-item>
          <!-- <el-dropdown-item>本地专利检索</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dropdown class="user panel-item" trigger="click" @command="handleCommand">
      <div class="user-avatar">
        <el-avatar :size="30" :src="require('@/assets/user-avatar.jpeg')"></el-avatar>
        <label>{{ userinfo.name }}</label>
        <div class="el-icon--right"><i class="el-icon-arrow-down"></i></div>
      </div>
      <template slot="dropdown">
        <el-dropdown-menu>
          <!-- <el-dropdown-item>
            <el-dropdown @command="handleCommand" trigger="hover" placement="right-start" style="width:100%">
              <span class="el-dropdown-link" >  语言 </span>
              <el-dropdown-menu  class="children_item">
                <el-dropdown-item command="zh"> 中文 </el-dropdown-item>
                <el-dropdown-item command="en"> 英文 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item> -->
          <el-dropdown-item>
            <el-dropdown @command="handleCommand1" trigger="hover" placement="right-start">
              <p class="el-dropdown-link" style="width:100%">  主题 </p>
              <el-dropdown-menu  class="children_item">
                <el-dropdown-item command="#6768ab"> 深紫色 </el-dropdown-item>
                <el-dropdown-item command="#316192"> 深蓝色 </el-dropdown-item>
                <el-dropdown-item command="#879cf3"> 浅紫色 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
          <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
          <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="setStyle">文本样式设置</el-dropdown-item>
          <el-dropdown-item command="indicia">标注库</el-dropdown-item>
          <el-dropdown-item command="clientble">客户管理</el-dropdown-item>
          <el-dropdown-item divided command="doLogout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dialog title="修改密码" :visible.sync="changePwdDialogVisible" width="500px" :append-to-body="true" :close-on-click-modal="false">
      <el-form :model="changePwdRuleForm" :rules="changePwdRules" ref="changePwdRuleForm" v-if="changePwdDialogVisible">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="changePwdRuleForm.oldPassword" type="password" placeholder="输入旧密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="changePwdRuleForm.newPassword" type="password" placeholder="输入新密码" />
        </el-form-item>
        <el-form-item label="再次输入" prop="repeat">
          <el-input v-model="changePwdRuleForm.repeat" type="password" placeholder="再次输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChangePwd" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="个人信息" :visible.sync="userinfoDialogVisible" width="500px" :append-to-body="true" :close-on-click-modal="false">
      <el-form :model="userinfoRuleForm" :rules="userinfoRules" ref="userinfoRuleForm" v-if="userinfoDialogVisible">
        <el-form-item label="用户名" required>
          <el-input v-model="userinfoRuleForm.username" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userinfoRuleForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="userinfoRuleForm.gender" placeholder="请选择" class="width_100">
            <el-option :value="0" label="女"></el-option>
            <el-option :value="1" label="男"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="userinfoRuleForm.email" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="userinfoRuleForm.mobile" placeholder="请输入联系方式" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userinfoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUserinfo" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="1000px" :title="clientTitle" :visible.sync="clientVisible" :before-close="close" :append-to-body="true" :close-on-click-modal="false">
      <div style="height:600px">
        <ClientManage></ClientManage>
      </div>
        
    </el-dialog>
    <Set-Style ref="setStyle"></Set-Style>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SetStyle from "./setStyle.vue";
import ClientManage from '@/views/client/index.vue'
export default {
  components:{
    SetStyle,
    ClientManage
  },
  data() {
    const validateRepeat = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.changePwdRuleForm.newPassword) {
        callback(new Error("两次输入密码不一致"))
      } else {
        callback()
      }
    }
    const isPassword = (rule, value, callback) => {
      if (value) {
          //校验特殊字符 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[`~!#$%^&*()_\-+=<>?:\"{}|,.\/;'\\[\]]).{6,}$
          let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[`~!#$%^&*()_\-+=<>?:\"{}|,.\/;'\\[\]·！@￥……（）——【】、：；‘’“”，。/《》？ ]).{6,}$/
          let re = new RegExp(reg)
          if (re.test(value)) {
            callback()
          } else {
            callback(new Error('密码必须包含大小写字母、数字、特殊字符且长度至少为六位的组合'))
          }
        } else {
          callback(new Error('请输入新密码'))
        }
      };
    return {
      menu:[
        // {
        //   value:'7',
        //   label:'企业专利数据库',
        //   path:'/enterprisePatentDB',
        // },
        {
          value:'5',
          label:'场景可视化',
          path:'/visual',
          belong:'visual'
        },
        {
          value:'3',
          label:'事件',
          path:'/Event',
          belong:'Event'
        },
        {
          value:'1',
          label:'专利数据库',
          path:'/project',
          belong:'project'
        },
        {
          value:'4',
          label:'报告',
          path:'/AllReport',
          belong:'AllReport'
        },
        {
          value:'2',
          label:'产品',
          path:'/product',
          belong:'Product'
        },
        {
          value:'6',
          label:'专利挖掘',
          path:'/patentMining',
          belong:'patentMining'
        },
        {
          value:'8',
          label:'我的任务',
          path:'/myTask',
          belong:'myTask'
        },
      ],
      clientTitle:'',
      clientVisible:false,
      userinfoRuleForm:{},
      userinfoDialogVisible:false,
      changePwdDialogVisible: false,
      btnLoading: false,
      userinfoRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' },],
      },
      changePwdRuleForm: {
        oldPassword: '',
        newPassword: '',
        repeat: '',
      },
      changePwdRules: {
        oldPassword: {
          required: true,
          message: '请输入旧密码'
        },
        newPassword: [{
          required: true,
          validator: isPassword,
          trigger: 'blur',
        }],
        repeat: [{ validator: validateRepeat, trigger: 'blur', required: true }]
      }
    }
  },
  computed: {
    ...mapGetters(['userinfo']),
    belong(){
      return this.$route.meta.belong
    }
  },
  mounted() {
  },
  methods: {
    //关闭客户弹窗
    close() {
      this.clientVisible = false
    },
    //跳转页面
    changePage(path){
      this.$router.push({
        path: path
      })
    },
    //清空密码表单数据
    resetChangePwdRuleForm() {
      this.changePwdRuleForm = {
        oldPassword: '',
        newPassword: '',
        repeat: '',
      }
    },
    //头像处下拉菜单按钮
    handleCommand1(command) {
      localStorage.setItem('theme', command)
      var dom = document.getElementsByTagName('html')[0]
      dom.setAttribute('theme-type',command)
    },
    handleCommand(command) {
      switch (command) {
        case 'zh':
        case 'en':
          this.$i18n.locale = command
          localStorage.setItem('language',command) 
          break;
        case 'doLogout':
          this.$api.adminLogout().then(response => {
            this.$cookie.remove("token")
            this.$router.push({ path: '/login' })
            localStorage.removeItem('vuex')
          })
          break;
        case 'changePwd':
          this.resetChangePwdRuleForm()
          this.changePwdDialogVisible = true
          break;
        case 'setStyle':
          this.$refs.setStyle.open()
          break;
        case 'userinfo':
          this.userinfoRuleForm = {...this.userinfo}
          this.userinfoDialogVisible = true
          break;
        case 'clientble':
          this.clientVisible = true
          this.clientTitle = '客户管理'
          break;
        case 'importPatent':
          this.importPatent()
          break;
        case 'taskList':
          this.toTaskList()
          break;
        case 'indicia':
          this.indicia()
          break;
      }
    },
    // 跳转到标注库
    indicia() {
      const router = this.$router.resolve({
        path: '/indicia',
      })
      window.open(router.href,'_blank')
    },
    //跳转到任务清单
    toTaskList(){
      const router = this.$router.resolve({
        path: '/taskList',
        query: {
          projectId: 0,
        }
      })
      window.open(router.href,'_blank')
    },
    //条件导入即接口导入
    importPatent(){
      this.$router.push({
        path: '/conditionImport',
      })
    },
    //修改个人信息
    submitUserinfo() {
      this.$refs.userinfoRuleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$api.editUser(this.userinfoRuleForm).then(response => {
            this.$message.success('修改成功')
            this.userinfoDialogVisible = false
            this.btnLoading = false
            this.$store.commit('SET_USERINFO', this.userinfoRuleForm)
          }).catch(err => {
            this.btnLoading = false
          })
        }
      })
    },
    //修改密码
    submitChangePwd() {
      this.$refs.changePwdRuleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$api.ChangePassword(this.changePwdRuleForm).then(response => {
            this.$message.success('修改成功')
            this.changePwdDialogVisible = false
            this.btnLoading = false
          }).catch(err => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.menu>*{
  margin-right:20px;
}
</style>
<style lang="scss">
.menu{
  .el-link{
    font-family: var(--fm);
    color: var(--color2);
    font-weight: bold;
  }
  .el-link.el-link--default:hover,.el-link.el-link--primary:hover,.el-link.el-link--primary{
    color:var(--color1)
  }
  .el-link.el-link--default:hover.is-underline::after,.el-link.el-link--primary:hover.is-underline::after{
    position: absolute;
    top: calc(100% + 5px);
    border-bottom: 3px solid var(--color1);
  }
  .el-link.el-link--primary.is-underline::after {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 3px solid var(--color1);
  }
}
.admin-user-bar {
  display: flex;
  align-items: center;
  height: 100%;

  .panel-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .user label {
    color: #fff;
  }

  .panel-item {
    padding: 0 10px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .panel-item i {
    font-size: 16px;
  }

  .panel-item:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .user-avatar {
    height: 49px;
    display: flex;
    align-items: center;
  }

  .user-avatar label {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
    color: #383838;
  }

  .bell-bar {
    margin-right: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    position: relative;
  }
  .bell-bar:hover {
    background-color: rgba(153, 148, 148, 0.35);
  }
  .bell-bar .el-icon-bell {
    font-size: 20px;
    z-index: 20;
  }
  .bell-bar .current-num {
    position: absolute;
    background: red;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 13px;
    text-align: center;
    top: 20px;
    left: 20px;
  }
}
</style>
