<template>
  <view class="w-title">
    <view class="w-title-left">
      <slot name="title">
        <text class="w-title-left__text" :style="titleStyle">{{ title }}</text>
      </slot>
    </view>
    <view class="w-title-right" v-if="showRight" @tap.stop="rightEvt">
      <slot name="right">
        <text :style="rightTextStyle">{{ rightText }}</text>
        <up-icon
          v-if="_rightIconConfig.show"
          :name="_rightIconConfig.name"
          :color="_rightIconConfig.color"
          :size="_rightIconConfig.size"
        ></up-icon>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { CSSProperties, ref, watchEffect } from "vue";

interface Props {
  title?: string;
  titleStyle?: CSSProperties | string;
  rightUrl?: string;
  rightRouteType?: string;
  rightText?: string;
  rightTextStyle?: CSSProperties | string;
  rightIconConfig?: RightIconConfig;
  showRight?: boolean;
}

interface RightIconConfig {
  show?: boolean;
  name?: string;
  size?: string;
  color?: string;
}

const props = withDefaults(defineProps<Props>(), {
  rightText: "更多",
  showRight: true,
  rightRouteType: "navigateTo", // navigateTo、reLaunch、redirectTo、switchTab
});

const emit = defineEmits(["clickRight"]);

const rightEvt = () => {
  let routeType = props.rightRouteType;
  if (props.rightUrl) {
    let _url = props.rightUrl;
    if (!_url.startsWith("/")) {
      _url = "/" + _url;
    }
    uni[routeType]({ url: _url });
  } else {
    emit("clickRight");
  }
};

const _rightIconConfig = ref<RightIconConfig>({
  show: true,
  name: "arrow-right",
  size: "16",
  color: "#ccc",
});

watchEffect(() => {
  if (props.rightIconConfig) {
    Object.assign(_rightIconConfig.value, props.rightIconConfig);
  }
});
</script>
<style lang="scss" scoped>
.w-title {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    &__text {
      border-left: 5px solid purple;
      border-top-left-radius: 5px;
      padding: 0 10rpx;
      font-weight: 600;
      color: #999;
    }
  }
  &-right {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    color: #999;
    cursor: pointer;
  }
}
</style>
