<template>
  <el-row>
    <el-col :span="12">
      <el-button-group>
        <el-button @click="doCrime(11, 'warehouse')">烧仓库</el-button>
        <el-button @click="doCrime(15, 'napcop')">做15-3</el-button>
        <el-button @click="doCrime(18, 'hackbank')">做18-1</el-button>
      </el-button-group>
    </el-col>
    <el-col :span="12">
      <el-button type="primary" @click="doYouLikeABeer()">🍺 你喜欢啤酒吗</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-cascader v-model="crimeSelected" :options="CrimeData" :show-all-levels="false" clearable
                 placeholder="选择其他"/>
    <el-button :disabled="!(crimeSelected && crimeSelected.length)"
               :icon="Coffee"
               round type="danger" @click="doCrime(crimeSelected[0], crimeSelected[1])">做
    </el-button>
  </el-row>
  <div>
    <el-tag type="primary">NERVE {{ nerve }}</el-tag>
    <el-tag type="danger">CD {{ boostCoolDown }}</el-tag>
  </div>
  <div v-if="responseHtmlString" v-html="responseHtmlString"></div>
  <div v-if="results" v-html="results"></div>
  <el-skeleton v-if="loading" :rows="3" animated/>
</template>

<script lang="ts" setup>
import { Coffee } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { inject, onMounted, ref } from 'vue';
import { LoggerKey } from "../ts/class/Logger";
import { CrimeData } from "./data/CrimeData";
import useItem, { useItemSync } from "../ts/func/utils/useItem";
import getSidebarData from "../ts/func/utils/getSidebarData";

const logger = inject(LoggerKey)
const results = ref("")
const loading = ref(false)
const crimeSelected = ref(null)
const responseHtmlString = ref('')
const boostCoolDown = ref(0)
const nerve = ref(0)

const doCrime = async (nerve, crime: "hackbank" | "warehouse" | 'napcop') => {
  loading.value = true;
  results.value = '';
  try {
    results.value = await (await fetch(window.addRFC("https://www.torn.com/crimes.php?step=docrime4&timestamp=" + Date.now()), {
      "headers": {
        "accept": "text/plain, */*; q=0.01",
        "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        "sec-ch-ua-mobile": "?0",
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
        "x-requested-with": "XMLHttpRequest"
      },
      "referrer": "https://www.torn.com/crimes.php",
      "referrerPolicy": "strict-origin-when-cross-origin",
      "body": `nervetake=${ nerve }&crime=${ crime }`,
      "method": "POST",
      "mode": "cors",
      "credentials": "include"
    })).text();
  } catch (e) {
    logger.error(e.stack);
    results.value = e.message;
  }
  let err;
  try {
    err = JSON.parse(results.value).error;
  } catch (e) {
  }
  if (err) {
    results.value = '出错了';
    ElMessage.error('错误: ' + err);
    logger.error(err);
  }
  loading.value = false;
  updateData()
}

const doYouLikeABeer = async () => {
  await useItemSync('180', false, (res) => {
        responseHtmlString.value = res.text
        updateData()
      }
  )
}

const updateData = () => {
  const sidebarData = getSidebarData()
  nerve.value = sidebarData.bars.nerve.amount
  boostCoolDown.value = (sidebarData.statusIcons.icons.booster_cooldown?.timerExpiresAt - sidebarData.statusIcons.icons.booster_cooldown?.serverTimestamp) / 3600 | 0
}

onMounted(() => {
  updateData()
  window.setInterval(() => updateData(), 60000)
})
</script>

<style scoped></style>
