<template>
  <div class="categories-modal-container">
    <a-form
      ref="formRef"
      :model="props.modalData.data"
      :rules="props.modalData.type.indexOf('tree') > -1 ? treeRules : rightRules"
      labelAlign="right"
      :label-col="{ span: 7 }"
    >
      <template v-if="props.modalData.type.indexOf('tree') > -1">
        <a-form-item label="名称" name="itemName">
          <a-input v-model:value="props.modalData.data.itemName" />
        </a-form-item>
        <a-form-item label="类型" name="itemValue">
          <a-select v-model:value="props.modalData.data.itemValue">
            <a-select-option value="vector_data">矢量数据</a-select-option>
            <a-select-option value="imgage_data">影像数据</a-select-option>
          </a-select>
        </a-form-item>
      </template>
      <template v-else>
        <a-form-item label="ID" name="id" v-if="false">
          <a-input v-model:value="props.modalData.data.id" disabled />
        </a-form-item>
        <a-form-item label="名称" name="name">
          <a-input v-model:value="props.modalData.data.name" />
        </a-form-item>
        <a-form-item label="云查询分类" name="overlay">
          <a-select
            v-model:value="props.modalData.data.overlay"
            :options="props.showLTree"
            :fieldNames="{ label: 'itemName', value: 'itemValue' }"
          />
        </a-form-item>
        <a-form-item label="图层" name="layer">
          <a-select v-model:value="props.modalData.data.layer">
            <a-select-option value="1">图层1</a-select-option>
            <a-select-option value="2">图层2</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数据表" name="tableName">
          <a-select v-model:value="props.modalData.data.tableName">
            <a-select-option value="1">数据表1</a-select-option>
            <a-select-option value="2">数据表2</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="叠加图层" name="overlayList">
          <a-select v-model:value="props.modalData.data.overlayList" mode="multiple">
            <a-select-option value="1" checked>天地图</a-select-option>
            <a-select-option value="2">图层2</a-select-option>
            <a-select-option value="3">图层3</a-select-option>
            <a-select-option value="4">图层4</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否分类" name="isClass">
          <a-switch
            v-model:checked="props.modalData.data.isClass"
            checked-children="是"
            un-checked-children="否"
          />
        </a-form-item>
        <a-form-item label="分类字段" name="classField" v-if="props.modalData.data.isClass">
          <a-select v-model:value="props.modalData.data.classField">
            <a-select-option value="1">字段1</a-select-option>
            <a-select-option value="2">字段2</a-select-option>
            <a-select-option value="3">字段3</a-select-option>
            <a-select-option value="4">字段4</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="分类名称" name="className" v-if="props.modalData.data.isClass">
          <a-input v-model:value="props.modalData.data.className" />
        </a-form-item>
        <a-form-item label="选择面积计算字段" name="areaField">
          <a-select v-model:value="props.modalData.data.areaField">
            <a-select-option value="1">面积1</a-select-option>
            <a-select-option value="2">面积2</a-select-option>
            <a-select-option value="3">面积3</a-select-option>
            <a-select-option value="4">面积4</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否合计" name="isSum">
          <a-switch
            v-model:checked="props.modalData.data.isSum"
            checked-children="是"
            un-checked-children="否"
          />
        </a-form-item>
      </template>
    </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', 'showLTree']);
  const emit = defineEmits(['closeModal', 'submit']);
  const formRef = ref();
  const treeRules = {
    itemName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    itemValue: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  };
  const rightRules = {
    overlay: [{ required: true, message: '查询分类不能为空', trigger: 'blur' }],
    layer: [{ required: true, message: '图层不能为空', trigger: 'blur' }],
    tableName: [{ required: true, message: '数据表不能为空', trigger: 'blur' }],
    overlayList: [{ required: true, message: '叠加图层不能为空', trigger: 'blur' }],
    classField: [{ required: true, message: '分类字段不能为空', trigger: 'blur' }],
    className: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
    areaField: [{ required: true, 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>
