<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    background-color=""
    text-color="#000"
    active-text-color="#4392f7"
    @select="handleSelect"
  >
    <!-- <el-icon
      :size="20"
      v-show="!menuclose"
      class="fold"
      @click="SpreadMenu(true)"
      ><Fold
    /></el-icon>
    <el-icon
      :size="20"
      v-show="menuclose"
      class="fold"
      @click="SpreadMenu(false)"
      ><Expand
    /></el-icon> -->

    <div class="logo">
      <!-- <img src="@/assets/nanchang.png" style="width: 30px; height: 30px" /> -->
      <span>项目过程管理系统</span>
    </div>
    <div class="login">
      <span class="dateTime">{{ dateTime }}</span>
      <!-- <el-badge :value="titlenumber" class="item" v-if="titlenumber">
        <img
          src="@/assets/news.png"
          @click="newsClick"
          style="width: 20px; height: 20px; cursor: pointer"
          alt=""
        />
      </el-badge> -->

      <!-- <div class="flex flex-wrap items-center" style="cursor: pointer">
        <el-dropdown :hide-on-click="false" trigger="click">
          <el-avatar :size="20">
            <el-icon :size="20" color=""><QuestionFilled /></el-icon>
          </el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="operateClick">
                <el-icon class="switchButton" :size="20" color="#000">
                  <img
                    src="@/assets/operate.png"
                    style="width: 20px; height: 20px"
                    alt=""
                  />
                </el-icon>

                <span>操作说明</span>
              </el-dropdown-item>
              <el-dropdown-item @click="contactClick">
                <el-icon class="switchButton" :size="20" color="#000">
                  <img
                    src="@/assets/contact.png"
                    style="width: 20px; height: 20px"
                    alt=""
                  />
                </el-icon>
                <span>联系我们</span>
              </el-dropdown-item>
              <el-dialog
                :append-to-body="true"
                custom-class="pw"
                v-model="uppasswordShow"
                title="修改密码"
                width="500"
                :before-close="uppasswordClose"
                align-center
                :close-on-click-modal="false"
              >
                <el-form
                  ref="ruleFormRef"
                  :model="ruleForm"
                  :rules="rules"
                  label-width="100px"
                  class="demo-ruleForm"
                  :size="formSize"
                  label-position="left"
                  status-icon
                >
                  <el-form-item label="原密码" prop="oldpass">
                    <el-input
                      v-model="ruleForm.oldpass"
                      placeholder="请输入原密码"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="新密码" prop="nowpass">
                    <el-input
                      v-model="ruleForm.nowpass"
                      placeholder="请输入新密码"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="确定新密码" prop="correctpass">
                    <el-input
                      v-model="ruleForm.correctpass"
                      placeholder="请再次输入新密码"
                      clearable
                    />
                  </el-form-item>
                  <p
                    style="
                      padding-bottom: 20px;
                      font-size: 12px;
                      color: rgb(43, 151, 252);
                      border-bottom: 1px solid rgba(230, 230, 230, 1);
                    "
                  >
                    注：密码格式为8-20位正确密码（大小写字母·字符·数字）
                  </p>
                  <el-form-item class="options">
                    <el-button class="queding" @click="submitForm(ruleFormRef)">
                      确定
                    </el-button>
                    <el-button class="congzhi" @click="resetForm(ruleFormRef)"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-dialog>

              <el-dialog
                class="operate"
                v-model="operateShow"
                title="操作说明"
                width="500"
                :before-close="operateClose"
                align-center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
              >
                <div class="operateUl">
                  <p>
                    <span @click="lookFile(0)">建设单位_操作说明</span>
                    <span @click="downFile(0)">下载</span>
                  </p>
                  <p>
                    <span @click="lookFile(1)">县(区)管理员_操作说明</span
                    ><span @click="downFile(1)">下载</span>
                  </p>
                  <p>
                    <span @click="lookFile(2)">市级管理员_操作说明</span>
                    <span @click="downFile(2)">下载</span>
                  </p>
                  <p>
                    <span @click="lookFile(3)">省级管理员_操作说明</span>
                    <span @click="downFile(3)">下载</span>
                  </p>
                </div>

                <div class="options">
                  <el-button class="queding" @click="operateClose">
                    关闭
                  </el-button>
                </div>
              </el-dialog>

              <el-dialog
                class="operate"
                v-model="contactShow"
                title="联系我们"
                width="500"
                :before-close="contactClose"
                align-center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
              >
                <div class="operateUl">
                  <div style="margin: 15px 0">
                    <span>联系人：</span>
                    <span>邱工</span>
                  </div>
                  <div>
                    <span>联系电话：</span
                    ><span>0791-88514176 &nbsp;&nbsp; 18896551060</span>
                  </div>
                </div>
                <div class="options">
                  <el-button class="queding" @click="contactClose">
                    关闭
                  </el-button>
                </div>
              </el-dialog>

              <el-dialog
                class="preview"
                v-model="previewShow"
                title="预览文档"
                width="1200"
                :before-close="previewClose"
                align-center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
              >
                <div class="pre" v-loading="previewLoading">
                  <vue-office-docx
                    v-if="lookDocx"
                    :src="lookDocx"
                    @rendered="renderedHandler"
                    @error="errorHandler"
                  />
                </div>
              </el-dialog>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div> -->
      
      <!-- <div class="flex flex-wrap items-center" style="cursor: pointer">
        <el-dropdown :hide-on-click="false" trigger="click">
          <el-avatar :size="30">
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="uppassword">
                <el-icon class="switchButton" :size="20" color="#000">
                  <Lock />
                </el-icon>
                <span>修改密码</span>
              </el-dropdown-item>
              <el-dialog
                :append-to-body="true"
                custom-class="pw"
                v-model="uppasswordShow"
                title="修改密码"
                width="500"
                :before-close="uppasswordClose"
                align-center
                :close-on-click-modal="false"
              >
                <el-form
                  ref="ruleFormRef"
                  :model="ruleForm"
                  :rules="rules"
                  label-width="100px"
                  class="demo-ruleForm"
                  :size="formSize"
                  label-position="left"
                  status-icon
                >
                  <el-form-item label="原密码" prop="oldpass">
                    <el-input
                      v-model="ruleForm.oldpass"
                      placeholder="请输入原密码"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="新密码" prop="nowpass">
                    <el-input
                      v-model="ruleForm.nowpass"
                      placeholder="请输入新密码"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="确定新密码" prop="correctpass">
                    <el-input
                      v-model="ruleForm.correctpass"
                      placeholder="请再次输入新密码"
                      clearable
                    />
                  </el-form-item>
                  <p
                    style="
                      padding-bottom: 20px;
                      font-size: 12px;
                      color: rgb(43, 151, 252);
                      border-bottom: 1px solid rgba(230, 230, 230, 1);
                    "
                  >
                    注：密码格式为8-20位正确密码（大小写字母·字符·数字）
                  </p>
                  <el-form-item class="options">
                    <el-button class="queding" @click="submitForm(ruleFormRef)">
                      确定
                    </el-button>
                    <el-button class="congzhi" @click="resetForm(ruleFormRef)"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-dialog>
              <el-dropdown-item @click="loginOut">
                <el-icon class="switchButton" :size="20" color="#000">
                  <SwitchButton />
                </el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div> -->
      <!-- <span class="name">{{ username }}</span> -->
    </div>
  </el-menu>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { dayjs } from "element-plus";
import axios from "axios";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";

const api = ref();
const store = useStore();
const router = useRouter();
const username = ref(); // 账号名称
const activeIndex = ref(); // 路由路径
const loginOutDialogVisible = ref(false); // 退出按钮
const menuclose = ref(false); // 左边状态栏展开按钮状态
const uppasswordShow = ref(false); // 修改密码展示框
const ruleForm = reactive({
  oldpass: "",
  nowpass: "",
  correctpass: "",
});
const ruleFormRef = ref();
// 表单验证
// 确定密码验证
// const validatePass = (rule, value, callback) => {
//   if (
//     !/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/.test(
//       value
//     )
//   ) {
//     callback(new Error("请输入8-20位正确密码（大小写字母·字符·数字）"));
//   } else if (ruleForm.nowpass != ruleForm.correctpass) {
//     callback(new Error("输入的两次密码不一致"));
//   } else {
//     callback();
//   }
// };
const rules = reactive({
  oldpass: [
    {
      required: true,
      message: "原密码不能为空",
      trigger: "blur",
    },
  ],
  nowpass: [
    {
      required: true,
      message: "新密码不能为空",
      trigger: "blur",
    },
    // {
    //   min: 8,
    //   max: 20,
    //   pattern:
    //     /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/,
    //   message: "请输入8-20位正确密码（大小写字母·字符·数字）",
    //   trigger: "blur",
    // },
  ],
  correctpass: [
    {
      required: true,
      message: "确认密码不能为空",
      trigger: "blur",
    },
    // { validator: validatePass, trigger: "blur" },
  ],
});

// 操作说明
const operateShow = ref(false);
const operateList = ref();
const lookDocx = ref(); // 预览的这个文件

// 预览文档
const previewShow = ref(false);
const previewLoading = ref(false);

// 联系我们
const contactShow = ref(false);

// 监控消息通知数量
// watch(
//   () => store.state.user.activeIndex,
//   (newValue, oldValue) => {
//     titlenumber.value = newValue;
//     console.log(newValue, "路由地址");
//   }
// );

const dateTime = ref(
  dayjs().format("YYYY-MM-DD") + ` 星期四 ` + dayjs().format("HH:mm:ss")
); // 时间

// 选择菜单
// const handleSelect = (key, keyPath) => {
// store.commit("navbarUpdata", key);
// activeIndex.value = key;
// };

// 展开按钮
const SpreadMenu = (flag) => {
  store.commit("menuClose", flag);
  menuclose.value = flag;
};

// 修改密码
const uppassword = () => {
  uppasswordShow.value = true;
};
const uppasswordClose = () => {
  uppasswordShow.value = false;
  ruleFormRef.value.resetFields();
};
// 提交修改密码表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        oldPassword: ruleForm.oldpass,
        newPassword: ruleForm.nowpass,
        confirmPassword: ruleForm.correctpass,
      };
      let resUpdata = await axios({
        method: "post",
        url: api.value + "/login/ChangePassword",
        headers: {
          tokenP: sessionStorage.getItem("tokenP"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      if (resUpdata.data.code == 200) {
        ElMessage({
          type: "success",
          showClose: true,
          message: resUpdata.data.message,
          center: true,
        });
        sessionStorage.removeItem("tokenP");
        sessionStorage.removeItem("userName");
        sessionStorage.removeItem("tokenP");
        sessionStorage.removeItem("roleId");
        sessionStorage.removeItem("userhead");
        sessionStorage.removeItem("provinceId");
        sessionStorage.removeItem("cityId");
        sessionStorage.removeItem("districtId");
        sessionStorage.removeItem("address");
        sessionStorage.removeItem("addressId");
        uppasswordShow.value = false;
        ruleFormRef.value.resetFields();
        router.removeRoute("jianguanCloud");
        ElNotification({
          type: "warning",
          title: "提示!!!",
          message: "密码已修改,2s后退出到登录页面",
          // duration: 0,
          // position: "top-right",
        });
        setTimeout(() => {
          router.push({ path: "/" });
        }, 2000);
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: resUpdata.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 重置表单
const resetForm = (formEl) => {
  // console.log("重置表单");
  if (!formEl) return;
  formEl.resetFields();
};

// 操作说明
const operateClick = async () => {
  operateShow.value = true;
  let res = await axios({
    method: "get",
    url: api.value + "/login/operatingInstructions",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "操作说明列表");
  if (res.data.code == 200) {
    operateList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const downFile = (flag) => {
  window.location.href = operateList.value[flag].url;
};
const operateClose = () => {
  operateShow.value = false;
};
// 预览文档弹窗
const lookFile = (flag) => {
  let urls="https://jgy-1325577833.cos.ap-guangzhou.myqcloud.com/%E7%9C%81%E7%BA%A7%E7%AE%A1%E7%90%86%E5%91%98_%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.docx"
  // lookDocx.value = urls;
  lookDocx.value = operateList.value[flag].url;
  previewShow.value = true;
  previewLoading.value = true;
};
const previewClose = () => {
  previewShow.value = false;
  lookDocx.value = "";
};
// 预览功能
const renderedHandler = () => {
  console.log("渲染完成");
  previewLoading.value = false;
};
const errorHandler = () => {
  console.log("渲染失败");
  previewLoading.value = false;
  ElMessage({
    type: "error",
    showClose: true,
    message: "预览失败",
    center: true,
  });
};

// 联系我们
const contactClick = () => {
  contactShow.value = true;
};
const contactClose = () => {
  contactShow.value = false;
};
const loginOut = () => {
  ElMessageBox.confirm("是否退出登录?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      sessionStorage.removeItem("tokenP");
      sessionStorage.removeItem("userName");
      sessionStorage.removeItem("tokenP");
      sessionStorage.removeItem("roleId");
      sessionStorage.removeItem("userhead");
      sessionStorage.removeItem("provinceId");
      sessionStorage.removeItem("cityId");
      sessionStorage.removeItem("districtId");
      sessionStorage.removeItem("address");
      sessionStorage.removeItem("addressId");
      router.push({
        path: `/login`,
      });
      router.removeRoute("jianguanCloud");
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消登录",
      });
    });
};

onMounted(() => {
  api.value = store.state.user.api;
  activeIndex.value = store.state.user.navbar;
  username.value = sessionStorage.getItem("userName");
  setInterval(() => {
    var week = ["日", "一", "二", "三", "四", "五", "六"];
    var datas = dayjs().day();
    dateTime.value =
      dayjs().format("YYYY-MM-DD") +
      ` 星期${week[datas]} ` +
      dayjs().format("HH:mm:ss");
  }, 1000);
});
</script>

<style scoped lang="scss">
.el-menu--horizontal {
  border-bottom: none;
  display: flex;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #fff;
  // box-shadow: 5px 5px 10px 0px rgba(213, 228, 252, 1);
  .logo {
    left: 90px;
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
      font-size: 24px;
      font-weight: 600;
    }
  }
  .login {
    color: #000;
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 17px;

    .dateTime {
      margin-right: 20px;
    }
    .el-badge {
      display: flex;
      align-items: center;
      // :deep(.el-badge__content) {
      //   width: 2px;
      //   height: 14px;
      // }
    }
    .items-center {
      margin-left: 20px;
    }
    .name {
      height: 20px;
      line-height: 20px;
      text-decoration: underline;
      padding: 0 10px;
      margin: 0 10px;
      border-left: 2px solid #ccc;
    }
    .link {
      display: flex;
      align-items: center;
    }
    .switchButton {
      cursor: pointer;
    }
  }
  .login:focus {
    outline: none;
  }
  .fold {
    width: 46px;
    height: 65px;
  }
  .fold:hover {
    cursor: pointer;
    background-color: rgba(67, 146, 249, 0.1);
  }
}
.cockpit {
  background-color: #000;
}
.el-dialog__body {
  .options {
    display: flex;
    flex-direction: row-reverse;
    :deep(.el-form-item__content) {
      margin-left: 0 !important;
      flex: none;
    }
    :deep(.queding) {
      background: linear-gradient(
        90deg,
        rgb(38, 151, 255) 0%,
        rgb(102, 181, 255) 100%
      );
      border: none !important;
      color: #fff;
      // border: 0.5px solid rgba(9, 101, 98, 1) !important;
    }
  }
}
// 操作说明
:deep(.operate) {
  //   height: 420px;
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    padding: 0 30px 0 30px;
    .operateUl {
      p {
        width: 220px;
        color: rgba(46, 176, 241, 1);
        display: flex;
        justify-content: space-between;
        span {
          cursor: pointer;
        }
      }
    }
    .options {
      margin: 20px 0;
      display: flex;
      flex-direction: row-reverse;
      .queding {
        margin-left: 20px;
        background: linear-gradient(
          90deg,
          rgba(38, 151, 255, 1) 0%,
          rgba(102, 181, 255, 1) 100%
        );
        border: none;
      }
      .quxiao {
        border: 1px solid rgba(43, 151, 252, 1);
        color: rgba(43, 151, 252, 1);
      }
    }
  }
}
// 预览文档
:deep(.preview) {
  border-radius: 11px;

  .el-dialog__header {
    border-radius: 11px 11px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    margin: 0;

    .el-dialog__headerbtn {
      outline: none;
    }
  }

  .el-dialog__body {
    padding: 20px;
    height: 800px;
    .pre {
      height: 100%;
      .vue-office-docx {
        height: 100%;
        .vue-office-docx-main{
          height: 100%;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-overlay {
  .el-message-box__btns {
    .el-button--primary {
      background: linear-gradient(
        90deg,
        rgb(38, 151, 255) 0%,
        rgb(102, 181, 255) 100%
      );
    }
  }
  .el-overlay-dialog {
    .pw {
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        padding: 30px 20px 10px 20px;
        .el-input {
          width: 200px;
        }
        .options {
          margin-left: 170px;
        }
      }
    }
  }
}
</style>
