<template>
  <div class="home-nav-right">
    <!-- <d-tooltip position="left">
      <a :href="gitcodeNet" target="_blank">
        <div class="home-nav-item text-CG700">旧版</div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">
            如需访问旧版与项目仓库，可
            <a class="home-nav-link" :href="gitcodeNet" target="_blank">返回旧版查看 >></a>
          </div>
        </div>
      </template>
    </d-tooltip> -->
    <!-- <d-tooltip position="left">
      <a class="home-nav-link" :href="helpDoc" target="_blank">
        <div class="home-nav-item">
          <Icon name="gt-ask" class="home-nav-icon" size="20px" />
        </div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">
            查看使用
            <a class="home-nav-link" :href="helpDoc" target="_blank">帮助文档</a>
          </div>
        </div>
      </template>
    </d-tooltip> -->
    <!-- <d-tooltip position="left">
      <a class="home-nav-link" :href="reportBug" target="_blank">
        <div class="home-nav-item">
          <Icon name="gt-file-code" class="home-nav-icon" size="20px" />
        </div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">产品使用相关的bug都可以</div>
          <a class="home-nav-link" :href="reportBug" target="_blank">戳此提交>>></a>
        </div>
      </template>
    </d-tooltip> -->
    <d-tooltip position="left">
      <a class="home-nav-link" :href="`mailto:${contact}`">
        <div class="home-nav-item">
          <Icon name="gt-organizations" class="home-nav-icon" size="20px" />
        </div>
      </a>
      <template #content>
        <div class="home-nav-tooltip-wrapper">
          <div class="home-nav-text">
            如需组织入驻支持可邮件联系：<a class="home-nav-link devui-link-light" :href="`mailto:${contact}`">{{ contact }}</a>
            ，请在正文附带组织介绍及联系方式哦~
          </div>
        </div>
      </template>
    </d-tooltip>
    <!-- <d-tooltip position="left"><a class="home-nav-link" href="https://www.wjx.cn/vm/ey1fzaK.aspx" target="_blank" rel="noopener noreferrer"><div class="home-nav-item"><Icon name="gt-nps" class="home-nav-icon" size="20px" /></div></a><template #content><div class="home-nav-tooltip-wrapper"><div class="home-nav-text">在线参与 GitCode 用户调查</div></div></template></d-tooltip> -->
    <d-popover v-if="popVisible" :offset="OffsetOptions" :position="['left']" class="no-arrow" :is-open="popVisible">
      <div class="home-nav-link">
        <div class="home-nav-item">
          <Icon name="gt-nps" class="home-nav-icon" size="20px" />
        </div>
      </div>
      <template #content>
        <div class="g-card px-5 pt-4 pb-5 w-[410px]" >
          <div class="opinion-box" v-if="process">
            <div class="tab-step">
              <div
              v-for="item in opinionStep"
              :key="item.index"
              class="tab-item w-8 h-1 mr-1 cursor-pointer"
              :class="opStep===item.index?'bg-G900':'bg-G400'"
              @click="swTab(item)"
              ><span class="cursor-pointer"></span></div>
            </div>
            <div class="">
              <div v-if="opStep === 0" class="rate relative overflow-hidden">
                <div v-if="rateActive!==null || rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateActive === null?rateNow:rateActive].title }}</span></div>
                <div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>评价您对我们产品的体验</span></div>
                <div class="flex gap-1 items-center mt-3">
                  <div
                  v-for="ico in rateIcon"
                  :key="ico.name"
                  class="opinion-item cursor-pointer border border-G300 rounded-[3px] px-2 py-1.5"
                  :class="{active:rateNow===ico.index}"
                  @mouseover="activeOp(ico.index)"
                  @mouseleave="activeOp(null)"
                  @click="selOpini(ico)"
                  ><Icon :name="ico.name" size="24px"/></div>
                </div>
              </div>
              <div v-if="opStep === 1" class="Opinion relative overflow-hidden">
                <div v-if="rateNow!==null" class="absolute top-0 right-0 text-G900"><span>{{ rateIcon[rateNow].title }}</span></div>
                <div class="font-[600] text-G900 mt-3 text-sm leading-[20px]"><span>有什么可以改进的吗？</span></div>
                <div class="mt-3">
                  <d-textarea v-model="opinionText" :rows="4" placeholder="请输入反馈（可选）" show-count maxlength="200"></d-textarea>
                </div>
                <div>
                  <d-button color="primary" variant="solid" @click="handleSubmit">提交</d-button>
                </div>
              </div>
            </div>
          </div>
          <div class="finish flex items-center" v-else>
            <div class="flex justify-center items-center w-[30px] h-[30px] rounded-[50%] bg-[#0EB07B]">
              <Icon name="gt-success" size="14px" color="#fff"/>
            </div>
            <div class="ml-2 font-[600] text-G900 text-sm leading-[20px]"><span>谢谢您的反馈！</span></div>
          </div>
        </div>
      </template>
    </d-popover>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';
import { useReport } from '@/utils/hooks/useReport';
const gitcodeNet = 'https://gitcode.net';
const helpDoc = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki';
const reportBug = 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/issues';
const contact = 'kefu@gitcode.com';
const opinionStep = [{ index: 0, offset_x: -30 }, { index: 1, offset_x: -80 }];
const opStep = ref<number>(0);
const rateNow = ref(null);
const rateActive = ref(null);
const process = ref(true);
const popVisible = ref(true);
const opinionText = ref<string>('');
const rateIcon = [
  { name: 'gt-nps-1', title: '非常好', index: 0 },
  { name: 'gt-nps-2', title: '好', index: 1 },
  { name: 'gt-nps-3', title: '一般', index: 2 },
  { name: 'gt-nps-4', title: '不好', index: 3 },
  { name: 'gt-nps-5', title: '非常不好', index: 4 }
];
const store:any = localStorage.getItem('spmStatus');
const status = store ? JSON.parse(store) : null;
if (status !== null) {
  const { nps_global } = status;
  popVisible.value = nps_global.expire && nps_global.expire < Date.now();// 过期后才能重新展示
}
const swTab = (item:any) => { // 切换步骤
  if (rateNow.value === null && item.index === 1) return;
  OffsetOptions.crossAxis = item.offset_x;
  opStep.value = item.index;
  window.dispatchEvent(new Event('resize'));// 触发更新位置
};
const activeOp = (index:any) => { // hover等级
  rateActive.value = index;
};
const selOpini = (item:any) => { // 设置等级
  rateNow.value = item.index;
  swTab(opinionStep[1]);
};
const OffsetOptions = reactive({ mainAxis: 10, crossAxis: -30 });
const handleSubmit = () => { // 提交意见
  useReport('nps_global', {
    nps_score: rateNow.value as any + 1,
    nps_comment: opinionText.value
  }).then(res => {
    process.value = false;
    OffsetOptions.crossAxis = 0;
    window.dispatchEvent(new Event('resize'));// 触发更新位置
    const nextStatus = status || {};
    nextStatus.nps_global = { expire: Date.now() + 86400000 * 15 };// 记录提交的过期时间
    localStorage.setItem('spmStatus', JSON.stringify(nextStatus));
    setTimeout(() => { popVisible.value = false; }, 500);
  });
};

</script>

<style scoped lang="scss">
.home-nav-right {
  position: fixed;
  right: 16px;
  bottom: 120px;
  z-index: 20;
  @media screen and (max-width: 768px) { // 小屏不显示工具栏
    display: none;
  }
  .home-nav-item {
    margin-top: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 44px;
    box-shadow: 0 2px 6px 0 rgba(37, 43, 58, 0.12);
    .home-nav-icon {
      color: rgba(0, 0, 0, 0.5) !important;
    }
    &:hover {
      cursor: pointer;
      .home-nav-icon {
        color: rgba(0, 0, 0, 1) !important;
      }
    }
  }
}
.home-nav-tooltip-wrapper {
  padding: 6px 12px;
  max-width: 190px;
  font-size: 12px;
  line-height: 18px;
  @apply whitespace-normal break-all;
}
.home-nav-link {
  color: rgba(59, 130, 246, 1);
  cursor: pointer;
}
.opinion-box{
  display: flex;
  flex-direction: column;
  .tab-step{
    display: flex;
    .tab-item{
      border-radius: 2px;
      position: relative;
      span{
        width: 100%;
        height: 12px;
        position: absolute;
        top: -4px;
        left: 0;
        z-index: 1;
      }
    }
  }
  .rate{
    .opinion-item{
      width: 40px;
      height: 36px;
      &:hover,&.active{
        background:var(--color-B500);
        border-color: transparent;
        .icon{color: #fff !important;}
      }
    }
  }
}
</style>
<style lang="scss">
.no-arrow{
  &.devui-popover__content.devui-flexible-overlay{
    background: transparent;
    padding: 0;
    border:none;
    box-shadow: none;
  }
  .devui-flexible-overlay__arrow{
    display: none !important;
  }
}
</style>
