<template>
  <div v-if="formConfig.currentItem.componentCode == 'custom-select'">
    <a-form-item label="数据来源:">
      <a-radio-group buttonStyle="solid" v-model:value="formConfig.currentItem.formItemSelect.dataFromType" class="fleid-col">
        <a-radio-button :value="1">动态接口</a-radio-button>
        <a-radio-button :value="2">自定义填充</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="formConfig.currentItem.formItemSelect.dataFromType == 1">
      <template #label>
        接口URL
        <a-tooltip>
          <template #title>填写后端接口路径，例如：/my/user/selectList<br/>注意：响应参数返回List&lt;SimpleDict&gt;格式，否则前端无法渲染列表</template>
          <question-circle-filled />
        </a-tooltip>
        ：
      </template>
      <a-input v-model:value="formConfig.currentItem.formItemSelect.backendUrl" placeholder="请输入接口URL" />
    </a-form-item>
    <a-form-item label="取值类型:">
      <a-select v-model:value="formConfig.currentItem.formItemSelect.valueType" placeholder="请选择取值类型" style="width: 100%">
        <a-select-option :value="1">取ID</a-select-option>
        <a-select-option :value="2">取编码</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="关联的字段编码:" v-if="formConfig.currentItem.formItemSelect.dataFromType == 1">
      <a-tree-select
        v-model:value="formConfig.currentItem.formItemSelect.linkFieldCode"
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择"
        allow-clear
        :tree-data="formConfig.formItems"
        tree-node-filter-prop="itemLabelName"
        :fieldNames="{ children: 'children', label: 'itemLabelName', key: 'fieldCode', value: 'fieldCode' }"
      >
      </a-tree-select>
    </a-form-item>
  </div>
</template>

<script setup name="CustomSelectAttr">
import { inject } from 'vue';

const formConfig = inject('formConfig');
</script>

<style></style>
