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, showImagePreview } from 'vant'
import { defineComponent, onMounted, reactive } 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'
export default defineComponent({
  name: 'photo-detail',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRoute()
    console.log("🚀 ~ route", route)
    const data = reactive({
      loading: false,
      finished: false,
      pages: {
        page: 1,
        rows: 20
      },
      list: [] as any[]
    })

    const getList = async () => {
      data.loading = true
      try {
        const res = await request.post(`${state.platformApi}/orchestraPhoto/page`, {
          data: {
            ...data.pages,
            orchestraPhotoAlbumId: route.query.orchestraPhotoAlbumId
          }
        })
        if (Array.isArray(res?.data?.rows)) {
          data.list = data.list.concat(res.data.rows)
          data.pages.page += 1
          if (!res.data.rows.length) {
            data.finished = true
          }
        }
      } catch {}
      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 string) || '我的乐团'} />
        </OSticky>
        <div class={styles.phoneDetail}>
          {!data.loading && !!data.list.length && (
            <List
              v-model:loading={data.loading}
              finished={data.finished}
              finishedText="没有更多数据"
              onLoad={getList}
              immediateCheck={false}
            >
              <Grid columnNum={3}>
                {data.list.map((item: any, index: number) => (
                  <GridItem onClick={() => onShowImage(index)}>
                    {item.fileUrl ? (
                      <Image class={styles.gridImg} style={{height: 'calc(100vw / 3)'}} src={item.fileUrl} fit="cover" />
                    ) : (
                      <div class={styles.gridImg}>
                        <Image src={iconImage} fit="cover" />
                      </div>
                    )}

                  </GridItem>
                ))}
              </Grid>
            </List>
          )}
          {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无相片" />}
        </div>
      </div>
    )
  }
})