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 } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconImage from '../images/icon-photo-default.png'
import OSticky from '@/components/o-sticky'
export default defineComponent({
  name: 'photo-detail',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    console.log('🚀 ~ route', route)
    const data = reactive({
      loading: false,
      finished: false,
      pages: {
        page: 1,
        rows: 20
      },
      list: [] as any[]
    })

    const getList = async () => {
      if (data.loading) return
      data.loading = true
      try {
        const res = await request.post(`${state.platformApi}/orchestraPhotoAlbum/page`, {
          data: {
            ...data.pages,
            orchestraId: props.orchestraId || route.query.orchestraId,
            parentId: route.query.id
          }
        })
        if (Array.isArray(res?.data?.rows)) {
          data.list = data.list.concat(res.data.rows)
          data.pages.page += 1
          data.finished = !res.data.next
        } else {
          data.finished = true
        }
      } catch {
        data.finished = true
      }
      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>
          <OHeader title={(route.query.name as any) || '相册'} />
        </OSticky>
        <div class={styles.phoneDetail}>
          {!data.loading && !!data.list.length && (
            <List
              // loading={data.loading}
              loadingText=" "
              finished={data.finished}
              finishedText=" "
              onLoad={getList}
              immediateCheck={false}
            >
              <div class={styles.photoWrap}>
                {data.list.map((item: any, index: number) => (
                  <div
                    class={styles.photoItem}
                    onClick={() => {
                      router.push({
                        path: '/photo-list-detail',
                        query: {
                          photoId: item.id
                        }
                      })
                    }}
                  >
                    <div class={styles.imgSection}>
                      <div
                        class={styles.gridImg}
                        style={
                          item.coverUrl
                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
                            : ''
                        }
                      ></div>
                    </div>

                    <div class={[styles.gridName, 'van-ellipsis']}>{item.name || ''}</div>
                    <div class={styles.gridDes}>{item.photoCount || 0}张</div>
                  </div>
                ))}
              </div>
            </List>
          )}
          {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无相册" />}
        </div>
      </div>
    )
  }
})
