<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%">
            <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'">
          <ApiSelect v-model:value="record[column.dataIndex]" :exampleStr="exampleStr" />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span style="color: #ff8080; cursor: pointer" @click="deleteEvent(index)"> 删除 </span>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import ApiSelect from '../ApiSelect.vue';
  import { cloneDeep } from 'lodash-es';
  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 visible = ref(props.iframeConfigDia);
  const tableKey = ref(0);

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

  const emit = defineEmits(['update:iframeConfigDia', 'update:list']);
  const exampleStr = JSON.stringify({
    code: 0,
    msg: '提示信息',
    data: '内容',
  });

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

  const addConfig = () => {
    data.value.push({
      name: data.value.length ? '' : '@id',
      value: '',
      type: 'api',
      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>
