<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/store";
import "@vuepic/vue-datepicker/dist/main.css";
import axios from "axios";
import moment from "moment";

const store = useMainStore();

let loading = ref(false);
let title = ref(null);
let isCheck = ref(null);
let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(5); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
let proposal = reactive({
  list: [],
});

// 搜尋
let searchInput = ref("");

watch(pageNum, () => {
  getSchool();
});

// 取得提案
async function getSchool() {
  let token = store.token;
  let url = `${store.apiUrl}/api/get_school?access_token=${token}&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;
  try {
    let response = await axios.get(url);
    proposal.list = response.data.schools;
    totalPages.value = store.getTotalPages(response.data.total_num, 5);

    setTimeout(() => {
      loading.value = false;
    }, 500);

    console.log("取得提案", response);
  } catch (error) {
    console.error(error);
  }
}

getSchool();

let assignTag = ref("all");

function selectTag(btn) {
  pageNum.value = 1;
  if (btn === "all") {
    isCheck.value = null;
    assignTag.value = "all";
  } else {
    isCheck.value = btn;
    assignTag.value = btn;
  }

  getClass();

  console.log("assignTag.value", assignTag.value);
}
</script>

<template>
  <v-card class="h-100 user-courses">
    <div ref="title" class="title">
      <h4>{{ t("my_proposal") }}</h4>
    </div>

    <div class="d-flex align-center ms-auto search-item">
      <v-text-field
        @keyup.enter="search()"
        v-model="searchInput"
        :label="t('keyword_search')"
        variant="outlined"
        density="compact"
        hide-details
        clearable
      ></v-text-field>

      <button @click="search()" class="ms-2">
        <img
          src="@/assets/img/news/news-search-icon.png"
          alt="臺灣工藝學習平台"
        />
      </button>
    </div>

    <div class="d-flex justify-center tab-btn mt-5 mb-10">
      <v-btn
        variant="text"
        @click="selectTag('all')"
        :class="{ active: assignTag === 'all' }"
      >
        {{ t("all") }}
      </v-btn>
      <v-btn
        variant="text"
        @click="selectTag('0')"
        :class="{ active: assignTag === '0' }"
      >
        {{ t("awaiting_approval") }}
      </v-btn>
      <v-btn
        variant="text"
        @click="selectTag('1')"
        :class="{ active: assignTag === '1' }"
      >
        {{ t("approved") }}
      </v-btn>
      <v-btn
        variant="text"
        @click="selectTag('2')"
        :class="{ active: assignTag === '2' }"
      >
        {{ t("rejected") }}
      </v-btn>
    </div>

    <div class="d-flex justify-center my-10" v-if="loading">
      <v-progress-circular
        color="grey-lighten-4"
        indeterminate
      ></v-progress-circular>
    </div>

    <div v-else class="main-table">
      <!-- <h6 class="table-title">開課紀錄</h6> -->
      <router-link
        v-if="!proposal.list.length && isCheck !== '2' && isCheck !== '3'"
        to="/setup-courses/proposal"
        class="hint-item mb-7"
      >
        {{ t("form.go_to_proposal") }}
      </router-link>
      <table v-else>
        <thead>
          <tr>
            <th width="10%"></th>
            <th width="10%">{{ t("form.proposal_date") }}</th>
            <th width="70%">{{ t("form.location_name") }}</th>
            <th width="10%">{{ t("form.proposal_content") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in proposal.list" :key="index">
            <td>
              <v-chip v-if="item.is_pass_proposal === 0">{{ t("proposal_awaiting_approval") }}</v-chip>
              <!-- <v-chip
                variant="outlined"
                color="green"
                text-color="white"
                v-else
              >
                已通過提案
              </v-chip> -->

              <v-chip v-if="item.is_pass_proposal === 1 && item.is_check === 0">
                {{ t("awaiting_approval") }}
              </v-chip>
              <v-chip
                v-else-if="item.is_check === 1"
                color="green"
                text-color="white"
              >
                {{ t("approved") }}
              </v-chip>
              <v-chip
                v-else-if="item.is_check === 2"
                color="error"
                text-color="white"
              >
                {{ t("rejected") }}
              </v-chip>
            </td>

            <td>
              {{ moment(`${item.update_time}`).format("YYYY/MM/DD") }}
            </td>

            <td>{{ item.location_name }}</td>

            <td>
              <div>
                <v-btn color="purple" variant="outlined">
                  <p>{{ t("instructor") }}</p>
                </v-btn>
                <v-btn color="purple" variant="flat" class="w-100 mt-3">
                  <p>{{ t("session") }}</p>
                </v-btn>
              </div>
            </td>

            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <v-pagination
      v-if="!searchError"
      v-model="pageNum"
      :length="totalPages"
      rounded="circle"
      class="mt-16"
    ></v-pagination>
  </v-card>
</template>

<style lang="scss"></style>
