<template>
  <div class="box">
    <div class="content_box">
      <div class="left">
        <div class="loginForm">
          <div class="title">
            <span>欢迎登录</span>
            <span>项目过程管理系统</span>
            <span>WELCOME!</span>
          </div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="user">
              <el-input
                name="user"
                :prefix-icon="User"
                v-model="ruleForm.user"
                placeholder="请输入账号"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="" prop="pass">
              <el-input
                name="password"
                :prefix-icon="Lock"
                show-password
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
                placeholder="请输入登录密码"
              />
            </el-form-item>
            <!-- <el-checkbox
              name="checked"
              v-model="checked"
              class="remeberPwd el-form-item"
              >记住密码</el-checkbox
            > -->
            <el-form-item class="options">
              <el-button
                :loading="loading"
                type="primary"
                color="rgba(59, 140, 241, 1)"
                @click="submitForm(ruleFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="loginform"></div>
    <el-dialog
      class="infoContent"
      v-model="infoContentVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="详情"
      align-center
      width="800"
      :before-close="cancelInfoContent"
    >
      <div class="content">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="infoList.fileTitle"
          placement="top"
          v-if="infoList.fileTitle.length > 16"
        >
          <h2>{{ infoList.fileTitle }}</h2>
        </el-tooltip>
        <h2 v-else>{{ infoList.fileTitle }}</h2>
        <p class="time">{{ infoList.createTime }}</p>
        <div class="info" v-html="infoList.fileContent"></div>
        <div class="upload">
          <span class="title">附件下载 : </span>
          <ul>
            <li v-for="i in infoList.fileUrls">
              <span class="name">{{ pdfName(i) }}</span>
              <span class="download">
                <a :href="i" target="_blank">下载</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { JSEncrypt } from "jsencrypt"; // 加密密码
import adminApi from "@/api/admin.js";
import { useStore } from "vuex";
import axios from "axios";
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const router = useRouter();
const api = ref("");
const roleId = ref();
const store = useStore();

const list = ref([]);
const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const fileTypeData = ref([
  { name: "行业动态", id: 1 },
  { name: "政策文件", id: 2 },
]); // 文件类型
const activeFile = ref(1); // 文件类型id

// 详情弹窗
const infoContentVisible = ref(false);
const infoList = ref();

const loading = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  user: "",
  pass: "",
});
const checked = ref(false); // 记住密码

const rules = reactive({
  user: [{ required: true, message: "请填写账号", trigger: "blur" }],
  pass: [{ required: true, message: "请填写密码", trigger: "blur" }],
});
const getList = async () => {
  let data = {
    currentPage: currentPage.value, // 当前页
    pageCount: pageSize.value, // 一页数据条数
    fileLevel: 1, // 文件等级id
    fileType: 1, // 文件类型id
  };
  console.log(data);
  let res = await axios({
    method: "get",
    url: api.value + "/jgcloudFile/queryHomePageJgcloudFiles",
    headers: {
      tokenP: sessionStorage.getItem("tokenP"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "首页文件分页");
  if (res.data.code == 200) {
    res.data.data.list.forEach((item) => {
      let arr = item.createTime.split("-");
      item.year = arr[0];
      item.month = arr[1] + "-" + arr[2];
    });
    list.value = res.data.data.list;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 配置信息
const info = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/jgcloudSetting/homePageFileDatas",
  });
  console.log(res, "首页文件数据");
  if (res.data.code == 200) {
    fileTypeData.value = res.data.data;
    res.data.data[0].files.forEach((item) => {
      let arr = item.createTime.split("-");
      item.year = arr[0];
      item.month = arr[1] + "-" + arr[2];
    });
    list.value = res.data.data[0].files;
    activeFile.value = res.data.data[0].id;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const handleClick = (pane, ev) => {
  console.log(pane.props.label, ev);
  fileTypeData.value.forEach((item) => {
    if (item.name == pane.props.label) {
      item.files.forEach((item) => {
        let arr = item.createTime.split("-");
        item.year = arr[0];
        item.month = arr[1] + "-" + arr[2];
      });
      list.value = item.files;
    }
  });
};
// cos桶中地址栏中中文地址乱码转换为中文
const pdfName = (value) => {
  let index = decodeURIComponent(value).lastIndexOf("/") + 1;
  let name = decodeURIComponent(value).slice(index, value.length);
  console.log(name);
  return name;
};
// 详情点击
const infoClick = (row) => {
  infoContentVisible.value = true;
  console.log(row);
  infoList.value = row;
};
const cancelInfoContent = () => {
  infoContentVisible.value = false;
};
const submitForm = (formEl) => {
  router.push({
    path: `/process/home`,
  });
  // sessionStorage.setItem("sidevarItem", 1);
  // store.commit("indexUp", 1);
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;

      let data = {
        account: ruleForm.user,
        password: ruleForm.pass,
      };
      let res;
      try {
        res = await store.dispatch("login", data);
      } catch (e) {
        console.log(e);
      }
      console.log(res);
      let menuItem = sessionStorage.getItem("sidevarItem");
      if (res == "success") {
        if (checked.value == true) {
          sessionStorage.setItem("user", ruleForm.user);
          sessionStorage.setItem("pass", ruleForm.pass);
        }
        ElMessage({
          type: "success",
          showClose: true,
          message: "登录成功",
          center: true,
        });
      } else {
        loading.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.data.message,
          center: true,
        });
      }
    } else {
      return false;
    }
  });
};
const Enters = (e) => {
  // console.log("按键:", e.key);
  if (e.key == "Enter") {
    submitForm(ruleFormRef.value);
  }
};
onBeforeMount(() => {
  api.value = store.state.user.api;
  if (sessionStorage.getItem("user") && sessionStorage.getItem("pass")) {
    checked.value = true;
    ruleForm.user = sessionStorage.getItem("user");
    ruleForm.pass = sessionStorage.getItem("pass");
  }

  roleId.value = sessionStorage.getItem("roleId");
  // getList();
  info();
  document.addEventListener("keyup", Enters);
});
onUnmounted(() => {
  document.removeEventListener("keyup", Enters);
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  min-width: 1500px;
  min-height: 800px;
  display: flex;
  align-items: center;
  // justify-content: center;
  background-image: url("../../assets/images/bg.png");
  background-size: cover;
  .content_box {
    width: 50%;
    height: 625px;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
      // box-shadow: 39px 30px 58px 0px rgba(8, 53, 115, 0.55);
      width: 50%;
      min-width: 525px;
      height: 100%;
      background: rgba(239, 246, 255, 1);
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 18.59px 39.36px rgba(23, 57, 222, 0.25);
      border-top: 6px solid rgba(77, 105, 244, 1);
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .loginForm {
        width: 450px;
        // flex: 1;
        height: 520px;
        // background-color: #fff;
        border-radius: 6px;
        .title {
          // margin-top: 15px;
          // margin-bottom: 50px;
          display: flex;
          flex-direction: column;
          span {
            color: rgba(2, 17, 43, 1);
          }
          span:nth-child(1) {
            font-size: 20px;
            font-weight: 700;
          }
          span:nth-child(2) {
            font-size: 39.36px;
            font-weight: 700;
            margin: 0 auto;
            padding: 23px 0 11px;
          }
          span:nth-child(3) {
            font-size: 17.5px;
            font-weight: 400;
            margin: 0 auto;
            padding-bottom: 45px;
          }
        }
        .el-form {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .el-form-item {
            width: 420px;
            height: 60px;
            margin-bottom: 35px;

            :deep(.el-form-item__content) {
              margin-left: 0 !important;

              .el-input {
                height: 60px;

                .el-input__wrapper {
                  border-radius: 6px;
                  // background: rgba(0, 0, 0, 0.1);
                  .el-input__prefix {
                    margin: 0 10px 0 12px;
                    .el-icon {
                      width: 24px;
                      height: 24px;
                      svg {
                        width: 24px;
                        height: 24px;
                        color: rgba(7, 40, 185, 1);
                      }
                    }
                  }
                  .el-icon {
                      width: 24px;
                      height: 24px;
                      svg {
                        width: 24px;
                        height: 24px;
                      }
                    }
                }

                .el-input__inner {
                  height: 100%;
                  font-size: 22px;
                  &::placeholder{
                    color: rgba(7, 40, 185, 0.4);
                  }
                }
              }
              .el-form-item__error {
                font-size: 16px;
              }
              .el-button {
                width: 100%;
                height: 60px;
                font-size: 24px;
              }
            }

            .el-button--primary {
              width: 380px;
            }
          }
          .options {
            margin-top: 10px;
            .el-button {
              border-radius: 6px;
              border: none;
              background: linear-gradient(
                90deg,
                rgba(33, 107, 255, 1) 0%,
                rgba(102, 182, 255, 1) 100%
              );
            }
          }
          .remeberPwd {
            height: 30px;
            margin-bottom: 10px;
            color: #fff;
            :deep(.el-checkbox__input) {
              .el-checkbox__inner {
                width: 18px;
                height: 18px;
              }
              .el-checkbox__inner::after {
                width: 6px;
                height: 12px;
                top: -1px;
              }
            }
            :deep(.el-checkbox__label) {
              font-size: 18px;
              color: #fff;
            }
          }
        }
        .policeNum {
          color: #fff;
          white-space: nowrap;
          transform: translateX(-30px);
        }
      }
    }
  }
  .loginform {
    width: 50%;
    height: 100%;
    background-image: url("../../assets/images/login.png");
    background-size: cover;
  }
}
</style>
