<template>
  <a-modal
    :width="700"
    v-model:visible="visible"
    title="入参绑定表单组件设置"
    :maskClosable="false"
    destroyOnClose
    @cancel="handleClose"
    @ok="handleSubmit"
    :bodyStyle="{ minHeight: '400px' }"
    ><a-alert
      message="提示：被绑定的表单组件需添加值改变触发事件——刷新API，用来刷新当前树形组件"
      type="warning"
    />
    <a-table :columns="columnsTwo" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'bindComp'">
          <a-select
            v-model:value="record[column.dataIndex]"
            :options="formOptions"
            style="width: 100%"
            :disabled="disabled"
          />
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { cloneDeep } from 'lodash-es';
  import { ref, onMounted } from 'vue';

  const props = defineProps({
    list: Array,
    modalConfigDia: Boolean,
    formJson: Array,
    disabled: Boolean,
    curCompKey: String,
  });

  const columnsTwo = ref([
    {
      title: '参数名称',
      dataIndex: 'name',
      align: 'center',
      width: 180,
    },
    {
      title: '参数类型',
      dataIndex: 'title',
      align: 'center',
      width: 180,
    },
    {
      title: '表单组件',
      dataIndex: 'bindComp',
      align: 'center',
      width: 150,
    },
  ]);

  const visible = ref(props.modalConfigDia);

  const data = ref<any[]>(cloneDeep(props.list) || []);

  const formOptions = ref<any>([]);
  const emit = defineEmits(['update:modalConfigDia', 'update:list']);

  onMounted(() => {
    formOptions.value = [];
    getTableComponents(props.formJson);
  });

  const getTableComponents = (list) => {
    list.forEach((item) => {
      if (['grid', 'card', 'tab'].includes(item.type)) {
        item.layout.forEach((lay) => {
          getTableComponents(lay.list);
        });
      } else if (item.type == 'one-for-one') {
        getTableComponents(item.children);
      } else if (item.type == 'table-layout') {
        item.layout.forEach((lay) => {
          lay.list.forEach((chil) => {
            getTableComponents(chil.children);
          });
        });
      } else if (!['form', 'sun-form'].includes(item.type) && item.key != props.curCompKey) {
        if (item.bindField) {
          formOptions.value.push({
            label: item.label,
            value: JSON.stringify({
              key: item.key,
              table: item.bindTable,
              field: item.bindField,
            }),
          });
        } else if (['time-range', 'date-range'].includes(item.type)) {
          formOptions.value.push({
            label: item.label + '开始时间',
            value: JSON.stringify({
              key: item.key,
              table: item.bindTable,
              field: item.bindStartTime,
            }),
          });
          formOptions.value.push({
            label: item.label + '结束时间',
            value: JSON.stringify({
              key: item.key,
              table: item.bindTable,
              field: item.bindEndTime,
            }),
          });
        }
      }
    });
  };

  const handleClose = () => {
    emit('update:modalConfigDia', false);
  };

  const handleSubmit = () => {
    emit('update:list', data.value);
    emit('update:modalConfigDia', false);
  };
</script>

<style lang="less" scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
  }
</style>
