<template>
    <el-container class="index-con ">
        <div :class="{ 'first-logo': isProEnv, 'flex-sb':true, 'first-logo-test': !isProEnv }">
            <p> </p>
          <el-dropdown class="user-dropdown">
            <span class="el-dropdown-link">
              {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="showEditPwd = true" >修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="exit" >退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
<!--            <div>-->
<!--              <p style="position: absolute;width: 100%; left: 91%; font-size: 22px;">{{username}}</p>-->
<!--              <p style="position: absolute;width: 100%; left: 91%" @click="exit()">-->
<!--                <i class=" el-icon-switch-button" style="color:#000;font-size:28px;cursor: pointer;"></i>-->
<!--              </p>-->
<!--            </div>-->

        </div>

        <el-aside :class="showclass">
            <el-menu :collapse="collapsed" :collapse-transition="true" router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#C72C2C">
                <el-menu-item index="/qualification/jobApplication" route="/qualification/jobApplication">
                    <i class="iconfont li-icon-zhifupeizhi1" style="font-size: 12px;"></i>
                    <span slot="title">任职申请</span>
                </el-menu-item>
                <el-menu-item index="/qualification/studyExam" route="/qualification/studyExam">
                    <i class="iconfont icon-order-manage" style="font-size: 15px;"></i>
                    <span slot="title">学习考试</span>
                </el-menu-item>
                <el-menu-item index="/qualification/professional" route="/qualification/professional">
                  <i class="iconfont li-icon-gongsiguanli" style="font-size: 15px;"></i>
                  <span slot="title">专业回馈</span>
                </el-menu-item>
                <el-menu-item index="/qualification/evidence" route="/qualification/evidence">
                  <i class="el-icon-s-ticket" style="font-size: 15px; margin-right: 0;width: 17px;"></i>
                  <span slot="title">个人行为举证</span>
                </el-menu-item>
                <el-menu-item index="/qualification/appliedList" route="/qualification/appliedList">
                  <i class="iconfont icon-news-manage" style="font-size: 15px;"></i>
                  <span slot="title">已申报任职资格</span>
                </el-menu-item>
                <el-submenu v-if="hasProfessionalMenu" index="1">
                    <template slot="title">
                        <i class="iconfont li-icon-xitongguanli" style="font-size: 15px;"></i>
                        <span>专业回馈管理</span>
                    </template>
                    <el-menu-item index="/management/professionalManagement" route="/management/professionalManagement">专业回馈审核</el-menu-item>
                    <!-- 在这里添加更多的二级菜单项 -->
                </el-submenu>
                <el-submenu v-if="hasSettingMenu" index="2">
                  <template slot="title">
                    <i class="iconfont icon-promotion-manage" style="font-size: 15px;"></i>
                    <span>后台管理</span>
                  </template>
                  <el-menu-item index="/management/qualificationReview" route="/management/qualificationReview">资格审核</el-menu-item>
                  <el-menu-item index="/management/setting" route="/management/setting">信息内置</el-menu-item>
                  <!-- 在这里添加更多的二级菜单项 -->
                </el-submenu>
            </el-menu>
          <div style="position: absolute;bottom: 9%; padding-left: 20px; cursor: pointer;" @click="showPreview =!showPreview">
            <i class="el-icon-collection" style="font-size: 15px; margin-right: 0;width: 17px;"></i>
            <span slot="title">任职资格管理办法</span>
          </div>
        </el-aside>
        <el-container class="main-con">
            <el-main>
                <router-view></router-view>
<!--              <button class="buttonimg" @click="aaa()">aaa</button>-->
              <!--任职资格序列等级新增弹框-->
              <el-dialog v-if="showEditPwd" visible center title="修改密码" top="5vh" width="600px" :show-close="true" :before-close="closeEditPwdDialog" :close-on-click-modal="false">
                <el-form label-width="120px" label-position="left" size="small">
                  <el-row :gutter="35">
                    <el-col :span="20">
                      <el-form-item label="旧密码" :rules="[{required: true, message: '请填写旧密码', trigger: ['blur', 'change']}]">
                        <el-input v-model.trim="editPwdData.password" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="35">
                    <el-col :span="15">
                      <el-form-item label="验证码" :rules="[{required: true, message: '请填写任职资格序列', trigger: ['blur', 'change']}]">
                        <el-input v-model.trim="editPwdData.randomCode" ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="primary" style="width: 90px;" size="small" @click="getCaptcha" :disabled="captchaBtnText === '获取验证码' ? false : true">{{ captchaBtnText }}</el-button>
                    </el-col>
                  </el-row>
                  <el-row :gutter="35">
                    <el-col :span="20">
                      <el-form-item label="新密码" :rules="[{required: true, message: '请填写新密码', trigger: ['blur', 'change']}]">
                        <el-input v-model.trim="editPwdData.newPwd" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="35">
                    <el-col :span="20">
                      <el-form-item label="再次确认密码" :rules="[{required: true, message: '请再次确认密码', trigger: ['blur', 'change']}]">
                        <el-input v-model.trim="editPwdData.confirmPwd" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <span slot="footer">
                <el-button size="small" class="button-md" @click="closeEditPwdDialog" type="primary" plain>取消</el-button>
                <el-button size="small" class="button-md" type="primary" @click="submitEditPwd">确定</el-button>
            </span>
              </el-dialog>

              <!--PDF预览-->
              <el-dialog v-if="showPreview"  visible center title="任职资格管理办法预览" top="5vh" width="600px" :show-close="true" :before-close="closePreviewDialog" :close-on-click-modal="false">
                  <Preview style="height: 500px" @changeTip="changeTip"></Preview>
              </el-dialog>
            </el-main>
        </el-container>
      <div class="footer">
        <p class="footer-text">Copyright©2025 东风汽车集团股份有限公司东风人事共享服务中心</p>

      </div>
    </el-container>
</template>
<script>

import watermark from "watermark-dom";
import {cancelPreview, sendCode, titleName, updatePwd} from "@/api/userMG";
import Preview  from './tools/preview.vue';
export default {
    name: "index",
    provide() {
        return {
            reload: this.reload
        };
    },
    data() {
        return {
            isProEnv: titleName ==='',
            roles:JSON.parse(localStorage.getItem('userdata')).roles,
            username: JSON.parse(localStorage.getItem('userdata')).username,
            hasProfessionalMenu: false,
            hasSettingMenu: false,
            showclass: "asideshow",
            collapsed: false,
            showEditPwd: false,
            showtype: false,
            editPwdData: {
              password: "",
              newPwd: "",
              confirmPwd: "",
              randomCode: ""
            },
            captchaBtnText: "获取验证码",
            websock: null,
            showPreview: true,
            cancelTip: false,
        };
    },
    // 注册组件
    components: {
        // navcon,
        Preview
    },
    mounted() {
      let userData = JSON.parse(localStorage.getItem('userdata'))
    // watermark.load({watermark_txt: userData.username});
  },
    methods: {
        changeTip(val) {
          this.cancelTip = val;
          console.log(val);
        },
        // 退出登录
        exit() {
          console.log("退出登录");
            setTimeout(() => {
                this.$store.commit("logout", "false");
                this.$router.push({ path: "/login" });
                localStorage.clear();
                this.$message({
                    type: "success",
                    message: "已退出登录!"
                });
            }, 1000);
        },
      closeEditPwdDialog(){
        this.showEditPwd = false
      },
      closePreviewDialog(){
        this.showPreview = false
        if(this.cancelTip){
          cancelPreview({}).then(res => {
              localStorage.setItem("showTip", "1");
          })
        }
      },
      submitEditPwd(){
        updatePwd(this.editPwdData).then(res => {
          console.log(res);
          let {code, data, msg} = res;
          if(code == '200'){
            this.$message({
              type: "success",
              message: msg
            });
            this.showEditPwd = false
          }else{
            this.$message({
              type: "error",
              message: msg
            });
          }
        })
      },
      getCaptcha(){
        console.log("获取验证码");
        sendCode({}).then(res => {
          console.log(res);
          let {code, data, msg} = res;
          if(code == '200'){
            this.$message({
              type: "success",
              message: msg
            });
          }else{
            this.$message({
              type: "error",
              message: msg
            });
          }
        })
        //设置60秒倒计时
        let time = 60;
        let timer = setInterval(() => {
          time--;
          this.captchaBtnText = "请"+time + "s后重试";
          if (time <= 0) {
            clearInterval(timer);
            this.editPwdData.captcha = "";
            this.captchaBtnText = "获取验证码";
          }
        }, 1000);
      },
    },
    created() {
        for (let role of this.roles) {
          if (role.userType === "2") {
            this.hasProfessionalMenu = true;
          }
          if (role.userType === "3") {
            this.hasSettingMenu = true;
          }
        }
      this.showPreview = localStorage.getItem('showTip') == "0";
    }
};
</script>
<style>
/* .el-main{} */
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 200px;
}
.first-logo {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  background: url(../assets/logo.png);
  background-repeat: no-repeat;
  padding: 4px 30px;
  position: fixed;
  top: 25px;
  left: 0px;
  font-size: 40px;
  /* font-weight: 600; */
  color: #000;
}
.first-logo-test {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  background: url(../assets/logo_test.png);
  background-repeat: no-repeat;
  padding: 4px 30px;
  position: fixed;
  top: 25px;
  left: 0px;
  font-size: 40px;
  /* font-weight: 600; */
  color: #000;
}

.index-con {
  height: 100%;
  width: 100%;
  padding: 100px 0px 0px;
}

.main-con {
  background: #f5f7fc;
  /* border-top-right-radius: 20px;
  border-bottom-right-radius: 20px; */
  overflow: hidden;
  margin-bottom: 3%;
}

.aside {
  width: 60px !important;
  height: 100%;
  background-color: #fff;
  margin: 0px;
}

.asideshow {
  width: 220px !important;
  height: 93%;
  background-color: #fff;
  margin: 0px;
}

.el-main {
  padding: 0;
}

.index-header,
.index-main {
  padding: 0px;
}

.el-menu {
  /* padding-top: 20px !important; */
  border-right: none !important;
}

.el-dialog__body {
  padding: 10px 20px !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: 0 !important;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #010d24;
}

.el-aside {
  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.12);
  overflow-x: hidden;
}

.buttonimg {
  padding: 10px 20px;
  text-align: right;
}
.user-dropdown{
  font-size: 22px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 5%;
  background: #fff;
  box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.12);
  z-index: 999;
}
.footer-text {
  width: 100%;
  text-align: center;
  padding-top: 14px;
  font-size: 12px;
  color: #999;
}
</style>
