<template>
  <div class="DashBoard" v-show="loadComplete">
    <el-row>
      <el-col :span="24"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
      <el-input v-model="link" placeholder="输入链接"></el-input>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="12">
        <el-button @click="post">提交下载</el-button>
        <el-button @click="query">查询任务</el-button>
        <el-button @click="searchByLink">查找任务</el-button>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <br>
    <hr>
    <br>
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <el-input v-model="keyword" placeholder="输入关键字" @change="searchByKeyword">
          <template #prefix>
            输入关键字查找：
          </template>
        </el-input>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="11"></el-col>
      <el-col :span="7">
        <el-button>确定</el-button>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>

  <div class="DashBoard" v-show="!loadComplete">
    <el-col :span="15">
      <el-input v-model="AuthCode" class="validate">
        <template #prefix>
          请输入授权码：
        </template>
      </el-input>
      <el-checkbox v-model="isRemember" style="margin-left: 180px">是否记住授权码</el-checkbox>
      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 100px">验证</el-button>

    </el-col>

  </div>
</template>

<script>
import store from "../store";
import {computed, ref, onMounted} from "vue";
import {ElMessage} from "element-plus"
export default {
  name: "DashBoard",
  setup(){
    const link = ref("")
    const AuthCode = ref("")
    const keyword = ref("")
    const isRemember = ref(false)
    let timer

    const loadComplete = computed(() => {
      return store.getters.loadComplete
    })

    function post(){
      if(link.value.trim() === ''){
        ElMessage("请输入链接后再提交")
      }
      else {
        let gid = link.value.split('/')[4]
        if (!gid || !link.value.includes("hentai")) {
          ElMessage("请检查链接输入是否正确")
        }
        else
          store.dispatch("post", link.value)
      }
    }

    function query(){
      if(link.value.trim() === ''){
        ElMessage("请输入链接后再查询")
      }
      else
        store.dispatch("query", link.value)
    }

    function validate(){
      if(AuthCode.value.trim() === ""){
        ElMessage("请输入授权码后再验证")
      }
      else{
        store.dispatch("validate", AuthCode.value)
        localStorage.setItem("auth", AuthCode.value)
      }
    }

    function searchByLink() {
      if(link.value.trim() === ""){
        ElMessage("请输入链接后查找")
      }
      else {
        store.dispatch("searchByLink", link.value)
      }
    }

    function searchByKeyword(){
      if(timer)
        clearTimeout(timer)
      timer = setTimeout(() => {
        store.dispatch("searchByKeyword", keyword.value)
      }, 500)
    }

    onMounted(() => {
      const auth = localStorage.getItem("auth")
      if(auth !== null){
        store.dispatch("validate", auth)
      }
    })

    return {post, query,  validate, searchByLink, searchByKeyword, link, loadComplete, AuthCode,  keyword, isRemember, store}
  }
}
</script>

<style scoped>
  .DashBoard{
    width: auto;
    height: 90vh;
    background-color: ghostwhite;
  }

  .validate{
    width: auto;
    background-color: ghostwhite;
    display: block;
    margin-left: 180px;
    margin-top: 200px;
  }
</style>