<!-- 角色管理 -->
<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="form_content apaas_scroll_nor">
        <el-form ref="refForm" :model="formData" :rules="rules" label-width="96px" class="registerForm">
          <el-form-item label="LOGO" prop="logoUrl">
            <bg-upload-image
              v-model="formData.logoUrl"
              :showTips="true"
              customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KB"
              :fileSize="500"
              :fileSizeUnit="'KB'"
              :limit="1"
              listType="picture-card"
              @change="changeLogo"
              :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
          </el-form-item>
          <el-form-item label="登录背景图" prop="backgroundUrl">
            <bg-upload-image
              v-model="formData.backgroundUrl"
              :fileSize="2"
              :showTips="true"
              customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于2MB"
              :limit="1"
              listType="picture-card"
              @change="changeBanner"
              :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
          </el-form-item>
          <bg-form-gap title="底部所有权内容"></bg-form-gap>
          <el-form-item label="内容" prop="patent">
            <el-input
              v-model.trim="formData.patent"
              placeholder="例如：Copyright © 某某大数据, All Rights Reserved."></el-input>
          </el-form-item>

          <bg-form-gap title="底部ICP备案"></bg-form-gap>
          <el-form-item label="内容" prop="icpFiling">
            <el-input placeholder="请输入" v-model.trim="formData.icpFiling"></el-input>
          </el-form-item>
          <el-form-item label="跳转连接" prop="icpUrl">
            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.icpUrl"></el-input>
          </el-form-item>
          <bg-form-gap title="底部公安网备案"></bg-form-gap>
          <el-form-item label="内容" prop="publicSecurityFiling">
            <el-input placeholder="请输入" v-model.trim="formData.publicSecurityFiling"></el-input>
          </el-form-item>
          <el-form-item label="跳转连接" prop="publicSecurityUrl">
            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.publicSecurityUrl"></el-input>
          </el-form-item>

          <bg-form-gap title="法律声明"></bg-form-gap>
          <el-form-item label="跳转连接" prop="legalStatementUrl">
            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.legalStatementUrl"></el-input>
          </el-form-item>

          <bg-form-gap title="隐私政策"></bg-form-gap>
          <el-form-item label="跳转连接" prop="privacyPolicyUrl">
            <el-input placeholder="例如：https://...或http://..." v-model.trim="formData.privacyPolicyUrl"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="operate_btns">
        <el-button type="primary" @click="save"> 保存 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import { validateLink } from "@/services/rules.js";
import store from "../../../../store";

const refForm = ref(null);

const state = reactive({
  formData: {
    logoUrl: [],
    backgroundUrl: [],
    patent: "",
    icpFiling: "",
    icpUrl: "",
    publicSecurityFiling: "",
    publicSecurityUrl: "",
    legalStatementUrl: "",
    privacyPolicyUrl: "",
  }, //表单数据
  rules: {
    logoUrl: [{ required: true, message: "请上传Logo", trigger: "change" }],
    backgroundUrl: [{ required: true, message: "请上传背景图", trigger: "change" }],
    icpUrl: [{ validator: validateLink, trigger: "blur" }],
    publicSecurityUrl: [{ validator: validateLink, trigger: "blur" }],
    legalStatementUrl: [{ validator: validateLink, trigger: "blur" }],
    privacyPolicyUrl: [{ validator: validateLink, trigger: "blur" }],
  }, //表单校验规则
});

const changeLogo = (value) => {
  if (value && value.length > 0) {
    refForm.value.clearValidate("logoUrl");
  }
};
const changeBanner = (value) => {
  if (value && value.length > 0) {
    refForm.value.clearValidate("backgroundUrl");
  }
};
const save = () => {
  refForm.value.validate((valid) => {
    if (valid) {
      let params = {
        ...state.formData,
      };
      params.logoUrl = JSON.stringify(params.logoUrl);
      params.backgroundUrl = JSON.stringify(params.backgroundUrl);
      axios.put(`/apaas/system/v5/login/updateLogin`, params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          getLoginPageConfig();
        } else {
          ElMessage.error(res.data.data);
        }
      });
    } else {
      ElMessage.error("请先将表单填写完整");
    }
  });
};
const getLoginPageConfig = () => {
  axios.get(`/apaas/system/v5/login/loginDetail`).then((res) => {
    if (res.data.code == 200) {
      let data = res.data.data;
      store.commit("setSystemLogo", data.logoUrl);
      data.logoUrl = data.logoUrl ? JSON.parse(data.logoUrl) : [];
      data.backgroundUrl = data.backgroundUrl ? JSON.parse(data.backgroundUrl) : [];
      Object.assign(state.formData, data);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
onBeforeMount(() => {
  getLoginPageConfig();
});
const { formData, rules } = toRefs(state);
</script>

<style lang="scss" scoped>
.page_container {
  .main_container {
    position: relative;
    margin: 0 0 16px;
    width: 100%;
    height: calc(100% - 62px);
    padding: 32px 0 70px;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    .form_content {
      overflow: auto;
      height: 100%;
      padding-left: 24px;
      .el-form {
        width: 60%;
        :deep() .el-form-item {
          &:nth-of-type(1) {
            .el-upload--picture-card {
              width: 120px;
              height: 120px;
            }
          }
          &:nth-of-type(2) {
            .el-upload--picture-card {
              width: 367px;
              height: 196px;
            }
          }
        }
      }
      :deep() .gap-title {
        font-size: 16px;
        color: #202531;
      }
    }
    .operate_btns {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70px;
      text-align: right;
      line-height: 68px;
      border-top: solid 1px #e6e9ef;
      .el-button {
        width: 92px;
        margin-right: 16px;
      }
    }
  }
}
</style>
