import OHeader from '@/components/o-header'
import {
  Cell,
  CellGroup,
  Icon,
  Image,
  List,
  Picker,
  Popup,
  Step,
  Steps,
  Swipe,
  SwipeItem
} from 'vant'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconStep from './images/icon-step.png'
import iconStepCalendar from './images/icon-step-calendar.png'
import request from '@/helpers/request'
import OEmpty from '@/components/o-empty'
import dayjs from 'dayjs'
import OVideo from '@/components/o-video'
import { state as globalState } from '@/state'

export default defineComponent({
  name: 'orchestra-story',
  props: {
    orchestraId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      isClick: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
        refreshing: false,
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      params: {
        type: null,
        page: 1,
        rows: 20
      }
    })

    const getList = async () => {
      try {
        if (state.isClick) return
        state.isClick = true
        const res = await request.post(`${globalState.platformApi}/orchestraStory/page`, {
          data: {
            orchestraId: props.orchestraId
          },
          hideLoading: true
        })
        state.listState.loading = false
        state.listState.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.listState.finished = result.current >= result.pages
        state.params.page = result.current + 1
        state.listState.dataShow = state.list.length > 0
        state.isClick = false
      } catch {
        state.listState.dataShow = false
        state.listState.finished = true
        state.listState.refreshing = false
        state.isClick = false
      }
    }
    watch(
      () => props.orchestraId,
      () => {
        state.params.page = 1
        state.list = []
        state.listState.finished = false
        getList()
      }
    )

    const videoRef: any = ref([])
    const onPlay = (index: any) => {
      videoRef.value.forEach((item: any, child: any) => {
        if (child !== index) {
          item.onStop()
        }
      })
    }
    onMounted(() => {
      getList()
    })
    return () => (
      <div
        class={[styles.orchestraStory, !state.listState.dataShow && 'emptyRootContainer']}
        style={{ height: '100%', minHeight: 'auto' }}
      >
        {state.listState.dataShow ? (
          <List
            // v-model:loading={state.listState.loading}
            finished={state.listState.finished}
            finishedText=" "
            class={[styles.liveList]}
            onLoad={getList}
            immediateCheck={false}
          >
            <Steps direction="vertical" class={styles.storySteps}>
              {state.list.map((item: any, index: number) => (
                <Step
                  v-slots={{
                    'inactive-icon': () => <Image src={iconStep} class={styles.iconInactive} />,
                    'active-icon': () => <Image src={iconStepCalendar} class={styles.iconActive} />
                  }}
                >
                  <div class={styles.stepTimes}>
                    <div class={styles.stepTime}>
                      {dayjs(item.createTime).format('YYYY年MM月DD日')}
                    </div>
                  </div>
                  <p class={[styles.content, 'van-multi-ellipsis--l2']}>{item.content}</p>

                  <Swipe class={styles.storySwipe}>
                    {item.attachments &&
                      item.attachments.map((child: any) => (
                        <SwipeItem>
                          {item.type === 'IMAGE' && (
                            <div
                              class={styles.swipeImg}
                              style={
                                child.url
                                  ? {
                                      backgroundImage: `url(${child.url})`,
                                      backgroundSize: 'cover'
                                    }
                                  : ''
                              }
                            ></div>
                          )}
                          {item.type === 'VIDEO' && (
                            <OVideo
                              src={child.url}
                              height={'100%'}
                              poster={child.coverImage}
                              class={styles.swipeImg}
                              ref={(el: any) => (videoRef.value[index] = el)}
                              onPlay={() => onPlay(index)}
                            />
                          )}
                        </SwipeItem>
                      ))}
                  </Swipe>
                </Step>
              ))}
            </Steps>
          </List>
        ) : (
          <OEmpty btnStatus={false} tips="暂无事迹" />
        )}
      </div>
    )
  }
})