<template>
  <!-- 配置列 -->
  <div class="table-box" :key="renderKey">
    <div class="table-item head">
      <div
        class="item"
        :style="getWidthStyle(columnItem.width)"
        v-for="(columnItem, columnIndex) in formState.columns"
        :key="columnIndex"
        >{{ columnItem.title }}</div
      >
    </div>
    <template v-if="apiColumns.length > 0">
      <div v-for="(dataItem, index) in apiColumns" :key="index">
        <div class="table-item">
          <div
            class="item"
            :style="getWidthStyle(columnItem.width)"
            v-for="(columnItem, columnIndex) in formState.columns"
            :key="columnIndex"
          >
            <div v-if="columnItem.dataIndex == 'label'">
              {{ dataItem.label }}
            </div>
            <div v-else-if="columnItem.dataIndex == 'dataIndex'">
              <a-select
                v-model:value="dataItem.dataIndex"
                style="width: 100%"
                :options="formState.apiOptions"
              />
            </div>
            <div v-else-if="columnItem.dataIndex == 'title'">
              <div v-if="dataItem.title.includes('value-')">无需填写</div>
              <a-input v-else v-model:value="dataItem.title" style="width: 100%" />
            </div>
            <div v-else-if="columnItem.dataIndex == 'width'">
              <div v-if="dataItem.title.includes('value-')">无需填写</div>
              <a-input-number v-else v-model:value="dataItem.width" style="width: 100%" />
            </div>
            <div class="icon-box" v-else-if="columnItem.dataIndex == 'action'">
              <div v-if="dataItem.title.includes('value-') || index == 0"></div>
              <div class="delete-icon" @click="deleteItem(index)" v-else>删除</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="kong-box" v-else> <EmptyBox /></div>
  </div>
  <div class="action-box" @click="addColumns"
    ><PlusOutlined class="jia-icon" /><span class="action-text">{{ t('新增副选项') }}</span></div
  >
  <!-- 新增副选项 -->
  <a-modal
    :visible="apiColumnData.visible"
    :title="t('新增副选项')"
    :width="600"
    :maskClosable="false"
    :okText="t('确定')"
    :cancelText="t('取消')"
    @ok="submitColumn"
    @cancel="closeColumn"
  >
    <div class="model-box">
      <NodeHead nodeName="基本信息" class="node-title" />
      <a-form
        :model="apiColumnData"
        name="apiColumn"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 24 }"
        layout="vertical"
        autocomplete="off"
        ref="StaticColumnFormRef"
      >
        <a-form-item
          label="名称"
          name="label"
          :rules="[{ required: true, message: '请填写副选项名称!' }]"
        >
          <a-input v-model:value="apiColumnData.label" placeholder="请填写副选项名称" />
        </a-form-item>
        <div class="tip-box">
          <div class="tip-icon-box">
            <div class="icon-box">!</div>
            <div class="title-box">提示</div>
          </div>
          <div>
            新增列会自动在列表中添加选项名和选项值，在列表中进行删除选项名列操作也会同步删除选项值列。</div
          >
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, watch, ref } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { ApiColumnItem } from '/@/model/generator/treeStructure';
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { TreeStructureType } from '/@/enums/treeStructure';
  const { t } = useI18n();
  const { notification } = useMessage();
  let renderKey = ref(0);
  const emits = defineEmits(['change', 'deleteApiColumn']);
  let props = withDefaults(
    defineProps<{
      apiColumnOptions: Array<ApiColumnItem>;
      apiColumns: Array<ApiColumnItem>;
    }>(),
    {
      apiColumnOptions: () => {
        return [];
      },
    },
  );
  watch(
    () => props.apiColumnOptions,
    (val) => {
      if (Array.isArray(val) && val.length > 0) {
        formState.apiOptions = val;
        renderKey.value++;
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
  const formState = reactive({
    type: TreeStructureType.API,
    apiOptions: [] as Array<ApiColumnItem>,
    columns: [
      {
        title: '树结构项名称',
        dataIndex: 'label',
        key: 'label',
        width: 120,
      },
      {
        title: '接口返回出参字段名',
        dataIndex: 'dataIndex',
        key: 'dataIndex',
        width: 0,
      },
      {
        title: '表头名称',
        dataIndex: 'title',
        key: 'title',
        width: 160,
      },
      {
        title: '列表宽度',
        dataIndex: 'width',
        key: 'width',
        width: 160,
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 80,
      },
    ],
    data: [
      {
        dataIndex: '',
        label: '主选项名',
        title: 'label-0',
        width: 120,
      },
      {
        dataIndex: '',
        label: '主选项值',
        title: 'value-0',
        width: 120,
      },
    ] as Array<ApiColumnItem>,
  });
  const apiColumnData = reactive({
    visible: false,
    label: '',
  });
  function getWidthStyle(width) {
    if (width == 0) {
      return 'flex:1;';
    } else {
      return 'width:' + width + 'px;';
    }
  }
  function addColumns() {
    apiColumnData.visible = true;
  }
  function submitColumn() {
    if (apiColumnData.label) {
      emits('change', apiColumnData.label);
    } else {
      notification.error({
        message: t('提示'),
        description: t('副选项名称未填写'),
      });
    }
    closeColumn();
  }
  function closeColumn() {
    apiColumnData.visible = false;
  }
  function deleteItem(index) {
    emits('deleteApiColumn', index);
  }
</script>

<style lang="less" scoped>
  .table-box {
    width: 100%;
    margin-top: 20px;
    overflow-x: scroll;
    white-space: nowrap;

    .child1 {
      width: 100%;
      padding-left: 14px;
    }

    .table-item {
      width: 100%;
      display: flex;
      line-height: 40px;
      border-bottom: 1px solid #ececec;

      .item {
        height: 50px;
        line-height: 50px;
        color: #6e6a6e;
        font-size: 14px;
        margin: 0 4px;
        width: 120px;
        text-align: center;
      }

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

      .jia-icon {
        color: @primary-color;
        font-weight: 700;
        margin: 0 10px;
        font-size: 12px;
      }

      .pick-icon {
        margin: 0 4px;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .head {
      background-color: #f9f9f9;
      border: none;
    }
  }

  .kong-box {
    margin: 10px 0;
    height: 200px;
  }

  .action-box {
    width: 100%;
    border: 1px dotted #d8d8d8;
    color: #65696b;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

  .button-box {
    display: flex;
    justify-content: flex-end;

    button {
      margin: 0 4px;
      font-size: 12px;
    }
  }

  .model-box {
    padding: 16px;
  }

  .tip-box {
    background: rgb(255 119 0 / 8%);
    border-radius: 4px;
    border: 1px solid #f70;
    font-size: 14px;
    color: #333;
    padding: 20px;
    margin-bottom: 120px;

    .tip-icon-box {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .icon-box {
        width: 18px;
        height: 18px;
        background: #f70;
        border-radius: 50%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title-box {
        font-weight: bold;
        font-size: 16px;
        color: #333;
        margin-left: 10px;
      }
    }
  }
</style>
