<template>
  <a-modal
    :width="700"
    v-model:visible="visible"
    title="参数配置"
    :maskClosable="false"
    destroyOnClose
    @cancel="handleClose"
    @ok="handleSubmit"
    :bodyStyle="{ minHeight: '400px' }"
  >
    <a-button type="primary" @click="addConfig" class="!m-4">添加参数</a-button>
    <a-table :columns="columns" :data-source="data" :key="tableKey" :pagination="false">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'sort'">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fangxiang1" />
          </svg>
        </template>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'sort'">
          <svg class="icon draggable-icon" aria-hidden="true" style="cursor: move">
            <use xlink:href="#icon-paixu" />
          </svg>
        </template>
        <template v-if="column.dataIndex === 'type'">
          <a-select
            v-model:value="record[column.dataIndex]"
            style="width: 100%"
            @change="handleType(record)"
          >
            <a-select-option value="form">表单参数</a-select-option>
            <a-select-option value="api">自定义参数</a-select-option>
          </a-select>
        </template>
        <template v-if="column.dataIndex === 'name'">
          <a-input v-model:value="record[column.dataIndex]" />
        </template>
        <template v-if="column.dataIndex === 'config'">
          <a-input
            v-if="record.type === 'api'"
            v-model:value="record[column.dataIndex].path"
            @click="showConfig(index)"
          >
            <template #suffix>
              <Icon icon="ant-design:ellipsis-outlined" />
            </template>
          </a-input>
          <a-select
            v-else-if="record.type === 'form'"
            v-model:value="record[column.dataIndex]"
            :options="formOptions"
            style="width: 100%"
          />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span style="color: #ff8080; cursor: pointer" @click="deleteEvent(index)">
            删除
          </span>
        </template>
      </template>
    </a-table>
    <ApiConfig
      v-if="apiConfigDialog"
      title="API配置"
      v-model:apiConfigDialog="apiConfigDialog"
      v-model:apiConfig="data[configIndex].config"
      isQrcode
    />
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
import { ApiConfig } from "/@/components/ApiConfig";
import { noHaveTableAndField } from "/@/components/Designer/src/types";
import { Icon } from "/@/components/Icon";

const columns = ref([
  {
    dataIndex: "sort",
    key: "sort",
    width: 50,
  },
  {
    title: "参数类别",
    dataIndex: "type",
    align: "center",
    width: 180,
  },
  {
    title: "参数名",
    dataIndex: "name",
    align: "center",
    width: 150,
  },
  {
    title: "操作配置",
    dataIndex: "config",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 80,
    align: "center",
  },
]);
const props = defineProps({
  list: Array,
  iframeConfigDia: Boolean,
});

const generatorConfig = inject("generatorConfig") as any;
const visible = ref(props.iframeConfigDia);
const tableKey = ref(0);
const apiConfigDialog = ref(false);
const data = ref<any[]>(props.list || []);
const configIndex = ref<number>(0);
const formOptions = ref([]);
const emit = defineEmits(["update:iframeConfigDia", "update:list"]);

onMounted(() => {
  getTableComponents(generatorConfig?.formJson.list, formOptions.value);
});

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

const deleteEvent = (index) => {
  data.value!.splice(index, 1);
};

const getTableComponents = (list, data) => {
  list.forEach((item) => {
    if (["tab", "grid", "card"].includes(item.type)) {
      for (const child of item.layout!) {
        getTableComponents(child.list, data);
      }
    } else if (item.type === "table-layout") {
      for (const child of item.layout!) {
        for (const list of child.list) {
          getTableComponents(list.children, data);
        }
      }
    } else if (![...noHaveTableAndField, "one-for-one", "form"].includes(item.type)) {
      if (["time-range", "date-range"].includes(item.type)) {
        data.push({
          key: item.bindStartTime,
          label: item.label + "开始时间",
          value: item.bindStartTime,
        });
        data.push({
          key: item.bindEndTime,
          label: item.label + "结束时间",
          value: item.bindEndTime,
        });
      } else {
        data.push({
          key: item.key,
          label: item.label,
          value: item.bindField,
        });
      }
    }
  });
};

const addConfig = () => {
  data.value.push({
    name: data.value.length ? "" : "@id",
    value: "",
    type: "form",
    config: "",
  });
};

const handleType = (record) => {
  record.config = record.type === "api" ? {} : "";
};

const handleClose = () => {
  emit("update:iframeConfigDia", false);
};

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

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