<template>
  <div class="system-setting">
    <el-card class="!border-none" shadow="never" v-loading="isLoading">
      <div class="text-lg font-bold mb-4">系统设置</div>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item label="网站名称" prop="site_name">
          <div class="w-80">
            <el-input v-model="formData.site_name" placeholder="请输入网站名称" />
          </div>
        </el-form-item>
        <el-form-item label="网站LOGO" prop="site_logo">
          <div>
            <material-picker v-model="formData.site_logo" :limit="1" />
            <div class="text-base text-info leading-normal mt-1.5">建议尺寸：1:1，支持jpg，jpeg，png格式</div>
          </div>
        </el-form-item>
        <el-form-item label="登录页背景图" prop="login_bg_image">
          <div>
            <material-picker v-model="formData.login_bg_image" :limit="1" />
            <div class="text-base text-info leading-normal mt-1.5">建议尺寸：16:9，支持jpg，jpeg，png格式</div>
          </div>
        </el-form-item>
        <el-form-item label="登录验证码" prop="enable_captcha">
          <el-radio-group v-model="formData.enable_captcha">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="mt-4 !border-none" shadow="never" v-loading="isLoading">
      <div class="text-lg font-bold mb-4">网页设置</div>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item label="网站标题" prop="web_title">
          <div class="w-80">
            <el-input v-model="formData.web_title" placeholder="请输入网站标题" />
          </div>
        </el-form-item>
        <el-form-item label="网站图标" prop="web_logo">
          <div>
            <material-picker v-model="formData.web_logo" :limit="1" />
            <div class="text-base text-info leading-normal mt-1.5">建议尺寸：1:1，支持jpg，jpeg，png格式</div>
          </div>
        </el-form-item>
        <el-form-item label="网站关键词" prop="web_keywords">
          <div class="w-80">
            <el-input v-model="formData.web_keywords" placeholder="请输入网站关键词" />
          </div>
        </el-form-item>
        <el-form-item label="网站描述" prop="web_description">
          <div class="w-80">
            <el-input v-model="formData.web_description" placeholder="请输入网站描述" />
          </div>
        </el-form-item>
        <el-form-item label="版权信息" prop="web_copyright">
          <div class="w-80">
            <el-input v-model="formData.web_copyright" placeholder="请输入版权信息" />
          </div>
        </el-form-item>
        <el-form-item label="ICP备案号" prop="web_icp_record">
          <div class="w-80">
            <el-input v-model="formData.web_icp_record" placeholder="请输入ICP备案号" />
          </div>
        </el-form-item>
        <el-form-item label="公安备案号" prop="web_police_record">
          <div class="w-80">
            <el-input v-model="formData.web_police_record" placeholder="请输入公安备案号" />
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="setting-footer">
      <div class="setting-footer__content">
        <el-button v-perms="['setting.websiteSettings/edit']" type="primary" @click="submitForm" :loading="isLoading">
          保存设置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="SystemSetting">
import type { FormInstance } from 'element-plus'
import { websiteDetail, websiteEdit } from '@/api/system/setting'

// 组件参数
const formRef = shallowRef<FormInstance>()
const isLoading = ref(false)
const formData = reactive({
  site_name: '',
  site_logo: '',
  login_bg_image: '',
  enable_captcha: 1,
  web_title: '',
  web_logo: '',
  web_keywords: '',
  web_description: '',
  web_copyright: '',
  web_icp_record: '',
  web_police_record: ''
})
const formRules = reactive<object>({
  site_name: [{ required: true, message: '网站名称不能为空', trigger: ['change', 'blur'] }],
  site_logo: [{ required: true, message: '网站LOGO不能为空', trigger: ['change', 'blur'] }],
  web_title: [{ required: true, message: '网站标题不能为空', trigger: ['change', 'blur'] }],
  web_logo: [{ required: true, message: '网站图标不能为空', trigger: ['change', 'blur'] }]
})

// 获取网站信息
const getWebsiteDetail = async () => {
  isLoading.value = true
  websiteDetail()
    .then((res) => {
      Object.assign(formData, res || {})
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 提交表单
const submitForm = async () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      isLoading.value = true
      websiteEdit(formData)
        .then(() => {
          isLoading.value = false
          ElMessage.success('操作成功')
        })
        .catch(() => {
          isLoading.value = false
        })
    }
  })
}

onMounted(() => {
  getWebsiteDetail()
})
</script>

<style lang="scss" scoped>
.system-setting {
  .setting-footer {
    height: 56px;

    .setting-footer__content {
      @apply absolute bottom-0 left-0 right-0;
      @apply flex justify-center px-4 py-3;
      background: var(--el-bg-color);
      z-index: 1000;
    }
  }
}
</style>
