<template>
  <div class="page-content">
    <div class="tabbar-list top-select-list" ref="pageContent">
      <div class="top-select border-bottom-1">
        <van-grid :border="false" :gutter="10" :column-num="2">
          <van-grid-item>
            <top-select1 :type="'speak_type'" :initialName="'类型'" @refresh="refreshBySpeakType"
              :selectName="speakTypeName" :selectValue="speakType" />
          </van-grid-item>
        </van-grid>
      </div>

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="list.length > 0">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
          :immediate-check="false">
          <van-cell v-for="(item, index) in list" :key="item.speakId" @click="showDetail(item, index)"
            :id="item.speakId">
            <div class="d-flex justify-content-between">
              <div class="name1 text-start ">
                <van-tag :class="item.tagColor" size="medium">{{ item.speakTypeName }}</van-tag>
              </div>
              <div class="name1 stockNames balck-text-color">{{ item.sysDate }}</div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
      <van-empty v-else />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, onUnmounted } from 'vue'
import TopSelect1 from '@/components/top-select1.vue'
import emitter from '@/utils/mitt'
import { workSpeakList } from '@/utils/api'

import speakInfoStore from '@/stores/speakInfo'
const speakInfo = speakInfoStore()

import { listLoadAndRefresh } from '@/mixins/list-load-and-refresh'
const scrollPage = () => {
  nextTick(() => {
    if (speakInfo.speakId && speakInfo.index) {
      speakTypeName.value = speakInfo.speakTypeName
      speakType.value = speakInfo.speakType
      let pageIndex1 = speakInfo.index / 20
      let pageIndex2 = speakInfo.index % 20
      if (pageIndex2 > 1) {
        pageIndex1++
      }
      if (pageIndex1 > curPage.value) {
        onLoad()
      } else {
        const el = document.getElementById(speakInfo.speakId)
        if (el) {
          el.scrollIntoView({ behavior: 'smooth' })
        }
        speakInfo.speakId = ''
        speakInfo.index = 0
        emitter.emit('hiddenLoading', '')
      }
    } else {
      emitter.emit('hiddenLoading', '')
    }
  })
}

const getData = async () => {
  const { data } = await workSpeakList({
    curPage: curPage.value,
    limit: 20,
    speakType: speakType.value || null
  })
  data.list.map((ele: any) => {
    switch (ele.speakType) {
      case 'CH':
        ele.tagColor = 'primary-background-color'
        break
      case 'CF':
        ele.tagColor = 'danger-background-color'
        break
      case 'YJZH':
        ele.tagColor = 'success-background-color'
        break
      case 'SALE':
        ele.tagColor = 'warning-background-color'
        break
    }
  })
  return data
}
const { refreshing, finished, loading, list, onLoad, onRefresh, curPage } = listLoadAndRefresh(getData, 'internal', scrollPage)

let speakTypeName = ref('类型')
let speakType = ref('')

const refreshBySpeakType = (e: any) => {
  speakType.value = e.value
  speakTypeName.value = e.name
  onRefresh()
}

import { showFile } from '@/mixins/show-file'
const { loadingFile } = showFile()
const showDetail = (item: any, index: number) => {
  speakInfo.index = index
  speakInfo.speakId = item.speakId
  speakInfo.speakTypeName = speakTypeName.value
  speakInfo.speakType = speakType.value
  loadingFile(item.tencentRecordUrl)
}

const onRefresh1 = () => {
  speakTypeName.value = speakInfo.speakTypeName
  speakType.value = speakInfo.speakType
  onRefresh()

}
onRefresh1()

onUnmounted(() => {
  speakInfo.speakTypeName = '类型'
  speakInfo.speakType = ''
})
</script>

<style lang='scss' scoped>
.grid-item-text {
  max-width: calc(50vw - 28px) !important;

  @media screen and (min-width: 678px) {
    max-width: 310px !important;
  }
}
</style>