<template>
  <div v-if="formConfig.currentItem.componentCode == 'view-select'">
    <a-form-item label="选择视图:">
      <a-select
        show-search
        allowClear
        v-model:value="formConfig.currentItem.formItemView.viewId"
        placeholder="请选择字视图"
        style="width: 100%"
        :filter-option="filterOption"
        @change="viewIdChange"
      >
        <a-select-option :value="vItem.viewId" v-for="vItem in viewSelectList" :label="vItem.viewName">{{
          vItem.viewName
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="值字段选择:">
      <a-select
        v-model:value="formConfig.currentItem.formItemView.valueFieldCode"
        show-search
        allowClear
        placeholder="值字段选择"
        style="width: 100%"
        :filter-option="filterOption"
      >
        <a-select-option :value="fItem.fieldName" v-for="(fItem, fIndex) in viewValueFieldList" :key="fIndex" :label="fItem.showName">{{
          fItem.showName
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="展示字段选择:">
      <a-select
        v-model:value="formConfig.currentItem.formItemView.labelFieldCode"
        show-search
        allowClear
        placeholder="展示字段选择"
        style="width: 100%"
        :filter-option="filterOption"
      >
        <a-select-option :value="sItem.fieldName" v-for="(sItem, sIndex) in viewShowFieldList" :key="sIndex" :label="sItem.showName">{{
          sItem.showName
        }}</a-select-option>
      </a-select>
    </a-form-item>
  </div>
</template>

<script setup name="ViewSelectAttr">
import { inject, onMounted, ref } from 'vue';
import { FormDesignApi } from '../../api/FormDesignApi';

const formConfig = inject('formConfig');
// 视图选择列表
const viewSelectList = inject('viewSelectList');

// 视图值字段选择列表
const viewValueFieldList = ref([]);
// 视图展示字段选择列表
const viewShowFieldList = ref([]);

onMounted(() => {
  if (formConfig.value.currentItem?.formItemView?.viewId) {
    getViewFieldList(formConfig.value.currentItem?.formItemView?.viewId);
  }
});

// 获取视图字段选择列表
const getViewFieldList = viewId => {
  FormDesignApi.getViewFieldList({ viewId: viewId }).then(res => {
    viewValueFieldList.value = res;
    viewShowFieldList.value = [...res];
  });
};

// 视图改变
const viewIdChange = viewId => {
  if (viewId) {
    getViewFieldList(viewId);
  } else {
    formConfig.value.currentItem.formItemView = {};
    viewValueFieldList.value = [];
    viewShowFieldList.value = [];
  }
};

// 自定义过滤
const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>

<style></style>
