<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
      <el-form
        label-position="top"
        :label-width="80"
        :model="formValue"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="网站名称" prop="name">
          <el-input v-model="formValue.name" placeholder="请输入网站名称" />
        </el-form-item>

        <el-form-item label="备案编号" prop="icpCode">
          <el-input placeholder="请输入备案编号" v-model="formValue.icpCode" />
        </el-form-item>

        <el-form-item label="联系电话" prop="mobile">
          <el-input placeholder="请输入联系电话" v-model="formValue.mobile" />
        </el-form-item>

        <el-form-item label="联系地址" prop="address">
          <el-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
        </el-form-item>

        <el-form-item label="登录验证码" prop="loginCode">
          <el-radio-group v-model="formValue.loginCode" name="loginCode">
            <el-space>
              <el-radio :value="1">开启</el-radio>
              <el-radio :value="0">关闭</el-radio>
            </el-space>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="网站开启访问" prop="systemOpen">
          <el-switch size="large" v-model="formValue.systemOpen" @change="systemOpenChange" />
        </el-form-item>

        <el-form-item label="网站关闭提示" prop="closeText">
          <el-input
            v-model="formValue.closeText"
            type="textarea"
            placeholder="请输入网站关闭提示"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="formSubmit(formRef)">更新基本信息</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const rules = {
    name: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };

  const formValue = reactive({
    name: '',
    mobile: '',
    icpCode: '',
    address: '',
    loginCode: 0,
    closeText:
      '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
    systemOpen: true,
  });

  function systemOpenChange(value) {
    if (!value) {
      ElMessageBox.confirm('您确定要关闭系统访问吗？该操作立马生效，请慎重操作！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          ElMessage.success('操作成功');
        })
        .catch(() => {
          formValue.systemOpen = true;
        });
    }
  }

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证失败，请填写完整信息');
      }
    });
  }
</script>
