import ColHeader from '@/components/col-header'
import { useEventTracking } from '@/helpers/hooks'
import request from '@/helpers/request'
import dayjs from 'dayjs'
import { ImagePreview, NavBar } from 'vant'
import { defineComponent } from 'vue'
import styles from './help-center-detail.module.less'

export default defineComponent({
  name: 'help-center-detail',
  data() {
    const query = this.$route.query
    return {
      catalogType: query.catalogType,
      documentTitle: query.catalogType === 'ANALYSIS' ? '帮助中心详情' : '',
      detail: {
        title: '',
        createTime: '',
        content: ''
      }
    }
  },
  async mounted() {
    try {
      const query = this.$route.query
      const res = await request.get(
        '/api-cms/helpCenterContent/get/' + query.id
      )
      const { title, releaseTime, createTime, content, catalogId } = res.data
      this.detail = {
        title,
        createTime:
          catalogId == 2
            ? dayjs(releaseTime).format('YYYY-MM-DD HH:mm:ss')
            : dayjs(createTime).format('YYYY-MM-DD HH:mm:ss'),
        content
      }

      const documentTitle = catalogId == 2 ? '公告详情' : ' '
      document.title = documentTitle
    } catch {}
    useEventTracking('帮助中心')
  },
  methods: {
    onShowImg(target: any) {
      const { localName } = target.srcElement
      if (localName !== 'img') {
        return
      }
      let startPosition = 0
      const domList = document.querySelectorAll('.msgWrap img')
      const imgList = Array.from(domList).map((item: any, index: number) => {
        if (target.srcElement == item) {
          startPosition = index
        }
        return item.src
      })

      ImagePreview({
        images: imgList,
        startPosition: startPosition,
        closeable: true
      })
    }
  },
  render() {
    return (
      <div class={styles['help-center-detail']}>
        {this.catalogType === 'ANALYSIS' && (
          // <ColHeader title={this.documentTitle} isBack />
          <NavBar
            title={this.documentTitle}
            left-arrow
            fixed
            onClick-left={() => {
              this.$router.back()
            }}
          ></NavBar>
        )}

        <h2>{this.detail.title}</h2>
        <div class={styles.titleInfo}>
          <p>酷乐秀</p>
          <p>{this.detail.createTime}</p>
        </div>
        <div
          class={[styles.imgContent, 'msgWrap']}
          // onClick={this.onShowImg}
          v-html={this.detail.content}
        ></div>
      </div>
    )
  }
})