<template>
  <div class="bg-white rounded-md h-screen py-4">
    <div class="text-right pr-10">
      <el-button
        type="primary"
        :disabled="isButton"
        @click="submitForm(ruleFormRef)"
      >
        保存
      </el-button>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <div class="flex">
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="area">
          <el-input v-model="ruleForm.area" textarea rows="1" maxlength="30" clearable show-word-limit />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="举报邮箱" prop="report_area">
          <el-input v-model="ruleForm.report_area" />
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="App二维码" prop="app_qrcode">
          <file-upload-progress
            v-model:part="ruleForm.app_qrcode"
            :limit="1"
            class="w-320px"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="2 * 1024 * 1024"
          >
            <template #default>
              <el-button type="primary">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs text-gray-500">
                只能上传jpg/png文件，且不超过500kb，建议尺寸1:1
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="苹果端二维码" prop="ios_qrcode">
          <file-upload-progress
            v-model:part="ruleForm.ios_qrcode"
            :limit="1"
            class="w-320px"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="2 * 1024 * 1024"
          >
            <template #default>
              <el-button type="primary">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs text-gray-500">
                只能上传jpg/png文件，且不超过500kb，建议尺寸1:1
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item label="安卓端二维码" prop="Android_qrcode">
          <file-upload-progress
            v-model:part="ruleForm.Android_qrcode"
            :limit="1"
            class="w-320px"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="2 * 1024 * 1024"
          >
            <template #default>
              <el-button type="primary">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs text-gray-500">
                只能上传jpg/png文件，且不超过500kb，建议尺寸1:1
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <el-form-item label="logo" prop="logo">
          <file-upload-progress
            v-model:part="ruleForm.logo"
            :limit="1"
            class="w-320px"
            accept=".jpg,.jpeg,.webp,.png"
            :size-limit="2 * 1024 * 1024"
          >
            <template #default>
              <el-button type="primary">点击上传</el-button>
            </template>
            <template #tip>
              <div class="mt-2 text-xs text-gray-500">
                只能上传jpg/png文件，且不超过500kb，建议尺寸1:1
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
let ruleForm = $ref({
  phone: "",
  area: "",
  email: "",
  report_area: "",
  app_qrcode: "",
  ios_qrcode: "",
  Android_qrcode: "",
  logo: "",
});

const rules = $ref({
  phone: [
    {
      required: true,
      message: "请填写学校名称",
      trigger: "submit",
    },
  ],
  area: [{ required: true, message: "请填写学校电话", trigger: "submit" }],
  email: [{ required: true, message: "请上传logo图片", trigger: "submit" }],
  report_area: [
    { required: true, message: "请选择学校级别", trigger: "submit" },
  ],
  app_qrcode: [
    { required: true, message: "请选择学校地址", trigger: "submit" },
  ],
  ios_qrcode: [
    { required: true, message: "请输入详细地址", trigger: "submit" },
  ],
  Android_qrcode: [
    { required: true, message: "请填写学校风采", trigger: "submit" },
  ],
  logo: [{ required: true, message: "请上传logo图片", trigger: "submit" }],
});
let isButton = $ref(false);
let isEdit;
// 提交
function submitForm(formName) {
  // router.push({ name: "wydblsz_detail" });
  if (!formName) return;
  formName.validate((valid) => {
    if (valid) {
      if (!isEdit) {
        isButton = true;
      } else {
        isButton = false;
      }
    } else {
      isButton = false;
    }
  });
}
function cancelForm() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 320px;
}
.el-input.rank {
  min-width: 200px;
}
.demo-ruleForm {
  width: 1000px;
  height: calc(80% - 50px);
  margin: 0 auto;
  overflow: auto;
}
</style>