import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { snedStatus } from '@/constant'
import request from '@/helpers/request'
import { Cell, CellGroup, Icon, List, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import styles from './index.module.less'

export default defineComponent({
  name: 'mass-message',
  setup() {
    const router = useRouter()
    const state = reactive({
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        search: null,
        page: 1,
        rows: 10
      }
    })
    const getList = async () => {
      try {
        const res = await request.post('/api-school/imMessageBatchSending/page', {
          data: {
            ...state.params
          }
        })
        state.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.finished = result.current >= result.totalPage
        state.params.page = result.current + 1
        state.dataShow = state.list.length > 0
      } catch {
        state.dataShow = false
        state.finished = true
      }
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class={styles.massMessage}>
        <OSticky position="top">
          <OHeader border={false}>
            {{
              right: () => (
                <span
                  style="color: var(--van-primary-color)"
                  onClick={() => {
                    router.push('/create-message')
                  }}
                >
                  消息群发
                </span>
              )
            }}
          </OHeader>
          <Tabs lineWidth={18}>
            <Tab title="待发送"></Tab>
            <Tab title="已发送"></Tab>
          </Tabs>

          <OSearch
            background="#f6f8f9"
            inputBackground="white"
            placeholder="请输入群聊/学员名称"
            onSearch={(val: string) => {
              console.log('val', val)
            }}
          />
        </OSticky>

        {state.dataShow ? (
          <List
            v-model:loading={state.loading}
            finished={state.finished}
            finishedText=" "
            class={[styles.liveList]}
            onLoad={getList}
            immediateCheck={false}
          >
            {state.list.map((item: any) => (
              <CellGroup inset>
                <Cell class={styles.waitSend} titleStyle={{ flex: '1 auto' }}>
                  {{
                    title: () => (
                      <div class={styles.time}>
                        <Icon name="clock-o" class={styles.clockO} />
                        {item.sendTime}
                      </div>
                    ),
                    value: () => <span>{snedStatus[item.sendStatus]}</span>
                  }}
                </Cell>
                <Cell valueClass={styles.messageContent}>{item.textMessage}</Cell>
              </CellGroup>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无群发消息" />
        )}
      </div>
    )
  }
})