<template>
  <div class="message-rating-star">
    <p class="rating-head-tail">
      {{ props.ratingTemplate.head }}
    </p>
    <div class="rating-card">
      <span class="card-title">{{ TUITranslateService.t("AIDesk.请对本次服务进行评价") }}</span>
      <div class="card-wrapper">
        <div style="max-width: 200px">
          <div
            v-for="(item, index) in starList"
            :key="index"
            style="display: inline-block"
            @click="setValue(index)"
            @mouseenter="setHoverValue(index)"
            @mouseleave="setHoverValue(-1)"
          >
            <div v-if="isTikTok">
              <image v-if="item === 1" :src="star" class="img-in-tt"></image>
              <image v-else :src="starLine" class="img-in-tt"></image>
            </div>
            <div v-else>
              <Icon
                v-if="item === 1"
                :src="star"
                width="25px"
                height="25px"
              />
              <Icon
                v-else
                :src="starLine"
                width="25px"
                height="25px"
              />
            </div>
          </div>
        </div>
      </div>
      <div>
        <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px', wordBreak: 'normal'}">
          {{
            hoverValue === -1
                ? value === -1
                    ? TUITranslateService.t("AIDesk.如果满意请给好评哦～")
                    : desc[value]
                : desc[hoverValue]
          }}
        </div>
        <div class="hidden-desc">
          {{ TUITranslateService.t("AIDesk.如果满意请给好评哦～") }}
        </div>
      </div>
      <button
        :class="{
          'submit-button': true,
          'submit-button disabled-in-tt': isTikTok && (hasReply || hasExpire)
        }"
        :disabled="hasReply || hasExpire"
        @click="submitRatingStar"
      >
        {{ TUITranslateService.t("AIDesk.提交评价") }}
      </button>
    </div>
    <p
      v-if="hasReply"
      class="rating-head-tail"
      :style="{
        marginTop: 20 + 'px',
      }"
    >
      {{ props.ratingTemplate.tail }}
    </p>
  </div>
</template>

<script lang="ts">
import vue from '../../../../../../../adapter-vue';
import { CUSTOM_MESSAGE_SRC } from '../../../../../../../constant';
import { ratingTemplateType } from '../../../../../../../interface';
import star from '../../../../../../../assets/star.png';
import starLine from '../../../../../../../assets/starLine.png';
import Icon from '../customer-icon.vue';
import { TUITranslateService } from '../../../../../../../@aidesk/uikit-engine';
import { isTikTok } from "../../../../../../../utils/env";
const { computed, ref, watchEffect } = vue;

interface Props {
  ratingTemplate: ratingTemplateType;
}

export default {
  components: {
    Icon,
  },
  props: {
    ratingTemplate: {
      type: Object as () => ratingTemplateType,
      default: () => ({}),
    },
  },
  emits: ['sendMessage'],
  setup(props: Props, { emit }) {
    const hasReply = ref<boolean>(false);
    const sessionId = ref<string>('');
    const value = ref<number>(-1);
    const hoverValue = ref<number>(-1);
    const hasExpire = ref<boolean>(false);

    watchEffect(() => {
      sessionId.value = props.ratingTemplate.sessionId || '';
      if (props.ratingTemplate.selected != undefined) {
        for (let i = 0; i < props.ratingTemplate.menu.length; i++) {
          if (props.ratingTemplate.menu[i].id == props.ratingTemplate.selected.id) {
            hasReply.value = true;
            value.value = i;
            break;
          }
        }
      }
      const timestamp = Math.floor(new Date().getTime() / 1000);
      if (timestamp > props.ratingTemplate.expireTime) {
        hasExpire.value = true;
      }
    });

    const desc = computed(() => {
      return props.ratingTemplate?.menu.map((item) => {
        return item.content;
      });
    });

    const starList = computed(() => {
      return props.ratingTemplate?.menu.map((item, index) => {
        if (hoverValue.value !== -1) {
          return index <= hoverValue.value ? 1 : 0;
        } else {
          return index <= value.value ? 1 : 0;
        }
      });
    });

    const setValue = (val: number) => {
      if (hasReply.value) {
        return;
      }
      value.value = val;
    };

    const setHoverValue = (value: number) => {
      if (hasReply.value) {
        return;
      }
      hoverValue.value = value;
    };

    const submitRatingStar = async () => {
      if (value.value < 0) {
        return;
      }
      const submitData = {
        data: JSON.stringify({
          src: CUSTOM_MESSAGE_SRC.MENU_SELECTED,
          menuSelected: {
            id: props.ratingTemplate.menu[value.value].id,
            content: props.ratingTemplate.menu[value.value].content,
            sessionId: sessionId.value,
          },
          customerServicePlugin: 0,
        }),
      };
      hasReply.value = true;
      emit('sendMessage', submitData);
    };
    return {
      props,
      hasReply,
      sessionId,
      value,
      hoverValue,
      hasExpire,
      desc,
      starList,
      setValue,
      setHoverValue,
      submitRatingStar,
      star,
      starLine,
      TUITranslateService,
      isTikTok,
    };
  },
};
</script>
<style lang="scss" scoped>
.rating-head-tail {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  overflow-wrap: break-word;
  word-break: normal;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
}

.rating-card {
  background: #fbfbfb;
  border-radius: 20px;
  border: 0;
  margin-top: 10px;
  padding: 10px;
  min-width: 220px;
}

.message-rating-star {
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10px;
}

.submit-button {
  height: 35px;
  background-color: #1c66e5;
  font-size: 14px;
  font-weight: 400;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 62%;
  // 去掉小程序 button disabled 后的边框
  &::after{
    border: none;
  }
}

// tiktok 小程序兼容样式
.submit-button.disabled-in-tt {
  background-color: #d8d8d8 !important;
  color: white !important;
  border: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

.hidden-desc {
  width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  visibility: hidden;
  padding: 0;
  margin: 0;
  height: 0;
}

uni-button[disabled] {
  background-color: #d8d8d8 !important;
  color: white !important;
  border: none !important;
}

uni-button:after {
  border: none !important;
}

.img-in-tt {
  width: 25px;
  height: 25px;
}

</style>
