<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="logo">
        <bg-upload-image
          v-model="loginPageFormData.logo"
          :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="bg_image">
        <bg-upload-image
          v-model="loginPageFormData.bg_image"
          :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="bottom_title">
        <el-input
          v-model.trim="loginPageFormData.bottom_title"
          placeholder="例如：Copyright © 某某大数据, All Rights Reserved."></el-input>
      </el-form-item>

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

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

      <bg-form-gap title="隐私政策"></bg-form-gap>
      <el-form-item label="跳转连接" prop="privacy_policy">
        <el-input
          placeholder="例如：https://...或http://..."
          v-model.trim="loginPageFormData.privacy_policy"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

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

const loginPageRef = ref(null);
const state = reactive({
  loginPageFormData: {
    id: "",
    logo: [],
    bg_image: [],
    bottom_title: "",
    icp: "",
    icp_url: "",
    police: "",
    police_url: "",
    legal_notice: "",
    privacy_policy: "",
  },
  loginPageRules: {
    logo: [{ required: true, message: "请上传Logo", trigger: "change" }],
    bg_image: [{ required: true, message: "请上传背景图", trigger: "change" }],
    icp_url: [{ validator: validateLink, trigger: "blur" }],
    police_url: [{ validator: validateLink, trigger: "blur" }],
    legal_notice: [{ validator: validateLink, trigger: "blur" }],
    privacy_policy: [{ validator: validateLink, trigger: "blur" }],
  },
});
const changeLogo = (value) => {
  if (value && value.length > 0) {
    loginPageRef.value.clearValidate("logo");
  }
};
const changeBanner = (value) => {
  if (value && value.length > 0) {
    loginPageRef.value.clearValidate("bg_image");
  }
};
//设置表单数据
const setFormData = (data) => {
  Object.keys(state.loginPageFormData).forEach((item) => {
    if (["bg_image", "logo"].includes(item)) {
      state.loginPageFormData[item] = data[item] ? JSON.parse(data[item]) : [];
      return;
    }
    state.loginPageFormData[item] = data[item];
  });
};
//保存
const save = () => {
  loginPageRef.value.validate((valid) => {
    if (valid) {
      let params = {
        ...state.loginPageFormData,
      };
      params.logo = JSON.stringify(params.logo);
      params.bg_image = JSON.stringify(params.bg_image);
      axios.post("/v1/api/sysOptions/loginPageOpts", params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
        } else {
          ElMessage.error(res.data.data);
        }
      });
    }
  });
};
const { loginPageFormData, loginPageRules } = toRefs(state);
defineExpose({
  setFormData,
  save,
});
</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>
