<template>
  <a-form
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16, style: { textAlign: 'right' } }"
    labelAlign="left"
  >
    <a-form-item :label="t('选项卡标题')" class="!mt-2" v-if="isShowTitle">
      <a-input v-model:value="config!.title" :placeholder="t('请输入选项卡标题')" />
    </a-form-item>
    <a-form-item
      :label="t('数据来源')"
      :labelCol="{
        span: 24,
        style: { lineHeight: '14px', paddingBottom: '10px' },
      }"
      :wrapper-col="{ style: { width: '100%' } }"
    >
      <a-radio-group
        class="!flex w-full"
        v-model:value="config!.datasourceType"
        button-style="solid"
        size="default"
        @change="handleRadioChange"
      >
        <a-radio-button value="tree">{{ t('树结构') }}</a-radio-button>
        <a-radio-button value="api">API</a-radio-button>
        <a-radio-button value="dic">{{ t('数据字典') }}</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <!-- <div v-if="config!.datasourceType === 'static'" class="static-box">
      <div v-if="!config!.staticData?.length" class="static-empty">
        {{ t('暂无数据') }}
      </div>
      <a-tree v-else block-node showIcon :tree-data="config!.staticData">
        <template #title="item">
          <div class="tree-node">
            <span>{{ item.title }}</span>
            <span>
              <Icon
                icon="ant-design:plus-outlined"
                @click="addTreeNode(item.key, item.title)"
                size="14"
                color="#999"
              />
              &nbsp;
              <Icon
                icon="ant-design:delete-outlined"
                size="14"
                color="#999"
                @click="delTreeNode(config!.staticData, item.key)"
              />
            </span>
          </div>
        </template>
      </a-tree>
      <div @click="addTreeNodeParent" class="add-box">
        <Icon icon="ant-design:plus-circle-outlined" />
        {{ t('添加父级') }}
      </div>
    </div> -->
    <div v-if="config!.datasourceType === 'tree'">
      <a-form-item :label="t('标题')" required>
        <a-select
          v-model:value="config!.treeConfig!.id"
          style="width: 100%; text-align: left"
          :options="treeSelectOption"
          :field-names="{ label: 'name', value: 'id', options: 'children' }"
          @change="changeTreeConfigId"
        />
      </a-form-item>
      <a-form-item :label="t('关联配置')" required>
        <div @click="changeTreeConfig()" class="inline-block w-full">
          <InputModel
            :value="config!.treeConfig!.configTip"
            :placeholder="t('配置关联配置')"
            style="width: 100%; min-width: 100px"
          />
        </div>
      </a-form-item>
      <a-form-item :label="t('允许多选')">
        <a-switch v-model:checked="config!.treeConfig!.isMultiple" />
      </a-form-item>
      <a-button type="primary" @click="resetTreeConfig()" style="width: 100%">重置</a-button>
    </div>
    <div v-if="config!.datasourceType === 'dic'">
      <a-form-item :label="t('数据选项')" required>
        <DicTreeSelect class="text-left" v-model:value="config!.dictionaryItemId" />
      </a-form-item>
    </div>
    <div v-if="config!.datasourceType === 'api'">
      <a-form-item :label="t('接口配置')" required>
        <div @click="showApiDialog" class="inline-block w-full">
          <InputModel
            :value="config!.apiConfig!.path"
            :placeholder="t('点击进行接口配置')"
            style="width: 100%; min-width: 100px"
          />
        </div>
      </a-form-item>
    </div>
    <template v-if="config!.datasourceType != 'tree'">
      <a-form-item :label="t('关联字段')" required>
        <a-select
          v-model:value="config!.listFieldName"
          style="width: 100%; text-align: left"
          :options="selectOption"
        />
      </a-form-item>
      <a-form-item :label="t('树形标题')">
        <a-input v-model:value="config!.menuName" :placeholder="t('请输入树形标题')" />
      </a-form-item>
      <div v-if="config!.datasourceType === 'dic'">
        <a-form-item :label="t('图标')">
          <IconPicker v-model:value="config!.childIcon" :disabled="false" :readonly="false" />
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item :label="t('父级图标')">
          <IconPicker v-model:value="config!.parentIcon" :disabled="false" :readonly="false" />
        </a-form-item>
        <a-form-item :label="t('子级图标')">
          <IconPicker v-model:value="config!.childIcon" :disabled="false" :readonly="false" />
        </a-form-item>
      </div>
    </template>
  </a-form>
</template>
<script setup lang="ts">
  import { InputModel } from '/@/components/ApiConfig';
  import { DicTreeSelect } from '/@/components/DicTreeSelect';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { IconPicker } from '/@/components/Icon';

  defineProps({
    config: Object,
    isShowTitle: Boolean,
    treeSelectOption: Array,
    selectOption: Array,
  });

  const { t } = useI18n();
  const emits = defineEmits([
    'handleRadioChange',
    'changeTreeConfigId',
    'changeTreeConfig',
    'resetTreeConfig',
    'showApiDialog',
  ]);

  const handleRadioChange = (info) => {
    emits('handleRadioChange', info);
  };

  const changeTreeConfigId = (id) => {
    emits('changeTreeConfigId', id);
  };

  const changeTreeConfig = () => {
    emits('changeTreeConfig');
  };

  const resetTreeConfig = () => {
    emits('resetTreeConfig');
  };

  const showApiDialog = () => {
    emits('showApiDialog');
  };
</script>
