<template>
  <div>
    <vxe-modal
      v-model="showEdit"
      :title="selectRow ? '编辑&保存' : '新增&保存'"
      width="800"
      min-width="600"
      min-height="300"
      :loading="submitLoading"
      resize
      destroy-on-close
    >
      <template #default>
        <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
          <vxe-form-item title="Basic information" title-align="left" :title-width="200" :span="24" :title-prefix="{ icon: 'vxe-icon-comment' }" />
          <vxe-form-item field="name" title="Name" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入名称" />
            </template>
          </vxe-form-item>
          <vxe-form-item field="nickname" title="Nickname" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入名称" />
            </template>
          </vxe-form-item>
          <vxe-form-item field="role" title="Role" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.name" placeholder="请输入角色" />
            </template>
          </vxe-form-item>
          <vxe-form-item field="sex" title="Sex" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.sex" transfer>
                <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label" />
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item field="age" title="Age" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.age" type="number" placeholder="请输入年龄" />
            </template>
          </vxe-form-item>
          <vxe-form-item field="flag1" title="是否单身" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-radio-group v-model="data.flag1">
                <vxe-radio label="Y" content="是" />
                <vxe-radio label="N" content="否" />
              </vxe-radio-group>
            </template>
          </vxe-form-item>
          <vxe-form-item field="checkedList" title="可选信息" :visible-method="visibleMethod" :span="24" :item-render="{}">
            <template #default="{ data }">
              <vxe-checkbox-group v-model="data.checkedList">
                <vxe-checkbox label="1" content="运动、跑步" />
                <vxe-checkbox label="2" content="听音乐" />
                <vxe-checkbox label="3" content="爬山" />
                <vxe-checkbox label="4" content="吃美食" />
              </vxe-checkbox-group>
            </template>
          </vxe-form-item>
          <vxe-form-item
            title="Other information"
            title-align="left"
            :title-width="200"
            :span="24"
            :title-prefix="{ message: '请填写必填项', icon: 'vxe-icon-info-circle-fill' }"
          />
          <vxe-form-item field="num" title="Number" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.num" type="number" placeholder="请输入数值" />
            </template>
          </vxe-form-item>
          <vxe-form-item field="date3" title="Date" :span="12" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.date3" type="date" placeholder="请选择日期" transfer />
            </template>
          </vxe-form-item>
          <vxe-form-item
            field="address"
            title="Date"
            :span="24"
            :item-render="{}"
            :title-suffix="{ message: '提示信息！！', icon: 'vxe-icon-question-circle-fill' }"
          >
            <template #default="{ data }">
              <vxe-textarea v-model="data.address" :autosize="{ minRows: 2, maxRows: 4 }" />
            </template>
          </vxe-form-item>
          <vxe-form-item align="center" title-align="left" :span="24">
            <template #default>
              <vxe-button type="submit">提交</vxe-button>
              <vxe-button type="reset">重置</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';

  interface RowVO {
    id: number;
    name: string;
    nickname: string;
    role: string;
    sex: string;
    sex2: string[];
    num: number;
    num1: number;
    age: number;
    flag1: boolean;
    address: string;
    date12: string;
    date13: string;
    date3: string;
    checkedList: any[];
  }

  const formData = reactive({
    name: '',
    nickname: '',
    role: '',
    sex: '',
    age: 0,
    num: 0,
    checkedList: [] as any[],
    flag1: false,
    date3: '',
    address: '',
  });

  const submitLoading = ref(false);
  const showEdit = ref(false);
  const selectRow = ref<RowVO | null>();

  const sexList = ref([
    { label: '女', value: '0' },
    { label: '男', value: '1' },
  ]);

  const formRules = reactive<VxeFormPropTypes.Rules>({
    name: [
      { required: true, message: '请输入名称' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符' },
    ],
    nickname: [{ required: true, message: '请输入昵称' }],
    sex: [{ required: true, message: '请选择性别' }],
  });

  const visibleMethod: VxeFormItemPropTypes.VisibleMethod = ({ data }) => {
    return data.flag1 === 'Y';
  };

  const submitEvent = () => {
    submitLoading.value = true;
    setTimeout(() => {
      const $table = tableRef.value;
      if ($table) {
        submitLoading.value = false;
        showEdit.value = false;
        if (selectRow.value) {
          VXETable.modal.message({ content: '保存成功', status: 'success' });
          Object.assign(selectRow.value, formData);
        } else {
          VXETable.modal.message({ content: '新增成功', status: 'success' });
          $table.insert({ ...formData });
        }
      }
    }, 500);
  };
</script>
