<template>
  <a-modal
    :width="700"
    v-model:visible="visible"
    :title="type == 'inner' ? '入参配置' : '出参配置'"
    :maskClosable="false"
    destroyOnClose
    @cancel="handleClose"
    @ok="handleSubmit"
    :bodyStyle="{ minHeight: '400px' }"
  >
    <a-table v-if="type == 'inner'" :columns="columns" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'type'">
          <a-select
            v-model:value="record[column.dataIndex]"
            style="width: 100%"
            @change="handleType(record)"
            :disabled="disabled"
          >
            <a-select-option value="value">值</a-select-option>
            <a-select-option value="api">API</a-select-option>
            <a-select-option value="info">信息体</a-select-option>
            <a-select-option value="form">{{
              from == 'table' ? '表格内表单组件' : '表单组件'
            }}</a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex === 'value'">
          <a-input
            v-if="record.type == 'value'"
            v-model:value="record.value"
            :placeholder="t('请填写参数值')"
            :disabled="disabled"
          />
          <a-input
            v-else-if="record.type == 'api'"
            v-model:value="record.apiConfig.path"
            :placeholder="t('点击配置API')"
            @click="showApiConfig(index)"
            :disabled="disabled"
          >
            <template #suffix>
              <Icon icon="ant-design:ellipsis-outlined" />
            </template>
          </a-input>
          <a-select
            v-else-if="record.type === 'info'"
            v-model:value="record[column.dataIndex]"
            :options="infoMap"
            :fieldNames="{ label: 'title', value: 'value' }"
            style="width: 100%"
            :disabled="disabled"
          />
          <a-select
            v-else-if="record.type === 'form'"
            v-model:value="record[column.dataIndex]"
            :options="formOptions"
            style="width: 100%"
            :disabled="disabled"
          />
          <div v-else>请选择参数类型</div>
        </template>
      </template>
    </a-table>
    <a-table v-else :columns="columnsTwo" :data-source="data" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'mainComponent'">
          <a-select
            v-model:value="record[column.dataIndex]"
            :options="formOptions"
            style="width: 100%"
            :disabled="disabled"
          />
        </template>
      </template>
    </a-table>
    <ApiConfig
      v-if="apiConfigDialog"
      title="API配置"
      v-model:apiConfigDialog="apiConfigDialog"
      v-model:apiConfig="data[configIndex].apiConfig"
    />
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { ApiConfig } from '/@/components/ApiConfig';

  import { Icon } from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { infoMap } from '/@/components/Designer';
  const props = defineProps({
    list: Array,
    modalConfigDia: Boolean,
    type: String,
    formJson: Array,
    disabled: Boolean,
    from: String,
  });
  const { t } = useI18n();
  const columns = ref([
    {
      title: '参数名称',
      dataIndex: 'name',
      align: 'center',
      width: 180,
    },
    {
      title: '入参类型',
      dataIndex: 'type',
      align: 'center',
      width: 200,
    },
    {
      title: '参数值',
      dataIndex: 'value',
      align: 'center',
    },
  ]);
  const columnsTwo = ref([
    {
      title: '参数名称',
      dataIndex: 'name',
      align: 'center',
      width: 180,
    },
    {
      title: props.from == 'table' ? '赋值表格内表单组件' : '赋值表单组件',
      dataIndex: 'mainComponent',
      align: 'center',
      width: 150,
    },
  ]);

  const visible = ref(props.modalConfigDia);

  const apiConfigDialog = ref(false);
  const data = ref<any[]>(props.list || []);
  const configIndex = ref<number>(0);
  const formOptions = ref<any>([]);
  const emit = defineEmits(['update:modalConfigDia', 'update:list']);

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

  const showApiConfig = (index) => {
    configIndex.value = index;
    apiConfigDialog.value = true;
  };

  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)) {
        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 handleType = (record) => {
    record.apiConfig = record.type === 'api' ? {} : '';
  };

  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>
