<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 == 'label'">
          <div class="row"
            ><div class="icon-box pick-icon"
              ><MinusOutlined v-if="dataItem.expand" @click="dataItem.expand = !dataItem.expand" />
              <PlusOutlined v-else @click="dataItem.expand = !dataItem.expand" />
            </div>
            {{ dataItem[columnItem.dataIndex] }}
          </div>
        </div>
        <div v-else-if="columnItem.dataIndex == 'value'">
          {{ dataItem.value }}
        </div>
        <div v-else>
          <a-input v-model:value="dataItem[columnItem.dataIndex]" style="width: 100%" />
        </div>
      </div>
      <div class="icon-box" :style="getActionWidthStyle(160)">
        <span class="jia-icon" @click="changeDataItem(dataItem)">新增父级</span
        ><span class="delete-icon" @click="deleteDataItem(dataItem)">删除</span>
      </div>
    </div>
    <div v-if="dataItem.children.length > 0 && dataItem.expand">
      <DynamicTable
        :columns="columns"
        :data="dataItem.children"
        @changeDataItem="changeDataItem"
        @deleteDataItem="deleteDataItem"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import DynamicTable from './DynamicTable.vue';
  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { StaticDataItem } from '/@/model/generator/treeStructure';
  interface ColumnItem {
    title: string;
    dataIndex: string;
    key: string;
    width: number;
  }
  defineProps({
    columns: Array<ColumnItem>,
    data: Array<StaticDataItem>,
  });
  const emits = defineEmits(['changeDataItem', 'deleteDataItem']);
  function changeDataItem(dataItem) {
    emits('changeDataItem', dataItem);
  }
  function deleteDataItem(dataItem) {
    emits('deleteDataItem', dataItem);
    // delete props.data[index];
  }
  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 * 7 + '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;

        .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>
