<template>
  <div class="question-conclude-wrapper">
    <div class="content">
      <div v-if="isTemplate" v-html="survey?.success_end_content" />
      <div v-else-if="code === 20004" v-html="survey?.screening_end_content" />
      <div v-else-if="code === 20011" v-html="survey?.success_end_content" />
      <div v-else-if="code === 20016" v-html="survey?.quota_end_content" />
    </div>
    <!--  屏蔽  -->
    <!--    <div v-if="!isAnswer" class="comment">-->
    <!--      <Remark v-if="code === 20004" title="结束语提前结束评论" :type="6" />-->
    <!--      <Remark v-if="code === 20011" title="结束语成功完成评论" :type="5" />-->
    <!--      <Remark v-if="code === 20016" title="配额超限页评论" :type="8" />-->
    <!--    </div>-->
    <!-- 立即跳转动画 -->
    <div v-if="isEndUrl" class="animation-wrapper">
      <div ref="animation" class="animation" @click="toEndUrl"></div>
    </div>
    <!-- 跳转弹窗 -->
    <div v-if="isEndUrl && countTime >= 0" class="mask">
      <div class="modal">
        <div class="m-title">
          <LangTranslate
            v-if="countTime > 0"
            translate-key="QLast_RedirectingIn5Seconds"
            :translate-params="[countTime]"
          />
          <LangTranslate v-else translate-key="QLast_IosRedirectingPrompt" />
        </div>
        <div class="m-bottom">
          <LangTranslate
            v-if="countTime > 0"
            translate-key="QLast_Stay"
            class="m-btn border-right"
            @click="stopJump"
          />
          <LangTranslate translate-key="QLast_Redirect" class="m-btn" @click="jump" />
        </div>
      </div>
    </div>
    <LangTranslate
      v-if="isAnswer && questionsData.survey?.style?.is_yip"
      translate-key="PoweredByDigitalTechnologyCenterYIP"
      class="footer"
    >
      <template #prefix>
        <img src="https://diaoyan-files.automark.cc/yili_logo.png" alt="" class="yip-icon" />
      </template>
    </LangTranslate>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, ref, onMounted } from 'vue';
// import Remark from '@/views/Survey/views/Preview/components/Remark/index.vue';
// 屏蔽动效库
// import lottie from 'lottie-web';
import redJson from '@/views/Survey/views/Preview/components/json/red.json';
// import lottieJson from './json/lottie.json';
import LangTranslate from '../LangTranslate.vue';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
export default defineComponent({
  components: {
    // Remark,
    LangTranslate
  },
  props: {
    action: {
      type: Object,
      default: () => {
        /* 占位 */
      }
    },
    code: {
      type: Number,
      default: 0
    },
    survey: {
      type: Object,
      default: () => {
        /* 占位 */
      }
    },
    // 是否答题模式
    isAnswer: {
      type: Boolean,
      default: false
    },
    isTemplate: { type: Boolean, default: false }
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    // 问卷数据
    // const questionsData = inject('questionsData');
    const { questionsData } = storeToRefs(useQuestionStore());
    // console.log(11, questionsData, props.survey);
    // 跳转计时器
    let countTimer;
    // 立即跳转动画
    const animation = ref(redJson);
    // 跳转倒计时
    const countTime = ref(0);

    // 是否有跳转链接
    const isEndUrl = computed(() => {
      const code = props.action ? props.action.code : props.code;
      return (
        (code === 20004 &&
          props.survey.screening_end_url_select &&
          props.survey.screening_end_url) ||
        (code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url) ||
        (code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
      );
    });

    // 跳转
    function toEndUrl() {
      switch (props.action.code) {
        // 被甄别
        case 20004:
          if (props.survey.screening_end_url_select && props.survey.screening_end_url) {
            const url = props.survey.screening_end_url;
            toUrl(url);
          }
          break;
        // 成功
        case 20011:
          if (props.survey.success_end_url_select && props.survey.success_end_url) {
            const url = props.survey.success_end_url;
            toUrl(url);
          }
          break;
        // 配额超限
        case 20016:
          if (props.survey.quota_end_url_select && props.survey.quota_end_url) {
            const url = props.survey.quota_end_url;
            toUrl(url);
          }
          break;
        default:
          break;
      }
    }

    // 跳转链接
    function toUrl(url) {
      // eslint-disable-next-line
      url = url.replaceAll('#sn#', questionsData.value.answer.sn);
      // eslint-disable-next-line
      url = url.replaceAll('#user#', questionsData.value.answer.respondent);
      // eslint-disable-next-line
      url = url.replaceAll('#survey_sn#', questionsData.value.answer.survey_sn);
      if (proxy.$route.query.source === 'YILI_APP_WANGYI') {
        Object.keys(proxy.$route.query).forEach((key) => {
          if (!['sn', 'source', 'is_template', 'channelUCode'].includes(key)) {
            // eslint-disable-next-line
            url += `${url.indexOf('?') === -1 ? '?' : '&'}${key}=${proxy.$route.query[key]}`;
          }
        });
      }
      // 判断是否小程序路径
      if (url[0] === '/') {
        // 判断是否在小程序环境
        wx.miniProgram.getEnv(() => {
          wx.miniProgram.redirectTo({ url });
        });
      } else {
        let _url;
        if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1) {
          _url = `http://${url}`;
        }
        open(_url, '_self');
      }
    }

    // 跳转倒计时
    function cuontDown() {
      if (isEndUrl.value) {
        if (props.action.code === 20004) {
          countTime.value = props.survey.screening_standing_time;
        } else if (props.action.code === 20011) {
          countTime.value = props.survey.success_standing_time;
        } else if (props.action.code === 20016) {
          countTime.value = props.survey.quota_standing_time;
        }

        countTimer = setInterval(() => {
          if (countTime.value === 0) {
            toEndUrl();
            clearInterval(countTimer);
          } else {
            countTime.value -= 1;
          }
        }, 1000);
      }
    }

    // 停止跳转
    function stopJump() {
      countTime.value = -1;
      clearInterval(countTimer);
    }

    // 立即跳转
    function jump() {
      toEndUrl();
      stopJump();
    }

    function loadAnimation() {
      // 立即跳转动画
      if (animation.value) {
        // lottie.loadAnimation({
        //   container: animation.value,
        //   animationData: lottieJson
        // });
      }
    }

    onMounted(() => {
      cuontDown();
      loadAnimation();
    });

    return {
      questionsData,
      animation,
      isEndUrl,
      toEndUrl,
      countTime,
      stopJump,
      jump
    };
  }
});
</script>

<style lang="scss" scoped>
.question-conclude-wrapper {
  background-color: white;
  border-radius: 16px;
  height: 70vh;
  min-height: 225px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .content {
    * {
      margin: 20px;
    }
  }
  .comment {
    width: 30px;
  }
}

.animation-wrapper {
  width: 100%;
}

.animation {
  width: 75px;
  height: 75px;
  margin: 50px auto 0;
  cursor: pointer;
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: rgba(1, 21, 53, 0.7);

  //filter: alpha(opacity=50);

  .red-animation {
    width: 100%;
    max-width: 300px;
  }

  .receive {
    width: 120px;
    height: 34px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f78f4f 0%, #e94435 100%);
    color: #fff;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
  }

  .modal {
    width: 80%;
    max-width: 300px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;

    .m-title {
      padding: 30px 20px;
      font-size: 16px;
    }

    .m-bottom {
      display: flex;

      .m-btn {
        flex: 1;
        padding: 20px 0;
        border-top: 1px solid #f5f5f5;
        color: #1c6fff;
        font-size: 16px;
        cursor: pointer;
      }

      .m-btn.border-right {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.footer {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  color: #a3a3a3;
  font-size: 12px;
  text-align: center;

  .yip-icon {
    width: auto !important;
    height: 20px !important;
    margin-right: 6px;
    margin-bottom: 0 !important;
    transform: translateY(-2px);
  }
}
</style>
