<template>
  <div class="set">
    <Header @confirmExit="confirmExit"></Header>
    <div class="main">
      <div class="li" @click="getConfig">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            部署
          </div>
        </div>
      </div>
      <div class="li" @click="getConsole">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            {{ vConsoleState ? '关' : '开' }}调试
          </div>
        </div>
      </div>
      <div class="li" @click="getRanking">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            {{ rankingSwitch1 ? '关' : '开' }}排行榜
          </div>
        </div>
      </div>
      <div class="li" @click="getTTS">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            用{{ ttsState ? '系统' : '百度' }}TTS
          </div>
        </div>
      </div>
      <div class="li">
        <div class="liBox">
          <div class="pic">
            <div style="color: #ffffff;">
              <div @click="getText(1)" style="margin-bottom: 15px;">系统TTS</div>
              <div @click="getText(2)">百度TTS</div>
            </div>
          </div>
          <div class="name">
            测试音频
          </div>
        </div>
      </div>
      <div class="li" @click="getLogout">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set2.png"></div>
          <div class="name">
            退出
          </div>
        </div>
      </div>
      <!-- <div class="li" @click="getGesture">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set2.png"></div>
          <div class="name">
            手势项目
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup name="SetIndex" lang="ts">
import Speech from 'speak-tts';
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const data = reactive<any>({
  vConsoleState: true,
  rankingSwitch1: true,
  ttsState: false,
});

const { vConsoleState, rankingSwitch1, ttsState } = toRefs(data);

//设置
const getConfig = () => {
  //跳转
  router.push({ path: '/set/config' });
};

// 退出
const getLogout = async () => {
  await proxy?.$modal.confirm("确定退出吗？").then(() => {
    proxy?.$modal.loading();
    let params = {};
    proxy?.$http.common.logout(params).then((res: any) => {
    });
    proxy?.$modal?.closeLoading()
    //跳转
    router.push({ path: '/login' });
  }).finally(() => {
  });
  //清空缓存
  //localStorage.clear();
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
};

/**
 * 调试开关
*/
const getConsole = () => {
  const vConsoleIcon: any = document.querySelector('.vc-switch');
  let state = localStorage.getItem('vConsole');
  if (state == "1") {
    localStorage.setItem('vConsole', "0");
    vConsoleIcon.style.display = 'none';
    vConsoleState.value = false;
  } else {
    localStorage.setItem('vConsole', "1");
    vConsoleIcon.style.display = 'block';
    vConsoleState.value = true;
  }
};

/**
 * 排行榜开关(不包括阳光跑)
*/
const getRanking = () => {
  proxy?.$modal.loading();
  let state = localStorage.getItem('rankingSwitch1');
  if (state == "1") {
    localStorage.setItem('rankingSwitch1', "0");
    rankingSwitch1.value = false;
    proxy?.$modal.msgWarning('排行榜定时任务已停用');
  } else {
    localStorage.setItem('rankingSwitch1', "1");
    rankingSwitch1.value = true;
    proxy?.$modal.msgSuccess('排行榜定时任务已启用');
  }
  setTimeout(() => {
    proxy?.$modal?.closeLoading()
    window.location.reload()
  }, 1000)
};

/**
 * TTS切换
*/
const getTTS = () => {
  proxy?.$modal.loading();
  let state = localStorage.getItem('ttsState');
  if (state == "1") {
    localStorage.setItem('ttsState', "0");
    ttsState.value = false;
    proxy?.$modal.msgSuccess('已设为系统TTS');
    // let speech = new Speech();
    // if (!speech.hasBrowserSupport()) {
    //   proxy?.$modal.msgWarning(`不支持系统TTS，建议切换百度TTS`);
    // } else {
    //   proxy?.$modal.msgSuccess('已设为系统TTS');
    // }
  } else {
    localStorage.setItem('ttsState', "1");
    ttsState.value = true;
    proxy?.$modal.msgSuccess('已设为百度TTS');
    // proxy?.$http.common.baiduToken({}).then((res: any) => {
    //   let tok = res.token;
    //   localStorage.setItem('tok', tok);
    // });
  }
  setTimeout(() => {
    proxy?.$modal?.closeLoading()
    window.location.reload()
  }, 1000)
};

/**
 * 测试音频
*/
const getText = (type: any) => {
  if (type == 1) {
    let speech = new Speech();
    if (speech.hasBrowserSupport()) {
      speech
        .init({
          volume: 1, // 音量
          lang: 'zh-CN', // 语言
          rate: 1.5, // 语速
          pitch: 1.0, // 音调
          splitSentences: true, // 在句子结束时暂停
          listeners: {
            // 事件
            onvoiceschanged: (voices: any) => {
              // console.log('事件声音已更改', voices);
            }
          }
        })
        .then(() => {
          speech.speak({ text: "测试系统TTS" }).then(() => {
            speech.cancel(); //播放结束后调用
          });
        });
    } else {
      proxy?.$modal.msgWarning(`不支持系统TTS`);
    }
  }
  if (type == 2) {
    let baiduTok = localStorage.getItem('tok');
    if (!baiduTok) {
      proxy?.$http.common.baiduToken({}).then((res: any) => {
        let tok = res.token;
        localStorage.setItem('tok', tok);
        let url = `https://tsn.baidu.com/text2audio?tex=${encodeURI('测试百度TTS')}&tok=${tok}&cuid=baike&lan=ZH&ctp=1&vol=15&rate=32&per=0&spd=7&pit=4`;
        let myAudio = new Audio(url);
        myAudio.play();
      });
    } else {
      let url = `https://tsn.baidu.com/text2audio?tex=${encodeURI('测试百度TTS')}&tok=${baiduTok}&cuid=baike&lan=ZH&ctp=1&vol=15&rate=32&per=0&spd=7&pit=4`;
      let myAudio = new Audio(url);
      myAudio.play();
    }
  }
};

/**
 * 返回
*/
const getGesture = () => {
  router.push({ path: '/gesture' });
};

/**
 * 返回
*/
const confirmExit = () => {
  router.go(-1);
};

onMounted(() => {
  let state1 = localStorage.getItem('vConsole');
  if (state1 == "1") {
    vConsoleState.value = true;
  } else {
    vConsoleState.value = false;
  }
  let state2 = localStorage.getItem('rankingSwitch1');
  if (state2 == "1") {
    rankingSwitch1.value = true;
  } else {
    rankingSwitch1.value = false;
  }
  let state3 = localStorage.getItem('ttsState');
  if (state3 == "1") {
    ttsState.value = true;
  } else {
    ttsState.value = false;
  }
})
</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.main {
  width: calc(100% - ($waiPadding * 2));
  height: 60vh;
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .li {
    width: 13vw;
    height: 19vw;
    border-radius: 1.6rem;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);

    .liBox {
      .name {
        width: 100%;
        font-size: 2.48rem;
        color: #1A293A;
        padding: 0.5rem 0;
      }


      .pic {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background: radial-gradient(78% 78% at 53% 50%, #07121A 0%, #2A4256 49%, #5180A9 100%);
        box-shadow: 0px 0px 2px 2px #FFFFFF;
        margin-bottom: 2vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        img {
          width: 50%;
          height: 50%;
          transition: all 1s;
        }
      }

    }

    &:hover {
      img {
        transform: translateY(-0.5vw);
      }
    }

  }

}
</style>
