<template>
  <div>
    <div class="feedback-container">
      <div
        class="feedback-like"
        @mouseenter="isLikeIconHover = true"
        @mouseleave="isLikeIconHover = false"
        @click="onLikeIconClick"
      >
        <image v-if="isTikTok" :src="likeIcon" class="img-in-tt"></image>
        <Icon v-else :file="likeIcon" width="16px" height="16px"/>
      </div>
      <span class="divider"></span>
      <div
        class="feedback-dislike"
        @mouseenter="isDislikeIconHover = true"
        @mouseleave="isDislikeIconHover = false"
        @click="onDislikeIconClick"
      >
        <image v-if="isTikTok" :src="dislikeIcon" class="img-in-tt"></image>
        <Icon v-else :file="dislikeIcon" width="16px" height="16px"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import vue from '../../../../adapter-vue';
import Icon from '../../../common/Icon.vue';
import { IMessageModel, TUITranslateService, TUIChatEngine } from '../../../../@aidesk/uikit-engine';
import FeedbackLikeBefore from '../../../../assets/feedback_like_before.svg';
import FeedbackLikeAfter from '../../../../assets/feedback_like_after.svg';
import FeedbackLikeHover from '../../../../assets/feedback_like_hover.svg';
import FeedbackDislikeBefore from '../../../../assets/feedback_dislike_before.svg';
import FeedbackDislikeAfter from '../../../../assets/feedback_dislike_after.svg';
import FeedbackDislikeHover from '../../../../assets/feedback_dislike_hover.svg';
import { isTikTok } from "../../../../utils/env";

const { ref,computed } = vue;

export default {
  components:{
    Icon
  },
  props: {
    message: {
      type: Object,
      required: true,
      default: function() {
        return {} as IMessageModel;
      }
    }
  },
  setup(props, { emit }){
    const isLikeIconHover = ref(false);
    const isLikeIconClick = ref(false);
    const isDislikeIconHover = ref(false);
    const isDislikeIconClick = ref(false);
    const isLikeSelectedDone = computed(() => {
      try {
        const jsonObj = JSON.parse(props.message.cloudCustomData);
        return jsonObj.feedBackType === 1;
      } catch (error) {
        return false;
      }
    });
    const isDislikeSelectedDone = computed(() => {
      try {
        const jsonObj = JSON.parse(props.message.cloudCustomData);
        return jsonObj.feedBackType === 2;
      } catch (error) {
        return false;
      }
    });

    const likeIcon = computed(() => {
      if (isLikeSelectedDone.value) {
        return FeedbackLikeAfter;
      }
      if (isLikeIconClick.value) {
        return FeedbackLikeAfter;
      } else if (isLikeIconHover.value) {
        return FeedbackLikeHover;
      } else {
        return FeedbackLikeBefore;
      }
    });
    const dislikeIcon = computed(() => {
      if (isDislikeSelectedDone.value) {
        return FeedbackDislikeAfter;
      }

      if (isDislikeIconClick.value) {
        return FeedbackDislikeAfter;
      } else if (isDislikeIconHover.value) {
        return FeedbackDislikeHover;
      } else {
        return FeedbackDislikeBefore;
      }
    });
    const isC2C = props.message.conversationType === TUIChatEngine.TYPES.CONV_C2C;
    const messageInfo = {
      msgSeq: props.message.sequence,
      cloudCustomData: props.message.cloudCustomData,
      // 网站渠道或测试窗
      groupId: props.message.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? props.message.to : null,
      // uikit
      fromAccount: isC2C ? props.message.to : null,
      toAccount: isC2C ? props.message.from : null,
      msgRandom: isC2C ? props.message.random : null,
      msgTime: isC2C ? props.message.time : null,
    };
    const onLikeIconClick = async () => {
      // 已经选择了就不能再切换
      if (isLikeSelectedDone.value || isLikeIconClick.value || isDislikeSelectedDone.value || isDislikeIconClick.value) {
        return;
      }
      isLikeIconClick.value = true;
      emit('like', messageInfo);
    }

    const onDislikeIconClick = () => {
      // 已经选择了就不能再切换
      if (isLikeSelectedDone.value || isLikeIconClick.value || isDislikeSelectedDone.value || isDislikeIconClick.value) {
        return;
      }
      isDislikeIconClick.value = true;
      emit('dislike', messageInfo);
    }

    return {
      likeIcon,
      isLikeIconHover,
      onLikeIconClick,
      isDislikeIconHover,
      dislikeIcon,
      onDislikeIconClick,
      TUITranslateService,
      isTikTok,
    };
  }
}
</script>
<style lang="scss">
.feedback-container {
  display: flex;
  flex-direction: row !important;
  padding: 4px 10px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(---G61, #DBE1EB);
  background-color: #fff;
  .feedback-like, .feedback-dislike {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover .tooltip {
      display: block;
    }
  }
  .divider {
    width: 1px;
    height: 14px;
    background-color: rgba(0,0,0,0.05);
  }
}

.img-in-tt {
  width: 16px;
  height: 16px;
}
</style>
