<template>
  <div v-for="(dataItem, index) in data" :key="index">
    <div class="table-item">
      <div
        class="item"
        :style="getWidthStyle(columnItem.width)"
        v-for="(columnItem, columnIndex) in columns"
        :key="columnIndex"
      >
        <div :style="getPaddingLeftStyle(dataItem.key)" v-if="columnItem.dataIndex == 'title'">
          <div class="row"
            ><div class="icon-box pick-icon"
              ><MinusOutlined
                v-if="dataItem.expand"
                @click.stop="dataItem.expand = !dataItem.expand"
              />
              <PlusOutlined v-else @click.stop="dataItem.expand = !dataItem.expand" />
            </div>
            <a-input v-model:value="dataItem[columnItem.dataIndex]" style="width: 120px" />
          </div>
        </div>
        <div v-else-if="columnItem.dataIndex == 'dataIndex'" class="row">
          <a-select
            v-model:value="dataItem.dataIndex"
            :options="props.sourceData"
            :fieldNames="{ label: 'label', value: 'columnName' }"
            style="width: 100%"
            :disabled="dataItem.children.length > 0"
            @change="
              (_val, option) => {
                dataItem.title = option.label;
              }
            "
          />
        </div>
      </div>
      <div class="row icon-box" :style="getActionWidthStyle(160)">
        <span class="jia-icon" @click.stop="changeDataItem(dataItem)">添加子列</span
        ><span class="delete-icon" @click.stop="deleteDataItem(dataItem)">删除</span>
      </div>
    </div>
    <div v-if="dataItem.children.length > 0 && dataItem.expand">
      <MergingDynamicTable
        :sourceData="sourceData"
        :columns="columns"
        :data="dataItem.children"
        @changeDataItem="changeDataItem"
        @deleteDataItem="deleteDataItem"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import MergingDynamicTable from './MergingDynamicTable.vue';
  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { ListHeaderMergingItem } from '/@/model/generator/listConfig';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  interface ColumnItem {
    title: string;
    dataIndex: string;
    key: string;
    width: number;
  }
  const props = defineProps({
    columns: Array<ColumnItem>,
    data: Array<ListHeaderMergingItem>,
    sourceData: Array<BasicColumn>,
  });
  const emits = defineEmits(['changeDataItem', 'deleteDataItem']);
  function changeDataItem(dataItem) {
    emits('changeDataItem', dataItem);
  }
  function deleteDataItem(dataItem) {
    emits('deleteDataItem', dataItem);
  }
  function getWidthStyle(width: number) {
    return 'min-width:' + width + 'px;flex-basis:' + width + 'px;flex:1;';
  }
  function getActionWidthStyle(width: number) {
    return 'min-width:' + width + 'px;';
  }
  function getPaddingLeftStyle(key) {
    let multipleNum = key.split('-').length;
    return 'padding-left: ' + multipleNum * 12 + 'px;';
  }
</script>

<style lang="less" scoped>
  .table-item {
    width: 100%;
    display: flex;
    line-height: 40px;
    border-bottom: 1px solid #ececec;

    .item {
      display: flex;
      height: 50px;
      padding-left: 20px;
      align-items: center;
      color: #6e6a6e;
      font-size: 14px;
      margin: 0 4px;
      width: 120px;

      .row {
        display: flex;
        align-items: center;
        width: 100%;

        .icon-box {
          width: 18px;
          height: 18px;
          background: #fff;
          border-radius: 4px;
          border: 1px solid #ddd;
          padding: 5px;
          margin-right: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .delete-icon {
      color: @clear-color;
      margin: 0 10px;
      font-size: 14px;
      cursor: pointer;
    }

    .jia-icon {
      color: @primary-color;
      margin: 0 10px;
      font-size: 14px;
      cursor: pointer;
    }

    .pick-icon {
      margin: 0 4px;
      font-size: 8px;
      cursor: pointer;
      color: #333;
    }
  }

  .head {
    background-color: #f9f9f9;
    border: none;
  }
</style>
