<template>
  <div class="message" :style="[containerStyle, styleExtra]">
    <div class="message-avatar" @click.stop="onClickImg">
      <WlPic :src="imgUrl" :needCos="needCos" :cosSuffix="cosSuffix"></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>
/*
 * @Author: yangxin
 * @Date: 2021-09-18 11:12:12
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-11-23 17:14:05
 */
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
export default {
  name: "MessageCode",
  components: { WlPic },
  props: {
    imgUrl: {
      type: String,
      default: "",
    },
    styleExtra: {
      type: Object,
      default: () => {},
    },
    isShowSubtitle: {
      type: Boolean,
      default: true,
    },
    theme: {
      type: String,
      default: "dark",
    },
    titleColor: {
      type: String,
      default: "",
    },
    arrowColor: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "icon-mobile-ui-you",
    },
    title: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    needCos: {
      type: Boolean,
      default: true,
    },
    cosSuffix: {
      type: String,
      default: "imageView2/1/w/100/h/100/q/85",
    },
  },
  computed: {
    containerStyle() {
      if (this.theme === "light") {
        return {
          "background-color": "#FFFFFF",
          border: "0.5px solid #EEEEEE;",
        };
      } else {
        return {
          "background-color": "#1C1C1C",
        };
      }
    },
    titleStyle() {
      if (this.arrowColor) {
        return {
          color: this.arrowColor,
        };
      } else if (this.theme === "light") {
        return {
          color: "#000000",
        };
      } else {
        return {
          color: "#FFFFFF",
        };
      }
    },
    arrowStyle() {
      if (this.titleColor) {
        return {
          color: this.titleColor,
        };
      } else if (this.theme === "light") {
        return {
          color: "#C1C1C1",
        };
      } else {
        return {
          color: "#626262",
        };
      }
    },
  },
  methods: {
    onClickImg() {
      this.$emit("onClickImg", {
        title: this.title,
        subtitle: this.subtitle,
        url: this.imgUrl,
      });
    },
    onClickIcon() {
      this.$emit("onClickIcon", {
        title: this.title,
        subtitle: this.subtitle,
        url: this.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>
