<template>
  <div>
    <div class="d-flex pa-3">
      <v-textarea
        outlined
        name="input-7-4"
        class="mr-3"
        dense
        rows="1"
        label="url抓取数据"
        placeholder="请输入需要爬取的页面，多个页面请用 ',' 隔开"
        hide-details
        v-model="urls"
      ></v-textarea>
      <v-btn color="primary" @click="handleRun">执行</v-btn>
    </div>
    <v-container>
      <v-row v-if="contents.length">
        <v-col
          md="6"
          v-for="(content, index) in contents"
          :key="index"
        >
          <v-card
            height="500"
            elevation="2"
            :loading="!content.data"
            class="d-flex flex-column"
          >
            <v-card-title class="justify-space-between">
              <div class="overflow">{{ content.url }}</div>
              <div>
                <v-btn icon class="mr-3" @click="showPage(content)"><v-icon>mdi-file-eye-outline</v-icon></v-btn>
                <v-btn icon @click="handleReload(content)"><v-icon>mdi-refresh</v-icon></v-btn>
              </div>
            </v-card-title>
            <v-divider></v-divider>
            <div v-if="content.data && content.data.data">
              <v-tabs v-model="content.tab">
                <v-tab v-for="(_, k) in content.data.data[0]" :key="k">{{ k }}</v-tab>
              </v-tabs>
            </div>
            <v-divider></v-divider>
            <div v-if="content.data" class="flex-grow-1 flex-shrink-1 overflow-y-auto" >
              <template v-if="typeof content.data === 'string'">{{ content.data }}</template>
              <v-tabs-items v-else v-model="content.tab">
                <v-tab-item v-for="(v, k) in content.data.data[0]" :key="k" class="pa-3 text-subtitle-2">
                  <template v-if="k === 'html'">
                    <v-btn
                      icon
                      color="primary"
                      style="position: sticky; top: 20px; float: right; z-index: 99"
                      @click="content.showHtml = !content.showHtml">
                      <v-icon>mdi-file-arrow-left-right</v-icon>
                    </v-btn>
                    <pre v-if="!content.showHtml">{{ v }}</pre>
                    <div v-else v-html="v"></div>
                  </template>
                  <pre v-else>{{ v }}</pre>
                </v-tab-item>
              </v-tabs-items>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <v-navigation-drawer
      v-model="drawer"
      fixed
      hide-overlay
      right
      temporary
      width="800"
      style="z-index: 99999999"
    >
      <iframe style="width: 100%; height: 100%;" :src="drawerUrl" frameborder="0"></iframe>
    </v-navigation-drawer>
  </div>
</template>

<script>
import FirecrawlApp from '@mendable/firecrawl-js'
export default {
  name: 'page-parsing',
  data () {
    return {
      drawer: false,
      drawerUrl: null,
      urls: 'https://mp.weixin.qq.com/s/gtCcUeXZUXkQi5CR25vjew',
      contents: []
    }
  },
  async created () {

  },
  methods: {
    showPage (content) {
      this.drawer = true
      this.drawerUrl = content.url
    },
    async handleReload (content) {
      content.data = null
      const res = await this.handle(content.url)
      content.tab = 0
      content.data = res
    },
    async handleRun () {
      if (!this.urls) {
        return
      }
      this.contents = []
      const urls = this.urls.split(',')

      const run = async (url) => {
        this.contents.push({
          url,
          tab: 0,
          showHtml: false,
          data: null
        })
        const res = await this.handle(url)
        this.$set(this.contents, this.contents.length - 1, {
          url,
          tab: 0,
          showHtml: false,
          data: res
        })
        if (this.contents.length < urls.length) {
          await run(urls[this.contents.length])
        }
      }
      await run(urls[this.contents.length])
    },
    async handle (url) {
      try {
        const app = new FirecrawlApp({ apiKey: 'fc-85c1550c6db64ce4ae8f2d2cd2606e6f' })

        const crawlResponse = await app.crawlUrl(url, {
          limit: 100,
          scrapeOptions: {
            formats: ['markdown', 'html']
          }
        })

        if (!crawlResponse.success) {
          throw new Error(`Failed to crawl: ${crawlResponse.error}`)
        }

        return crawlResponse
      } catch (error) {
        return error.message
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.overflow {
  white-space: nowrap;         /* 禁止换行 */
  overflow: hidden;            /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  flex: 1;
  width: 0;
}
</style>
