<div class="progress_container" v-if="!progressDone">
        <div class="progress_row">
          <a-progress type="line" :percent="progressValue" status="active" />
        </div>
        <div class="progress_text">
          {{ progressTxt }}
        </div>
</div>


<script>
  import { fetchEventSource } from '@microsoft/fetch-event-source'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
   export default {
        data () {
          return {
            speed: 30,
            progressValue: 0,//進度條初始值
            progressTxt: '',//進度條文字展示默認值
            eventSource: null,
            abortController: null,
            checkMessage: [],
            checkResult: {},
            resultData: [],
            submitUnable: true,
            progressDone: false
          }
        },
      created () {
        this.connectSSE()
      },
      destroyed () {
          this.stopSSE()
      },
      methods: {
        connectSSE () {
          this.abortController = new AbortController() // 終止or結束會話，做了個全局的...
          const url = process.env.VUE_APP_API_BASE_URL + `自己的請求數(shù)據(jù)接口`
          const token = storage.get(ACCESS_TOKEN)
          // 開始會話鏈接，也做了個全局的......
          this.eventSource = fetchEventSource(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              [ACCESS_TOKEN]: token
            },
            // 傳參只能發(fā)送文本格式的數(shù)據(jù)
            body: JSON.stringify({
           
            }),
            signal: this.abortController.signal,
            onopen: (event) => {
              console.log(event, 'SSE在連接打開時被調用')
            },
            onmessage: (event) => {
              // console.log('SSE會在通過事件源收到數(shù)據(jù)時觸發(fā)')
              // console.log('接口返回', JSON.parse(event.data))
              //我這里是判斷我請求回來的數(shù)據(jù)里是否包含'[DONE]'，他是數(shù)組里的最后一項，表示加載完成
              if (!event.data.includes('[DONE]')) {
                const data = JSON.parse(event.data)
                const text = data.message
                const percent = data.percent
                const message = data.message
                if (text === 'connect') {
                  // 連接成功，開始檢測邏輯
                  this.progressDone = false
                  this.progressValue = 0
                  this.progressTxt = '數(shù)據(jù)檢查中，該過程可能需要一段時間，請勿關閉窗口'
                
                  this.getTurnCheck()
                 return false
                }
                //定時器，控制進度條和文字的展示速度
                this.speed += 300
                this.timer = setTimeout(() => {
                  this.progressValue = Number(percent)
                  this.progressTxt = message
                  if (this.progressValue === 100 && !this.progressDone) {
                 
                    this.stopSSE()
                  }
                }, this.speed)
              }
              
              if (event.data.includes('[DONE]')) {
              }
              
            },
            onerror: () => {
              console.log('SSE拋出異常onerror')
              this.stopSSE()
            },
            // onclose函數(shù)是會話結束正常關閉觸發(fā)，但幾乎沒有做到這步，不執(zhí)行這個回調，不知道什么原因
            onclose: () => {
              console.log('onclose') 
            }
          })
        },
        // 停止SSE
        async stopSSE () {
          // 關閉業(yè)務，執(zhí)行關閉sse數(shù)據(jù)接口
          await this.getCloseSse()
          if (this.abortController) {
            this.timer && clearTimeout(this.timer)
            console.log('SSE結束會話了')
            this.abortController.abort() // 結束會話
          }
        },
        //檢查數(shù)據(jù)的接口
        async getTurnCheck () {
          const params = {
            
          }
      
        },
        //關閉sse接口
        async getCloseSse () {
          const params = {
            
          }
          const [err, res] = await to(closeSse(params))
          if (err) return false
        }

      },


    }
</script>