<template>
  <a-modal
    :width="900"
    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%">
            <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-else-if="column.dataIndex === 'from'">
          <a-select
            v-if="record.name && record.type === 'form'"
            v-model:value="record.from"
            style="width: 100%"
            :options="options1"
            @change="record.value = null"
          />
          <div v-else-if="record.name && record.type === 'api'">API</div>
          <div v-else class="text-[#999]">{{ '请先填写参数名' }}</div>
        </template>
        <template v-else-if="column.dataIndex === 'value'">
          <template v-if="record.name">
            <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>
            <template v-else>
              <a-tree-select
                v-if="record.from == dataFromType.table"
                v-model:value="record.value"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                tree-default-expand-all
                :tree-data="tableComp"
              />
              <a-tree-select
                v-if="record.from == dataFromType.search"
                v-model:value="record.value"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                tree-default-expand-all
                :tree-data="searchComp"
              />
              <a-tree-select
                v-if="record.from == dataFromType.tree"
                v-model:value="record.value"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                tree-default-expand-all
                :tree-data="treeComp"
              />
              <a-tree-select
                v-if="record.from == dataFromType.form"
                v-model:value="record.value"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                tree-default-expand-all
                :tree-data="formsComp"
              />
            </template>
          </template>
          <div v-else class="text-[#999]">{{ '请先填写参数名' }}</div>
        </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
      isLeftMenu
    />
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, inject, onMounted } from 'vue';
  import { ApiConfig } from '/@/components/ApiConfig';
  import type { TreeSelectProps } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { getCurPageComponents, getTableComponents } from '../../types/tool';
  import { dataFromType } from '../../types/index';
  import { type SelectProps } from 'ant-design-vue';

  import { cloneDeep } from 'lodash-es';
  const tableComp = ref<TreeSelectProps['treeData']>([]);
  const searchComp = ref<TreeSelectProps['treeData']>([]);
  const formsComp = ref<TreeSelectProps['treeData']>([]);
  const treeComp = ref<TreeSelectProps['treeData']>([]);
  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: 'from',
      align: 'center',
      width: 260,
    },
    {
      title: '参数值',
      dataIndex: 'value',
      align: 'center',
      width: 260,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 80,
      align: 'center',
    },
  ]);
  const options1 = ref<SelectProps['options']>([
    {
      value: dataFromType.table,
      label: '表格组件',
    },
    {
      value: dataFromType.search,
      label: '查询组件',
    },
    {
      value: dataFromType.tree,
      label: '树形组件',
    },
    {
      value: dataFromType.form,
      label: '表单组件',
    },
  ]);
  const props = defineProps({
    list: Array,
    iframeConfigDia: Boolean,
    dataKey: String,
  });

  const widgetForm = inject('widgetForm', ref<any>([]));
  const visible = ref(props.iframeConfigDia);
  const tableKey = ref(0);
  const apiConfigDialog = ref(false);
  const data = ref<any[]>(cloneDeep(props.list) || []);
  const configIndex = ref<number>(0);
  const formList = ref([]);

  const emit = defineEmits(['update:iframeConfigDia', 'update:list']);

  onMounted(() => {
    getTableComponents(widgetForm.value, formList.value);
    getCurPageComponents(
      formList.value,
      tableComp.value,
      searchComp.value,
      formsComp.value,
      treeComp.value,
      props.dataKey,
    );
    console.log(data.value, 'data.value');
    data.value.forEach((o) => {
      if (o.from == dataFromType.search) {
        let value = JSON.parse(o.value);
        let isHas = false;
        if (searchComp.value?.length) {
          for (let i = 0; i < searchComp.value.length; i++) {
            let j = searchComp.value[i];
            let obj = j.children?.find((k) => {
              let field = JSON.parse(k.value).bindField;
              return field == value?.bindField;
            });
            if (obj) {
              isHas = true;
              break;
            }
          }
        }
        if (!isHas) {
          o.value = null;
        }
      }
    });
  });

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

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

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

  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>
