<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { omit, pick } from 'lodash-es'
const props = defineProps<{
  d: any
}>()
// type TabNameString = 'jcxx' | 'lxfs' | 'xxfc'
// const activeTabName: TabNameString = 'jcxx'
// function handleBeforeLeave(activeName: TabNameString, oldActiveName: TabNameString) {}
const emits = defineEmits(['emitClose'])
const form = reactive<any>(
  pick(props.d, [
    'sm_logo',
    'sm_name',
    'sm_address',
    'sm_code',
    'sm_zipcode',
    'sm_bxlx',
    'sm_xxbxlxm',
    'sm_xxzgbmm',
    'sm_zzjgm',
    'sm_xqr',
    'sm_xzqmbm',
    'sm_frdbrh',
    'sm_frzsh',
    'sm_xzxm',
    'sm_xzgh',
    'sm_lxr_contact',
    'sm_email',
    'sm_czdh',
    'sm_xxfc',
  ]) ?? {},
)

// const validateTel = (rule: any, value: any, callback: any) => {
//   const reg_ph = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
//   if (!value)
//     callback(new Error('请输入联系方式'));
//   else if (value && !reg_ph.test(value))
//     callback(new Error('请输入正确的联系方式'));
//   else
//     callback()
// }

const rules: FormRules = {
  // 基础信息
  sm_name: [
    { required: true, message: '请输入正确的学校名称', trigger: 'submit' },
  ],
  sm_address: [
    { required: true, message: '请输入正确的学校地址', trigger: 'submit' },
  ],
  sm_code: [
    { required: true, message: '请输入正确的学校代码', trigger: 'submit' },
  ],
  sm_zipcode: [
    { required: true, message: '请输入正确的学校邮政编码', trigger: 'submit' },
  ],
  sm_bxlx: [
    { required: true, message: '请输入正确的学校办学类型', trigger: 'submit' },
  ],
  sm_xxbxlxm: [
    {
      required: true,
      message: '请输入正确的学校办学类型码',
      trigger: 'submit',
    },
  ],
  sm_xzqmbm: [
    { required: true, message: '请输入正确的行政区编码', trigger: 'submit' },
  ],
  sm_frdbrh: [
    { required: true, message: '请输入正确的法定代表人号', trigger: 'submit' },
  ],
  sm_frzsh: [
    { required: true, message: '请输入正确的法人证书号', trigger: 'submit' },
  ],
  // 联系方式
  sm_lxr_contact: [
    {
      required: true,
      message: '请输入正确的联系电话',
      trigger: 'submit',
      pattern: /^[0-9-]+$/,
    },
  ],
  sm_email: [
    {
      required: true,
      message: '请输入正确的电子邮箱',
      trigger: 'submit',
      type: 'email',
    },
  ],
  sm_czdh: [
    {
      required: false,
      message: '请输入正确的传真电话',
      trigger: 'submit',
      pattern: /^[0-9-]+$/,
    },
  ],
  // sm_lxr_contact: [{ required: true, validator: validateTel, message: '请输入正确的联系方式', trigger: ['blur', 'change'] }],
  // sm_email: [{ required: true, type: "email", message: '请输入正确的邮箱', trigger: ['blur', 'change'] }],
}

const formRef = $ref<FormInstance>()

function handleClickCancel() {
  emits('emitClose', form)
}

function handleClickSubmit() {
  formRef?.validate((valid) => {
    if (valid) {
      // log
      console.log('form :>> ', form)
      request({
        baseURL: window.GLOBAL_CONFIG.uc,
        url: '/school/main/save',
        data: {
          issubmit: 1,
          sm_id: props.d.sm_id,
          area_id1: 15,
          area_id2: 235,
          area_id3: 2615,
          school_main: { sm_name: form.sm_name },
          school_main_ext: omit(form, ['sm_name']),
        },
      }).then((res) => {
        if (res.code === '1') {
          ElMessage.success('提交成功')
          emits('emitClose', form, true)
        }
      })
    }
  })
}
</script>

<template>
  <!-- <el-tabs v-model="activeTabName" :before-leave="handleBeforeLeave">
    <el-tab-pane label="基础信息" name="jcxx">
      User
    </el-tab-pane>
    <el-tab-pane label="联系方式" name="lxfs">
      Config
    </el-tab-pane>
    <el-tab-pane label="学校风采" name="xxfc">
      Config
    </el-tab-pane>
</el-tabs> -->
  <el-form
    ref="formRef"
    class="flex flex-wrap px-6"
    label-position="top"
    :model="form"
    :rules="rules"
  >
    <p class="font-semibold text-base text-hex-3f8cff mb-4 w-full">
      基础信息
    </p>
    <!-- <el-form ref="formRef" label-position="top" :model="form" :rules="rules"> -->
    <el-form-item label="学校logo" prop="sm_logo" class="w-full px-2">
      <file-upload v-model:part="form.sm_logo" :limit="1" list-type="picture" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="学校名称" prop="sm_name">
      <el-input
        v-model="form.sm_name"
        maxlength="30"
        show-word-limit
        type="text"
      />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="学校地址" prop="sm_address">
      <el-input
        v-model="form.sm_address"
        maxlength="30"
        show-word-limit
        type="text"
      />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="学校代码" prop="sm_code">
      <el-input v-model="form.sm_code" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="学校邮政编码" prop="sm_zipcode">
      <el-input v-model="form.sm_zipcode" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="学校办学类型" prop="sm_bxlx">
      <el-input v-model="form.sm_bxlx" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="学校办学类型码" prop="sm_xxbxlxm">
      <el-input v-model="form.sm_xxbxlxm" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="学校主管部门码" prop="sm_xxzgbmm">
      <el-input v-model="form.sm_xxzgbmm" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="组织机构码" prop="sm_zzjgm">
      <el-input v-model="form.sm_zzjgm" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="校庆日" prop="sm_xqr">
      <el-input v-model="form.sm_xqr" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="行政区编码" prop="sm_xzqmbm">
      <el-input v-model="form.sm_xzqmbm" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="法定代表人号" prop="sm_frdbrh">
      <el-input v-model="form.sm_frdbrh" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="法人证书号" prop="sm_frzsh">
      <el-input v-model="form.sm_frzsh" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="校长姓名" prop="sm_xzxm">
      <el-input v-model="form.sm_xzxm" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="校长工号" prop="sm_xzgh">
      <el-input v-model="form.sm_xzgh" type="text" />
    </el-form-item>
    <!-- </el-form> -->

    <p class="font-semibold text-base text-hex-3f8cff mb-4 w-full">
      联系方式
    </p>
    <!-- <el-form ref="formRef" label-position="top" :model="form" :rules="rules"> -->
    <el-form-item class="w-1/2 px-2" label="联系电话" prop="sm_lxr_contact">
      <el-input v-model="form.sm_lxr_contact" type="text" />
    </el-form-item>
    <el-form-item class="w-1/2 px-2" label="电子邮箱" prop="sm_email">
      <el-input v-model="form.sm_email" type="text" />
    </el-form-item>

    <el-form-item class="w-1/2 px-2" label="传真电话" prop="sm_czdh">
      <el-input v-model="form.sm_czdh" type="text" />
    </el-form-item>
    <!-- </el-form> -->

    <p class="font-semibold text-base text-hex-3f8cff mb-4 w-full">
      学校风采
    </p>
    <!-- <el-form ref="formRef" label-position="top" :model="form" :rules="rules"> -->
    <el-form-item label="" prop="sm_xxfc" class="px-2">
      <tinymce-vue v-model="form.sm_xxfc" />
    </el-form-item>
    <!-- </el-form> -->
  </el-form>

  <div class="flex justify-center mb-2">
    <el-button size="large" @click="handleClickCancel">
      取消
    </el-button>
    <el-button size="large" type="primary" @click="handleClickSubmit">
      提交
    </el-button>
  </div>
</template>
