<template>
  <ww-open-data
    v-if="is_trial"
    ref="openDataEl"
    :type="type"
    :openid="openid"
    :style="name_style"
  />
  <span v-else :style="name_style">{{ name }}</span>
</template>

<script lang="ts">
export default {
  name: "WlStaffName",
};
</script>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
/**
 * type - 开放数据类型 userName-用户名称 departmentName-部门名称
 * openid - userid / departmentid
 * name - 非试用版下的名称
 * is_trial - 是否是试用版，默认false
 */
interface Props {
  is_trial?: boolean;
  type?: "userName" | "departmentName";
  name?: string;
  openid?: string;
  fontSize?: string | number;
  color?: string;
  cursor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  is_trial: false,
  type: "userName",
  name: "",
  openid: "",
  fontSize: "",
  color: "",
  cursor: "",
});

const openDataEl = ref();

const name_style = computed(() => {
  return {
    fontSize:
      typeof props.fontSize === "string"
        ? props.fontSize
        : props.fontSize + "px",
    color: props.color,
    cursor: props.cursor,
  };
});

watch(
  [() => props.openid, () => props.is_trial, openDataEl],
  ([id, shouldBind, el]) => {
    if (id && shouldBind && el) {
      (window.parent as any).WWOpenData?.bind(el);
    }
  },
);
</script>
