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 item from '@/student/coupons/item'
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 status = sessionStorage.getItem('mass-message-send')
    const state = reactive({
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      tabValue: status || 'WAIT',
      params: {
        keyword: null as any,
        sendStatus: status || 'WAIT',
        page: 1,
        rows: 10
      },
      isClick: false
    })
    const getList = async () => {
      try {
        if (state.isClick) return
        state.isClick = true
        const res = await request.post('/api-school/imMessageBatchSending/page', {
          data: {
            ...state.params
          }
        })
        state.isClick = false
        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.pages
        state.params.page = result.current + 1
        state.dataShow = state.list.length > 0
      } catch {
        state.isClick = false
        state.dataShow = false
        state.finished = true
      }
    }

    // 搜索
    const onSearch = () => {
      state.params.page = 1
      state.list = []
      state.dataShow = true // 判断是否有数据
      state.loading = false
      state.finished = false
      getList()
    }

    // 查看详情
    const onDetail = async (item: any) => {
      router.push({
        path: '/create-message',
        query: {
          id: item.id
        }
      })
    }

    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}
            v-model:active={state.tabValue}
            onChange={(val: string) => {
              state.params.sendStatus = val
              onSearch()
              sessionStorage.setItem('mass-message-send', val)
            }}
          >
            <Tab title="待发送" name="WAIT"></Tab>
            <Tab title="已发送" name="SEND"></Tab>
          </Tabs>

          <OSearch
            background="#f6f8f9"
            inputBackground="white"
            placeholder="请输入群聊/学员名称"
            onSearch={(val: string) => {
              console.log('val', val)
              state.params.keyword = val
              onSearch()
            }}
          />
        </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 onClick={() => onDetail(item)} style={{ marginBottom: '12px' }}>
                <Cell
                  class={[styles.waitSend, item.sendStatus === 'SEND' && styles.messageSend]}
                  titleStyle={{ flex: '1 auto' }}
                >
                  {{
                    title: () => (
                      <div class={styles.time}>
                        {item.sendStatus === 'WAIT' && (
                          <Icon name="clock-o" class={styles.clockO} />
                        )}

                        {item.sendTime}
                      </div>
                    ),
                    value: () => <span>{snedStatus[item.sendStatus]}</span>
                  }}
                </Cell>
                <Cell valueClass={[styles.messageContent, 'van-multi-ellipsis--l3']}>
                  {item.textMessage}
                </Cell>
              </CellGroup>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} tips="暂无群发消息" />
        )}
      </div>
    )
  }
})