<template>
  <div v-if="props.data.component === 'Card'">
    <a-row style="width: 100%">
        <a-col :span="props.data?.colProps?.span || 24" style="padding: 10px">
          <a-card
            :title="props.data.label"
            :class="
            props.data.shadow === 'always' ? 'card-always' : props.data.shadow === 'hover' ? 'card-hover' : ''
            "
          >
            <template v-for="(childItem, childIndex) in props.data.columns[0].children" :key="childIndex">
              <a-row style="width: 100%; margin-bottom: 10px">
                <a-col :span="childItem?.colProps?.span || 24">
                  <CallModalFormItem :data="childItem" :dataKey="props.dataKey" :values="props.values"/>
                </a-col>
              </a-row>
            </template>
          </a-card>
        </a-col>
      </a-row>
  </div>
  <a-table
    class="sub-table"
    :columns="subTableColumns"
    :data-source="props.values[props.dataKey][props.data.field]"
    :pagination="false"
    v-else-if="subTableId"
    :scroll="scrollValue"
  >
    <template #headerCell="{ column, record }">
      <template v-if="column.key === 'setting'">
        <PlusOutlined class="icon-button" @click="addListItem"/>
      </template>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'setting'">
        <DeleteOutlined
          class="icon-button"
          @click="delListItem(column, record)"
        />
      </template>
      <template v-else>
        <FormItem :data="column" :record="record" />
      </template>
    </template>
  </a-table>
  <div style="display: flex;" v-else-if="props.data.component !== 'InputGuid'">
    <div style="width: 85px;">
      {{ props.data.label }}
    </div>
    <Comp
      v-if="props.data.component === 'Switch'"
      :options="props.data.componentProps.options"
      v-model:checked="props.values[props.dataKey][props.data.field]"
    />
    <Comp
      v-else
      :style="props.data.component === 'Select' ? 'width:120px' : ''"
      :options="props.data.componentProps.options"
      v-model:value="props.values[props.dataKey][props.data.field]"
    />
  </div>
  
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, ref } from 'vue';
  import { componentMap } from '@/components/Form/src/componentMap';
  import CallModalFormItem from './index.vue'
  import { v4 as uuidv4 } from 'uuid';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue'

  const props = defineProps(['data', 'dataKey','values']);

  const Comp = componentMap.get(props.data.component);
  const subTableId = ref(null);
  const scrollValue = ref();
  const subTableData = ref([]);
  const subTableList = ref([])
  const subTableColumns: any = ref([
    {
      dataIndex: 'setting',
      key: 'setting',
      fixed: 'left',
      width: 60,
    },
  ])
  if (props.data.type === 'subTable') {
    subTableId.value = props.data.field;
    let tableData = [];
    props.data.columns.forEach((itemColumn) => {
      itemColumn.children.forEach((itemColumnChild) => {
        tableData.push(itemColumnChild);
        subTableColumns.value.push({
          key: itemColumnChild.field,
          title: itemColumnChild.label,
          dataIndex: itemColumnChild.field,
          ...itemColumnChild,
          width: 120,
        });
      });
    });
    scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
    subTableData.value = tableData;
  }
  const addListItem = () => {
    let keyValue = uuidv4();
    let emptyItem = { key: keyValue };
    subTableData.value.map((item) => {
      if (item.component == 'InputGuid') {
        emptyItem[item.field] = keyValue;
      } else {
        emptyItem[item.field] = '';
      }
    });

    props.values[props.dataKey][props.data.field].push(emptyItem);
  };
  const delListItem = (column, record) => {
    props.values[props.dataKey][props.data.field] = props.values[props.dataKey][props.data.field].filter((item) => item.key != record.key);
  };
</script>

<style lang="scss" scoped></style>
