import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import { state } from '@/state'
import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
import { defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
import { useRoute } from 'vue-router'
import styles from './index.module.less'
import iconImage from '../images/icon-photo-default.png'
import OSticky from '@/components/o-sticky'
import OFullRefresh from '@/components/o-full-refresh'
import OImage from '@/components/o-image'
export default defineComponent({
  name: 'photo-detail',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    console.log('🚀 ~ route', route)
    const data = reactive({
      refreshing: false,
      loading: false,
      finished: false,
      pages: {
        page: 1,
        rows: 20
      },
      list: [] as any[]
    })

    const getList = async () => {
      if (data.loading) return
      data.loading = true
      if (data.refreshing) {
        data.list = []
        data.pages.page = 1
      }
      try {
        const res = await request.post(`${state.platformApi}/orchestraPhoto/page`, {
          data: {
            ...data.pages,
            orchestraPhotoAlbumId: route.query.photoId
          },
          hideLoading: data.refreshing
        })
        if (Array.isArray(res?.data?.rows)) {
          data.list = data.list.concat(res.data.rows)
          data.pages.page = res.data.current + 1
          data.finished = !res.data.next
        } else {
          data.finished = true
        }
      } catch {
        data.finished = true
      }
      data.refreshing = false
      data.loading = false
    }

    // 预览图片
    const onShowImage = (index: number) => {
      const files = data.list.map((file: any) => {
        return file.fileUrl
      })

      showImagePreview({
        images: files,
        startPosition: index,
        closeable: true
      })
    }

    onMounted(() => {
      getList()
      document.title = (route.query.name as any) || ''
    })

    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader />
        </OSticky>
        <OFullRefresh
          modelValue={data.refreshing}
          onRefresh={() => {
            data.refreshing = true
            getList()
          }}
        >
          <List
            loading={data.loading}
            loadingText=" "
            finished={data.finished}
            finishedText=" "
            onLoad={getList}
            immediateCheck={false}
          >
            <div class={styles.phoneListDetail}>
              <TransitionGroup name="van-fade">
                {data.list.map((item: any, index: number) => (
                  <div
                    key={`index-${index}`}
                    class={styles.gridItem}
                    onClick={() => onShowImage(index)}
                  >
                    <OImage class={styles.gridImg} src={item.fileUrl} />
                  </div>
                ))}
                {!data.loading && !data.list.length && (
                  <OEmpty key="OEmpty1" btnStatus={false} tips="暂无照片" />
                )}
              </TransitionGroup>
            </div>
          </List>
        </OFullRefresh>
      </div>
    )
  }
})