import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import { View } from '@tarojs/components'
import { showMyToast } from '@/common/utils'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import { getDeviceList } from '@/actions/asyncCounter'
import FilmListItem from '@/conpoments/film_list_item'

import './index.scss'

type PageStateProps = {
  list: any[]
  count: number
}

type PageDispatchProps = {
  getDeviceListData: (page: number) => void
}

type PageOwnProps = {
  height?: number
}

export interface IMilmListItme {
  filmId: string
  filmName: string
  templateUrl: string
  equipmentCount: number
}

interface PageState {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Films {
  props: IProps
  state: PageState
}

@connect(
  ({ counter }) => {
    const { list, count } = counter.deviceData
    return { list, count }
  },
  dispacth => ({
    getDeviceListData(page: number) {
      dispacth(getDeviceList(page))
    }
  })
)
class Films extends Component {
  protected page = 1

  async componentWillMount() {
    this.getData()
  }
  componentDidShow() {
    this.getData()
  }
  async getData() {
    this.props.getDeviceListData(this.page)
  }

  async handleItem({ filmId }: IMilmListItme) {
    Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => {
      if (confirm) {
        try {
          await api.common.removeFilm(filmId)
          this.getData()
          showMyToast({ title: '删除成功~' })
        } catch (error) {
          console.error(error)
          showMyToast({ title: '失败成功~' })
        }
      }
    })
  }

  goDetail({ filmId }: IMilmListItme) {
    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
  }

  async onDownRefresh(done: any) {
    this.page = 1
    await this.getData()
    setTimeout(() => {
      done()
    }, 500)
  }

  async onScrollToLower(done: any) {
    this.page++
    await this.getData()
    done()
  }

  shouldComponentUpdate(nextProps: IProps) {
    const { list } = this.props
    const { list: _list } = nextProps
    return list !== _list
  }

  render() {
    const { list, height, count } = this.props
    return (
      <View className="films">
        <ListView
          count={count}
          height={height}
          dataListLength={list.length}
          pullingUp={done => this.onScrollToLower(done)}
          pullingDown={done => this.onDownRefresh(done)}
        >
          {list.map(item => (
            <AtSwipeAction
              autoClose
              key={item.filmId}
              onClick={() => this.handleItem(item)}
              options={[
                {
                  text: '删除',
                  style: {
                    backgroundColor: '#FF4949'
                  }
                }
              ]}
            >
              <FilmListItem onClick={() => this.goDetail(item)} {...item} />
            </AtSwipeAction>
          ))}
        </ListView>
      </View>
    )
  }
}
export default Films as ComponentClass<PageOwnProps, PageState>