<script setup>
import { ref, reactive, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import moment from "moment";

const { t } = useI18n();
const store = useMainStore();
let token = store.token;
console.log("學習護照", store.token);

let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(5); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
let data = reactive({
  list: [],
});
let register = reactive({
  // 報名中課程
  list: [],
});
let records = reactive({
  // 上課記錄
  list: [],
});

onMounted(async () => {
  await store.getUserInfo();
  await getRecord();
});

async function getRegistration() {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_registration?access_token=${token}`
    );
    data.list = response.data.registrations;
    register.list = response.data.registrations;
    console.log("報名資料", response.data.registrations);
  } catch (error) {
    console.error(error);
  }
}

getRegistration();

// 取得上課紀錄
async function getRecord() {
  // await store.getProfile();
  console.log("store.userInfo", store.userInfo);
  let userId = store.userInfo.user_id;
  console.log("userId >>>", userId);
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_attend_record?user_id=${userId}`
    );

    records.list = response.data.attend_record_list;
    records.list.reverse();
    console.log("上課紀錄", records.list);
  } catch (error) {
    console.error(error);
  }
}

let isCheck = ref(null);
let assignTag = ref("register");

function selectTag(btn) {
  pageNum.value = 1;

  if (btn === "register") {
    isCheck.value = null;
    assignTag.value = "register";
    data.list = register.list;
  } else {
    isCheck.value = btn;
    assignTag.value = btn;
    data.list = records.list;
  }
}

function getBankCode(string, type) {
  if (type === "code") {
    const match = string.match(/\((\d+)\)/);
    return match ? match[1] : null;
  } else if (type === "account") {
    const match = string.match(/-(\d+)/);
    return match ? match[1] : null;
  }
}
</script>

<template>
  <v-card class="h-100 user-courses">
    <div class="title">
      <h4>{{ t("navbar.passport") }}</h4>
    </div>
    <p class="text-center">
      {{ t("learning_hours.description_1") }} <br />
      {{ t("learning_hours.description_2") }}
    </p>

    <v-row class="main-info mt-10">
      <v-col cols="12" md="6" class="d-flex flex-column align-center">
        <h5>
          {{ t("learning_hours.total_learning") }}
          <span>{{ t("learning_hours.hours") }}</span>
        </h5>
        <div class="d-flex align-center position-relative">
          <p>
            {{ t("learning_hours.completed_hours") }} <br />
            {{ t("learning_hours.completed_from") }}
          </p>
          <img
            src="@/assets/img/passport/icon-01.png"
            alt="臺灣工藝學習平台"
            class="icon"
          />
        </div>
        <div class="record-item">
          <img
            src="@/assets/img/passport/icon-03.png"
            alt="臺灣工藝學習平台"
          />
          <p>
            {{ t("learning_hours.total") }} <br />
            <strong> {{ store.userInfo.hours }} </strong>
            <small>{{ t("learning_hours.hour") }}</small>
          </p>
        </div>
      </v-col>
      <v-col cols="12" md="6" class="d-flex flex-column align-center">
        <h5>
          {{ t("learning_hours.total_learning") }}
          <span>{{ t("learning_hours.points") }}</span>
        </h5>
        <div class="d-flex align-center position-relative">
          <p>
            {{ t("learning_hours.redeem_criteria") }} <br />
            {{ t("learning_hours.craft_materials") }}
          </p>
          <img
            src="@/assets/img/passport/icon-02.png"
            alt="臺灣工藝學習平台"
            class="icon"
          />
        </div>
        <div class="record-item">
          <img
            src="@/assets/img/passport/icon-03.png"
            alt="臺灣工藝學習平台"
          />
          <p>
            {{ t("learning_hours.total") }} <br />
            <strong> {{ store.userInfo.points }} </strong>
            <small class="ps-2">{{ t("learning_hours.point") }}</small>
          </p>
        </div>
      </v-col>
      <v-col cols="12">
        <div class="d-flex flex-column flex-sm-row justify-center tab-btn mt-5">
          <v-btn
            variant="text"
            @click="selectTag('register')"
            :class="{ active: assignTag === 'register' }"
          >
            {{ t("learning_hours.enrolled_courses") }}
          </v-btn>
          <v-btn
            variant="text"
            @click="selectTag('0')"
            :class="{ active: assignTag === '0' }"
            class="mt-3 mt-sm-0"
          >
            {{ t("learning_hours.class_records") }}
          </v-btn>
        </div>

        <div class="main-table">
          <!-- <h6 class="table-title">報名中課程</h6> -->
          <table v-if="assignTag === 'register'">
            <thead>
              <tr>
                <th>{{ t("form.registration_start_date") }}</th>
                <th width="300px">{{ t("form.course_name") }}</th>
                <th width="180px">{{ t("form.course_duration") }}</th>
                <th width="110px">{{ t("learning_hours.hours") }}</th>
                <th width="110px">{{ t("form.payment") }}</th>
                <!-- <th width="110px">報名狀態</th> -->
                <!-- <th width="15%">繳款資訊</th> -->
              </tr>
            </thead>
            <tbody v-if="data.list.length">
              <!-- <tr v-if="!register.list.length">
                <p class="hint-item">
                  目前沒有報名紀錄喔！點擊開始探索您的專屬課程！
                </p>
              </tr> -->
              <tr v-for="(item, index) in data.list" :key="index">
                <td v-if="item.create_time">
                  {{
                    moment(`${item.create_time}`)
                      .utcOffset(0)
                      .format("YYYY/MM/DD")
                  }}
                </td>
                <td>{{ item.class_name }}</td>
                <td>
                  {{
                    moment(`${item.start_time}`)
                      .utcOffset(0)
                      .format("YYYY/MM/DD HH:mm")
                  }}
                  <br />
                  ～ <br />
                  {{
                    moment(`${item.end_time}`)
                      .utcOffset(0)
                      .format("YYYY/MM/DD HH:mm")
                  }}
                </td>
                <td>{{ item.hours }} {{ t("learning_hours.hour") }}</td>
                <td>
                  <span v-if="item.fee_payment === '匯款'">
                    {{ item.fee_payment }}
                    <v-dialog width="500" class="transfer-dialog">
                      <template v-slot:activator="{ props }">
                        <!-- <button v-bind="props" class="dialog-btn">轉帳資訊</button> -->
                        <v-btn
                          size="small"
                          v-bind="props"
                          text="轉帳資訊"
                          variant="tonal"
                          class="mt-1 dialog-btn"
                        >
                        </v-btn>
                      </template>

                      <template v-slot:default="{ isActive }">
                        <v-card title="匯款帳號">
                          <v-card-text>
                            <table class="mt-1">
                              <tbody>
                                <tr>
                                  <td>銀行代號</td>
                                  <td class="main-item">
                                    {{ getBankCode(item.ATM_address, "code") }}
                                  </td>
                                </tr>
                                <tr>
                                  <td>銀行帳號</td>
                                  <td class="main-item">
                                    {{
                                      getBankCode(item.ATM_address, "account")
                                    }}
                                  </td>
                                </tr>
                                <tr>
                                  <td>課程金額</td>
                                  <td>{{ item.fee_method }} 元</td>
                                </tr>
                              </tbody>
                            </table>
                          </v-card-text>

                          <v-card-actions>
                            <v-spacer></v-spacer>

                            <v-btn
                              :text="t('form.close')"
                              @click="isActive.value = false"
                            ></v-btn>
                          </v-card-actions>
                        </v-card>
                      </template>
                    </v-dialog>
                    <!-- <v-chip class="ma-2" size="small" label>
                      帳號： {{ item.ATM_address }}
                    </v-chip> -->
                  </span>
                  <span v-else-if="item.fee_payment === 'None'">無</span>
                  <span v-else>{{ item.fee_payment }}</span>
                </td>
                <!-- <td>
                  <span class="finish-icon" v-if="item.reg_confirm">
                    <v-icon icon="mdi-check" class="pb-1"></v-icon>
                  </span>

                  <span v-else class="d-flex align-center justify-center">
                    <p style="width: 55px" class="text-grey-lighten-1">
                      審核中
                    </p>
                  </span>
                </td> -->
              </tr>
            </tbody>
          </table>

          <table v-else>
            <thead>
              <tr>
                <th>上課日期</th>
                <th>上課時間</th>
                <th>課程名稱</th>
                <!-- <th width="110px">時數</th> -->
                <!-- <th width="10%">報名狀態</th> -->
                <!-- <th width="15%">繳款資訊</th> -->
              </tr>
            </thead>
            <tbody v-if="data.list.length">
              <!-- <tr v-if="!register.list.length">
                <p class="hint-item">
                  目前沒有報名紀錄喔！點擊開始探索您的專屬課程！
                </p>
              </tr> -->
              <tr v-for="(item, index) in data.list" :key="index">
                <td class="pa-7">
                  {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }}
                </td>
                <td>
                  {{
                    moment(`${item.start_time}`).utcOffset(0).format("HH:mm")
                  }}
                  —
                  {{ moment(`${item.end_time}`).utcOffset(0).format("HH:mm") }}
                </td>
                <td>{{ item.class_name }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <router-link
          v-if="!register.list.length"
          to="/course-list"
          class="hint-item"
        >
          目前沒有報名紀錄喔！ <br />
          點擊開始探索您的專屬課程！
        </router-link>
      </v-col>

      <div class="dot-item">
        <span class="t-dot"></span>
        <span class="r-dot"></span>
        <span class="b-dot"></span>
        <span class="l-dot"></span>
      </div>
    </v-row>
  </v-card>
</template>

<style lang="scss" scoped>
p {
  line-height: 1.875em;
}

.main-info {
  margin: 1.875em;
  padding: 3.125em;
  position: relative;
  border: 0.125em solid var(--blue);
  border-radius: 1.25em;

  @media (max-width: 600px) {
    margin: 0;
    padding: 3.125em 1.25em 6.25em;
  }

  h5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.25em;
    font-weight: 500;
    letter-spacing: 0.0625em;
    span {
      display: block;
      margin: 0.3em 0;
      font-size: 2.25em;
    }
  }

  p {
    text-align: center;
    line-height: 1.375em;
    @media (max-width: 490px) {
      font-size: 0.875em;
    }
  }

  .icon {
    width: 3.125em;
    position: absolute;
    right: -3.125em;
  }

  .record-item {
    margin-top: 1.25em;
    position: relative;
    p {
      width: 100%;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 1.875em;

      @media (max-width: 600px) {
        font-size: 1em;
      }
    }
    strong {
      display: inline-block;
      margin: 0.1em 0 0.5em;
      font-size: 2em;
      font-weight: 500;
      @media (max-width: 600px) {
        font-size: 3.125em;
        margin: 0.3em 0 0.5em;
      }
    }
    small {
      font-size: 1.25em;
    }
    img {
      max-width: 16.25em;
      @media (max-width: 600px) {
        max-width: 13.75em;
      }
    }
  }
}

.table-title {
  background-color: var(--blue);
}

table {
  thead {
    border-bottom: 0.125em solid var(--blue);
  }
  tbody {
    td {
      border-bottom: 0.0625em solid var(--blue);
      line-height: 1.5em;
      padding: 0.9375em;
    }
  }

  .finish-icon {
    padding: 0.5em;
    border: 0.125em solid var(--blue);
    border-radius: 6.25em;
    .v-icon {
      color: var(--blue);
    }
  }
}

.dialog-btn {
  padding-bottom: 2px;
  font-size: 0.9em !important;
}

.transfer-dialog {
  table {
    width: 100%;
    border-collapse: collapse;
    td {
      height: 55px;
      padding: 0 5%;
      line-height: 1em;
      border: 1px solid;
      &:first-child {
        text-align: center;
      }
    }
    .main-item {
      font-weight: 500;
      font-size: 1.5em;
      letter-spacing: 0.05em;
    }
  }
}
</style>
