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

export default defineComponent({
  name: 'theory-detail',
  data() {
    return {
      detail: {
        title: '',
        createTime: '',
        content: ''
      }
    }
  },
  async mounted() {
    try {
      const query = this.$route.query
      const res = await request.get('/api-cms/news/query/' + query.id)
      const { title, createTime, content } = res.data
      this.detail = {
        title,
        createTime: dayjs(createTime).format('YYYY-MM-DD HH:mm:ss'),
        content
      }
    } catch {}
  },
  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']}>
        <ColHeader />
        <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>
    )
  }
})
