<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/main";
import { required } from "@/utils";
import { useI18n } from "vue-i18n";
import type { VideoCreate } from "@/interfaces";
import router from "@/router";

const { t } = useI18n();
const valid = ref(true);
const dialog = ref(false);
const title = ref("");
const zipFiles = ref();
const Form = ref();
let anchor = ref(0);
const anchorList = reactive([
  {
    anchor_id: 0,
    language_id: 1,
    name: "Angela",
  },
  {
    anchor_id: 1,
    language_id: 1,
    name: "Peggy",
  },
  {
    anchor_id: 2,
    language_id: 1,
    name: "Jocelyn",
  },
  {
    anchor_id: 3,
    language_id: 1,
    name: "Summer",
  },
]);

let anchorLang = ref("中文");
let items = reactive([
  { lang: "中文", id: 0 },
  { lang: "英文", id: 1 },
]);

// 取得圖片路徑
const getImageUrl = (name: string) => {
  return new URL(`../../assets/img/anchor/${name}.webp`, import.meta.url).href;
};

const mainStore = useMainStore();

watch(dialog, (newVal, oldVal) => {
  if (!newVal) {
    router.push("/main/progress");
  }
});

async function Submit() {
  setTimeout(() => {
    dialog.value = true;
  }, 2000);
  await (Form as any).value.validate();
  if (valid.value) {
    valid.value = false;

    const video_data: VideoCreate = {
      title: title.value,
      anchor_id: anchor.value,
      lang_id: 0,
    };

    await mainStore.uploadPlot(video_data, zipFiles.value[0]);
    // (Form as any).value.reset();
  }
}
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <h3 class="card-title mb-3">{{ t("makeArticle") }}</h3>
      </v-card-title>
      <v-card-text>
        <v-form v-model="valid" ref="Form">
          <v-text-field
            :label="$t('articleTitle')"
            v-model="title"
            :rules="required"
            prepend-icon="title"
          >
          </v-text-field>
          <v-text-field :label="$t('articleLink')" prepend-icon="link">
          </v-text-field>
          <v-textarea
            :label="$t('articleContent')"
            prepend-icon="edit_document"
          ></v-textarea>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="Submit" :disabled="!valid">
          {{ t("send") }}
        </v-btn>
      </v-card-actions>
    </v-card>

    <template>
      <div class="text-center">
        <v-dialog v-model="dialog" width="auto">
          <v-card>
            <v-card-text>
              <section class="d-flex flex-column align-center">
                <v-icon
                  style="font-size: 70px"
                  icon="info"
                  color="orange-darken-3"
                />
                <p class="mt-3">影片處理需要約 5-10 分鐘，敬請耐心等候</p>
              </section>
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" block @click="dialog = false">{{
                t("close")
              }}</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </template>
  </v-container>
</template>

<style lang="scss">
.anchor-list {
  padding-left: 40px;
  img {
    width: 130px;
    height: 110px;
    object-fit: cover;
  }
  .v-card-item {
    padding: 0;
    text-align: center;
    .v-card-title {
      font-size: 18px;
    }
  }
  .bg-success {
    background: linear-gradient(
      -225deg,
      rgb(234, 84, 19) 35%,
      rgb(178, 69, 146) 100%
    ) !important;
  }
  .v-expansion-panel-title {
    height: 55px;
    min-height: 0;
  }
  .v-expansion-panel-text__wrapper {
    padding: 0 !important;
  }
}
.step-list {
  list-style: none;
  img {
    width: 100%;
    max-width: 800px;
  }
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    p {
      line-height: 32px;
    }
    h4 {
      margin: 20px auto;
      color: #ea5413;
      font-weight: bold;
      text-align: center;
      line-height: 34px;
      font-size: 20px;
    }
  }

  .link-btn {
    display: inline-block;
    padding: 12px 20px;
    margin-top: 25px;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
    background: #ea5413;
    transition: all 0.3s;
    &:hover {
      opacity: 0.8;
    }
  }

  .point-list {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-left: 40px;
  }

  .excerpt::before {
    content: "";
    font-weight: bold;
    display: inline-block;
    border: 5px solid #ea5413;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 2px;
  }
}
</style>
