<script setup lang="ts">
import { IParam, EditorBase, IContext, DataTypes, isExistAndNotEmpty } from "@core";
import moment from "moment";
import { onBeforeMount, ref, Ref } from "vue";
interface SpanProps {
  /**
   * 当前值
   *
   * @type {*}
   * @memberof AppSpan
   */
  value?: string;

  /**
   * 传入表单数据
   *
   * @type {*}
   * @memberof AppSpan
   */
  data?: IParam;

  /**
   * 数据类型
   *
   * @type {string}
   * @memberof AppSpan
   */
  dataType?: number;

  /**
   * 单位名称
   *
   * @type {string}
   * @memberof AppSpan
   */
  unitName?: string;

  /**
   * 精度
   *
   * @type {number}
   * @memberof AppSpan
   */
  precision?: number;

  /**
   * 数据值格式化
   *
   * @type {string}
   * @memberof AppSpan
   */
  valueFormat?: string;

  /**
   * 当前表单项名称
   *
   * @type {*}
   * @memberof AppSpan
   */
  name?: string;

  /**
   * @description 代码表标识
   */
  codeListTag?: string;

  /**
   * @description 代码表类型
   */
  codeListType?: string;

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

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

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

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

const props = withDefaults(defineProps<SpanProps>(), {
  unitName: "",
  precision: 2,
  dataType: 0
});
const { handleEditorNavParams, loadCodeListData } = new EditorBase();
const { navContext, navViewParam } = handleEditorNavParams(props);
//  数据类型
const dataTypeValue = computed(() => {
  return DataTypes.toString(props.dataType);
})
let text: Ref<string> = ref("");
let textFormat: Ref<string> = ref("");
//  初始化值
const initText = () => {
  if (props.codeListTag) {
    loadCodeListData(
      props.codeListTag as string,
      navContext,
      navViewParam
    ).then((codeListData: IParam[]) => {
      const item: IParam | undefined = codeListData.find((item) =>
        Object.is(item.value, props.value)
      );
      if (item) {
        text.value = item.label;
      } else {
        text.value = props.value as string;
      }
    });
  } else {
    text.value = props.value as string;
  }
  if (props.valueFormat) {
    textFormat.value = props.valueFormat;
  } else if (DataTypes.isDate(dataTypeValue.value)) {
    textFormat.value = "YYYY-MM-DD HH:mm:ss";
  } else if (DataTypes.isNumber(dataTypeValue.value)) {
    textFormat.value = `#${props.unitName}`;
  }
}

const getFormatDate = () => {
  if (!isExistAndNotEmpty(props.value)) {
    return '';
  }
  const value = moment(props.value).format(textFormat.value);
  if (value !== 'Invalid date') {
    return value;
  }
  return props.value;
}

onBeforeMount(() => {
  //  监听值变化
  watch(() => props.value, (newVal: any, oldVal: any) => { if (newVal !== oldVal) initText(); });
  initText();
});
</script>

<template>
  <div :class="['app-editor-container', 'app-span', `app-span-${name}`]">
    <span v-if="DataTypes.isDate(dataTypeValue)">{{getFormatDate()}}</span>
    <span v-else-if="textFormat" v-format="textFormat">{{text}}</span>
    <span v-else>{{text}}</span>
  </div>
</template>

<style scoped>
.app-editor-container {
  width: fit-content;
}
</style>
