<script setup lang="ts">
import { onBeforeMount, Ref, ref } from 'vue';
import { SearchOutlined, ExportOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { deepCopy, IParam, IActionParam, EditorBase, IContext, PickupView, isExistAndNotEmpty } from '@core';
interface DataPickerProps {
  /**
   * @description 编辑器名称
   */
  name: string;

  /**
   * @description 值项
   */
  valueItem?: string;

  /**
   * @description 编辑器值
   */
  value?: any;

  /**
   * @description 禁用
   */
  disabled?: boolean;

  /**
   * @description 只读
   */
  readonly?: boolean;

  /**
   * @description 占位提示信息
   */
  placeholder?: string;

  /**
   * @description 表单数据或表格行数据
   */
  data?: IParam;

  /**
   * @description 上下文
   */
  context?: IContext;

  /**
   * @description 视图参数
   */
  viewParams?: IParam;

  /**
   * @description 局部上下文
   */
  localContext?: IParam;

  /**
   * @description 局部视图参数
   */
  localParam?: IParam;

  /**
   * @description 主信息属性
   */
  deMajorField: string;

  /**
   * @description 主键属性
   */
  deKeyField: string;

  /**
   * @description 选择视图
   */
  pickUpView?: string;

  /**
   * @description 链接视图
   */
  linkView?: IParam;

  /**
   * @description ac参数
   */
  acParams?: IParam;

  /**
   * @description 排序
   */
  sort?: string;

  /**
   * @description 分割符
   */
  separator?: string;

  /**
   * @description 部件服务
   */
  service?: any;

  /**
   * @description 外键值附加数据
   */
  pickUpData?: string;

  /**
   * @description 仅链接
   */
  linkOnly?: boolean;

  /**
   * @description 支持AC
   */
  isAC?: boolean;

  /**
   * @description 无AC
   */
  noAc?: boolean;

  /**
   * @description 显示按钮
   */
  showButton?: boolean;

  /**
   * @description 是否下拉
   */
  isDropdown?: boolean;
}
interface EditorEmit {
  (name: 'editorEvent', value: IActionParam): void;
}
const props = withDefaults(defineProps<DataPickerProps>(), {
  deMajorField: 'srfmajortext',
  deKeyField: 'srfkey',
  linkOnly: false,
  isAC: false,
  isDropdown: false,
  separator: ';',
});
const emit = defineEmits<EditorEmit>();
const { handleEditorNavParams, openLinkView, openPickUpView } = new EditorBase();
const { navContext, navViewParam } = handleEditorNavParams(props);
let items: Ref<any[]> = ref([]);

/**
 * @description 初始化items
 */
const initItems = () => {
  if (props.valueItem && props.data) {
    items.value.push({
      [props.deMajorField!]: props.value,
      [props.deKeyField!]: props.data[props.valueItem],
    });
  }
};

/**
 * @description 填充外键值附加数据
 * @param item 选中数据
 */
const fillPickUpData = (item: IParam) => {
  if (props.pickUpData) {
    let pickUpDataArray: string[] = props.pickUpData.split(';');
    if (pickUpDataArray && pickUpDataArray.length > 0) {
      for (let i = 0; i < pickUpDataArray.length; i++) {
        if (item) {
          emit('editorEvent', {
            tag: pickUpDataArray[i],
            action: 'valueChange',
            data: item[pickUpDataArray[i]],
          });
        } else {
          emit('editorEvent', {
            tag: pickUpDataArray[i],
            action: 'valueChange',
            data: null,
          });
        }
      }
    }
  }
};

/**
 * @description 搜索
 * @param value 搜索值
 */
const onSearch = (value: string) => {
  let _navContext = deepCopy(navContext);
  let _navViewParam = deepCopy(navViewParam);
  Object.assign(_navViewParam, { query: value, size: 1000 });
  if (props.sort) {
    Object.assign(_navViewParam, { sort: props.sort });
  }
  if (!props.service) {
    App.getNotificationService().warning({ message: '获取数据失败', desription: '部件服务不存在' });
  } else if (!props.acParams) {
    App.getNotificationService().warning({ message: '获取数据失败', desription: '查询参数不存在' });
  } else {
    const { serviceName, interfaceName } = props.acParams;
    props.service
      .getItems(serviceName, interfaceName, _navContext, _navViewParam)
      .then((response: any) => {
        if (!response) {
          App.getNotificationService().warning({ message: '获取数据失败', desription: '' });
          return;
        }
        items.value = [...response];
      })
      .catch((error: any) => {
        App.getNotificationService().warning({ message: '获取数据失败', desription: error?.message });
      });
  }
};

const filterOption = (inputValue: string, option: IParam) => {
  return option[props.deMajorField].toUpperCase().indexOf(inputValue.toUpperCase()) >= 0;
};

//  选中
const onSelect = (value: any) => {
  const selectItem = items.value.find((item: IParam) => Object.is(item[props.deKeyField!], value));
  emit('editorEvent', {
    tag: props.name,
    action: 'valueChange',
    data: selectItem[props.deMajorField!],
  });
  if (props.valueItem) {
    emit('editorEvent', { tag: props.valueItem, action: 'valueChange', data: selectItem[props.deKeyField!] });
  }
  fillPickUpData(selectItem);
};

//  清空值
const clear = (value: any) => {
  emit('editorEvent', {
    tag: props.name,
    action: 'valueChange',
    data: null,
  });
  if (props.valueItem) {
    emit('editorEvent', { tag: props.valueItem, action: 'valueChange', data: null });
  }
};

// 编辑器抛值
const doEditorEmit = (data: any[]): any => {
  let majorValue: any = '';
  let keyValue: any = '';
  data.forEach((item: any) => {
    majorValue = item[props.deMajorField]
      ? majorValue + (majorValue ? props.separator : '') + item[props.deMajorField]
      : majorValue + (majorValue ? props.separator : '') + item['srfmajortext'];
    keyValue = item[props.deKeyField]
      ? keyValue + (keyValue ? props.separator : '') + item[props.deKeyField]
      : keyValue + (keyValue ? props.separator : '') + item['srfkey'];
  });
  if (props.valueItem) {
    emit('editorEvent', { tag: props.valueItem, action: 'valueChange', data: keyValue });
  }
  emit('editorEvent', { tag: props.name, action: 'valueChange', data: majorValue });
  return;
};

// 打开视图
const openView = () => {
  if (!props.pickUpView) {
    return;
  }
  const view = App.getViewInfo(props.pickUpView);
  if (!view) {
    return;
  }
  const params: IParam = {};
  //  选中数据
  const selectedData: IParam = {};
  //  值项
  if (props.data && props.valueItem && isExistAndNotEmpty(props.data[props.valueItem])) {
    Object.assign(selectedData, { srfkey: props.data[props.valueItem] });
  }
  if (isExistAndNotEmpty(props.value)) {
    Object.assign(selectedData, { srfmajortext: props.value });
  }

  //  导航参数
  const tempViewParams = deepCopy(navViewParam);
  Object.assign(tempViewParams, { selectedData: [selectedData] });

  if (!Object.is(view.openMode, 'POPOVER') && !Object.is(view.openMode, 'POPOVER')) {
    Object.assign(params, { openMode: 'POPUPMODAL' });
  }

  Object.assign(params, {
    context: deepCopy(navContext),
    viewParams: tempViewParams
  });
  const subject = App.getOpenViewService().openView(view, params);
  const subjectEvent = subject?.subscribe((data: any) => {
    if (data?.ret == 'OK' && data.resultData) {
      doEditorEmit(data.resultData);
    }
    subjectEvent?.unsubscribe();
  });
};

const onChange = (date: string, dateString: string) => {
  // todo
};
</script>

<template>
  <template v-if="linkOnly" :class="['app-editor-container', 'app-data-picker', `app-data-picker-${name}`]">
    <a @click="openLinkView"></a>
  </template>
  <template v-else-if="!isAC && !isDropdown">
    <a-auto-complete
      :class="['app-editor-container', 'app-data-picker', `app-data-picker-${name}`]"
      v-model:value="value"
      :placeholder="placeholder"
      :options="items"
      :filterOption="filterOption"
      :disabled="disabled || readonly"
      @search="onSearch"
      :defaultOpen="true"
    >
      <template #option="option">
        <div @click="onSelect(option[deKeyField!])">{{ option[deMajorField!] }}</div>
      </template>
      <a-input :placeholder="placeholder">
        <template #suffix>
          <CloseCircleOutlined @click="clear" />
          <SearchOutlined v-if="pickUpView" class="certain-category-icon" @click="openView" />
          <ExportOutlined v-if="linkView" @click="openLinkView" />
        </template>
      </a-input>
    </a-auto-complete>
  </template>
  <template v-else-if="noAc">
    <a-input :class="['app-editor-container', 'app-data-picker', `app-data-picker-${name}`]" :placeholder="placeholder">
      <template #suffix>
        <SearchOutlined v-if="pickUpView && showButton" class="certain-category-icon" @click="openView" />
        <ExportOutlined v-if="linkView" @click="openLinkView" />
      </template>
    </a-input>
  </template>
  <template v-else-if="isDropdown">
    <a-select
      :class="['app-editor-container', 'app-data-picker', `app-data-picker-${name}`]"
      showSearch
      v-model:value="value"
      :disabled="disabled"
      :filterOption="false"
      @change="onChange"
      @search="onSearch"
      :placeholder="placeholder"
    >
      <template #suffixIcon>
        <CloseCircleOutlined @click="clear" />
        <SearchOutlined v-if="pickUpView" @click="openPickUpView" />
        <ExportOutlined v-if="linkView" @click="openLinkView" />
      </template>
      <a-select-option v-for="(item, index) in items" :key="index" :value="item[deKeyField!]">
        {{ item[deMajorField!] }}
      </a-select-option>
    </a-select>
  </template>
</template>

<style scoped lang="scss">
.app-data-picker {
  .anticon {
    padding: 0 3px;
  }
  .anticon-close-circle {
    display: none;
  }
  &:hover {
    .anticon-close-circle {
      display: block;
    }
  }
}
</style>
