<template>
  <div class="categories-modal-container">
    <a-form
      ref="formRef"
      :model="props.modalData.data"
      :rules="rules"
      labelAlign="right"
      :label-col="{ span: 6 }"
    >
        <a-form-item label="shp名称" name="shpName">
          <a-input v-model:value="props.modalData.data.shpName" />
        </a-form-item>
        <a-form-item label="shp路径" name="shpPath">
          <a-input v-model:value="props.modalData.data.shpPath"  />
        </a-form-item>
        <a-form-item label="shp包含图斑数量" name="shpCount">
          <a-input v-model:value="props.modalData.data.shpCount" />
        </a-form-item>
        <a-form-item label="日期" name="shpDate">
          <a-input v-model:value="props.modalData.data.shpDate" />
        </a-form-item>
        <a-form-item label="地块名称" name="plotName">
          <a-input v-model:value="props.modalData.data.plotName" />
        </a-form-item>
        <a-form-item label="面积（平方米）" name="areaNum">
          <a-input v-model:value="props.modalData.data.areaNum" />
        </a-form-item>
        <a-form-item label="地区" name="areaName">
          <a-input v-model:value="props.modalData.data.areaName" />
        </a-form-item>
        <a-form-item label="创建时间" name="createTime">
          <a-input v-model:value="props.modalData.data.createTime" />
        </a-form-item>
        <a-form-item label="最后一次修改时间" name="updateTime">
          <a-input v-model:value="props.modalData.data.updateTime" />
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea v-model:value="props.modalData.data.remark" :auto-size="{ minRows: 2, maxRows: 5 }" />
        </a-form-item>
    </a-form>
    <div class="modal-footer">
      <!-- <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, ref } from 'vue';
  const props = defineProps(['modalData']);
  const emit = defineEmits(['closeModal', 'submit']);
  const formRef = ref();
  const rules = {
    shpName: [{ required: false, message: '不能为空', trigger: 'blur' }],
    plotName: [{ required: false, message: '不能为空', trigger: 'blur' }],
  };
  const submit = () => {
    formRef.value
      .validate()
      .then(() => {
        emit('submit');
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const closeModal = () => {
    emit('closeModal');
    formRef.value.resetFields();
  };
  const clearModalData = () => {
    formRef.value.resetFields();
  };
  defineExpose({
    clearModalData,
  });
</script>
<style lang="scss" scoped>
  .categories-modal-container {
    padding: 10px 25px;
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
</style>
