<template>
  <div class="message" :style="[containerStyle, styleExtra]">
    <div class="message-avatar" @click.stop="onClickImg">
      <WlPic :src="imgUrl" :needCos="needCos" cosType="thumbnail"></WlPic>
    </div>
    <div class="message-content">
      <span :style="titleStyle" class="message-content-title">
        {{ title }}
      </span>
      <span v-if="isShowSubtitle" class="message-content-subtitle">
        {{ subtitle }}
      </span>
    </div>
    <i
      class="iconfont message-icon"
      :class="icon"
      @click.stop="onClickIcon"
    ></i>
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: "MessageCode",
};
</script>
<script lang="ts" setup>
import type { CSSProperties } from "vue";
import { computed } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

interface Props {
  imgUrl: string;
  styleExtra: CSSProperties;
  isShowSubtitle: boolean;
  theme: string;
  titleColor: string;
  arrowColor: string;
  icon: string;
  title: string;
  subtitle: string;
  needCos: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  imgUrl: "",
  styleExtra: null,
  isShowSubtitle: true,
  theme: "dark",
  titleColor: "",
  arrowColor: "",
  icon: "icon-mobile-ui-you",
  title: "",
  subtitle: "",
  needCos: true,
});

const containerStyle = computed(() => {
  if (props.theme === "light") {
    return {
      "background-color": "#FFFFFF",
      border: "0.5px solid #EEEEEE;",
    };
  } else {
    return {
      "background-color": "#1C1C1C",
    };
  }
});
const titleStyle = computed(() => {
  if (props.arrowColor) {
    return {
      color: props.arrowColor,
    };
  } else if (props.theme === "light") {
    return {
      color: "#000000",
    };
  } else {
    return {
      color: "#FFFFFF",
    };
  }
});
const emit = defineEmits(["onClickImg", "onClickIcon"]);
const onClickImg = () => {
  emit("onClickImg", {
    title: props.title,
    subtitle: props.subtitle,
    url: props.imgUrl,
  });
};
const onClickIcon = () => {
  emit("onClickIcon", {
    title: props.title,
    subtitle: props.subtitle,
    url: props.imgUrl,
  });
};
</script>

<style lang="scss" scoped>
.message {
  width: 100%;
  box-shadow: 0px j(4) j(10) rgba(0, 0, 0, 0.05);
  border-radius: j(10);
  padding: j(10) j(14) j(10) j(10);
  box-sizing: border-box;
  cursor: pointer;
  @extend %flex-middle;

  &-avatar {
    border-radius: j(6);
    overflow: hidden;
    width: j(46);
    height: j(46);
    flex-shrink: 0;
  }

  &-content {
    @extend %flex-direction-column;
    flex: 1;
    text-align: left;
    margin-left: j(9);

    &-title {
      font-weight: 500;
      font-size: j(15);
      line-height: j(22);
      color: white;
      white-space: pre;
      @include textEllipsis(1);
    }

    &-subtitle {
      font-size: j(13);
      line-height: j(19);
      color: #a2a2a2;
      white-space: pre;
      @include textEllipsis(1);
    }
  }

  &-icon {
    flex-shrink: 0;
    font-size: 14px;
    color: #626262;
  }
}
</style>
