<template>
  <div class="form_content apaas_scroll_nor">
    <el-form
      ref="loginPageRef"
      :model="loginPageFormData"
      :rules="loginPageRules"
      label-width="96px"
      class="registerForm">
      <el-form-item label="LOGO" prop="logoUrl">
        <bg-upload-image
          v-model="loginPageFormData.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="loginPageFormData.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="loginPageFormData.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="loginPageFormData.icpFiling"></el-input>
      </el-form-item>
      <el-form-item label="跳转连接" prop="icpUrl">
        <el-input placeholder="例如：https://...或http://..." v-model.trim="loginPageFormData.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="loginPageFormData.publicSecurityFiling"></el-input>
      </el-form-item>
      <el-form-item label="跳转连接" prop="publicSecurityUrl">
        <el-input
          placeholder="例如：https://...或http://..."
          v-model.trim="loginPageFormData.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="loginPageFormData.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="loginPageFormData.privacyPolicyUrl"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { validateLink } from "@/services/rules.js";

const props = defineProps({
  loginPageFormData: {
    type: Object,
    default: () => ({}),
  },
});
const loginPageRef = ref(null);
const state = reactive({
  loginPageRules: {
    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) {
    loginPageRef.value.clearValidate("logoUrl");
  }
};
const changeBanner = (value) => {
  if (value && value.length > 0) {
    refForm.value.clearValidate("backgroundUrl");
  }
};
const { loginPageRules } = toRefs(state);
</script>

<style lang="scss" scoped>
.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;
  }
}
</style>
