<template>
  <div class="categories-modal-container">
    <a-form
      ref="modalFormRef"
      :model="props.modalData.data"
      :rules="props.modalData.type.indexOf('tree') > -1 ? treeRules : tableRules"
      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" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item label="云查询分类" name="code">
          <a-select
            v-model:value="props.modalData.data.code"
            placeholder="请选择云查询分类"
            :options="props.showTree"
            :fieldNames="{ label: 'itemName', value: 'itemValue' }"
          />
        </a-form-item>
        <a-form-item label="图层" name="layer">
          <a-select
            v-model:value="props.modalData.data.layer"
            placeholder="请选择图层"
            allowClear
            :options="layerOptioins"
            :fieldNames="{ label: 'serverName', value: 'id' }"
            @change="layerChange"
          />
        </a-form-item>
        <a-form-item label="数据表" name="tableName">
          <a-input
            v-model:value="props.modalData.data.tableName"
            placeholder="请先选择图层"
            disabled
          />
        </a-form-item>
        <a-form-item label="叠加图层" name="overlayList">
          <a-select
            v-model:value="props.modalData.data.overlayList"
            placeholder="请选择叠加图层"
            mode="multiple"
            allowClear
            :options="orverlayListOptioins"
            :fieldNames="{ label: 'serverName', value: 'dataTable' }"
          />
        </a-form-item>
        <a-form-item label="是否分类" name="isClass">
          <a-switch
            v-model:checked="props.modalData.data.isClass"
            checked-children="是"
            un-checked-children="否"
            @change="
              if (!props.modalData.data.isClass) {
                props.modalData.data.classField = undefined;
                props.modalData.data.classField = '';
                props.modalData.data.className = undefined;
                props.modalData.data.className = '';
              }
            "
          />
        </a-form-item>
        <a-form-item label="分类字段" name="classField" v-if="props.modalData.data.isClass">
          <a-select
            allowClear
            v-model:value="props.modalData.data.classField"
            placeholder="请先选择图层"
            :options="classFieldOptioins"
            :fieldNames="{ label: 'nameAndValue', value: 'column_name' }"
            :disabled="props.modalData.data.layer == undefined"
            @change="classFieldChange"
          />
        </a-form-item>
        <a-form-item label="分类名称" name="className" v-if="props.modalData.data.isClass">
          <a-input
            v-model:value="props.modalData.data.className"
            placeholder="请先选择分类字段"
            :disabled="props.modalData.data.classField == undefined"
          />
        </a-form-item>
        <a-form-item label="选择面积计算字段" name="areaField">
          <a-select
            allowClear
            v-model:value="props.modalData.data.areaField"
            placeholder="请先选择图层"
            :options="classFieldOptioins"
            :fieldNames="{ label: 'nameAndValue', value: 'column_name' }"
            :disabled="props.modalData.data.layer == undefined"
          />
        </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, watch } from 'vue';
  import { ShpGeoLayerLoadPage } from '@/api/demo/system';
  import { GetTableAndViewColumnList } from '@/api/demo/formScheme';

  const props = defineProps(['modalData', 'showTree', 'layerOptioins', 'orverlayListOptioins']);
  const emit = defineEmits(['closeModal', 'submit']);

  // 云查询图层
  const layerOptioins: any = ref(props.layerOptioins);
  // 叠加图层
  const orverlayListOptioins: any = ref(props.orverlayListOptioins);
  const modalFormRef = ref();

  const treeRules = {
    itemName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    itemValue: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  };
  const tableRules = {
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    code: [{ 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' }],
  };

  watch(
    () => props.modalData.data.tableName,
    (newVal) => {
      getClassFieldOptioins(newVal);
    },
    {
      immediate: true,
      deep: true,
    },
  );

  const submit = () => {
    modalFormRef.value
      .validate()
      .then(() => {
        emit('submit');
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  // 关闭弹窗
  const closeModal = () => {
    emit('closeModal');
    clearModal();
  };
  // 清理验证
  const clearModal = () => {
    modalFormRef.value.clearValidate();
    classFieldOptioins.value = [];
  };

  // 分类字段
  const classFieldOptioins: any = ref([]);
  // 云查询图层选中后，设置数据表、分类字段、选择面积计算字段
  function layerChange(value, option) {
    // console.log(value);
    if (value == undefined) {
      // 数据表
      props.modalData.data.tableName = undefined;
      // 分类字段
      props.modalData.data.classField = undefined;
      props.modalData.data.className = undefined;
      props.modalData.data.areaField = undefined;
      classFieldOptioins.value = [];
    } else {
      // 数据表
      props.modalData.data.tableName = option.dataTable;
      // 分类字段
      props.modalData.data.classField = undefined;
      props.modalData.data.className = undefined;
      props.modalData.data.areaField = undefined;
      // 分类字段、选择面积计算字段options
      getClassFieldOptioins(props.modalData.data.tableName);
    }
  }

  // 分类字段、选择面积计算字段options
  function getClassFieldOptioins(tableName) {
    let query = { tableName: tableName };
    GetTableAndViewColumnList(query).then((res: any) => {
      if (res) {
        res.forEach((element) => {
          if (element.description == null) {
            element.nameAndValue = element.column_name;
          } else {
            element.nameAndValue = element.column_name + '(' + element.description + ')';
          }
        });
      }
      classFieldOptioins.value = res;
    });
  }

  // 分类字段选中后，分类名称先设置成description
  function classFieldChange(value, option) {
    if (value == undefined) {
      props.modalData.data.classField = undefined;
      props.modalData.data.className = undefined;
    } else {
      props.modalData.data.className = option.description;
    }
  }

  defineExpose({
    clearModal,
  });
</script>
<style lang="scss" scoped>
  .categories-modal-container {
    padding: 10px 25px;
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
</style>
