import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import { connect } from '@tarojs/redux'
import { View, Text } 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, showTemplate: string) => void
}

type PageOwnProps = {
  height?: number
}

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

interface PageState {
  showTemplate: string
}

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, showTemplate: string) {
      dispacth(getDeviceList(page, showTemplate))
    }
  })
)
class Films extends Component {
  protected page = 1

  async componentWillMount() {
    this.getData()
  }
  componentDidShow() {
    this.getData()
  }
  async getData() {
    const { showTemplate } = this.state
    this.props.getDeviceListData(this.page, showTemplate)
  }

  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: '失败成功~' })
        }
      }
    })
  }
  typeChange(value) {
    this.setState(
      {
        showTemplate: value
      },
      () => {
        this.page = 1
        this.getData()
      }
    )
  }

  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 { showTemplate } = this.state
    const { list: _list } = nextProps
    return list !== _list || !!showTemplate
  }

  render() {
    const { list, height, count } = this.props
    let { showTemplate } = this.state
    showTemplate = showTemplate || 'HORIZONTAL'
    return (
      <View className="films">
        <View className="film-search-bar">
          <View className="type-tab">
            <Text
              onClick={() => {
                this.typeChange('HORIZONTAL')
              }}
              className={
                showTemplate === 'HORIZONTAL'
                  ? 'type-tab-item type-tab-item-active'
                  : 'type-tab-item'
              }
            >
              横版
            </Text>
            <Text
              onClick={() => {
                this.typeChange('VERTICAL')
              }}
              className={
                showTemplate === 'VERTICAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
              }
            >
              竖版
            </Text>
            <Text
              onClick={() => {
                this.typeChange('OTHER')
              }}
              className={
                showTemplate === 'OTHER' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
              }
            >
              异形屏
            </Text>
          </View>
        </View>
        <ListView
          count={count}
          height={height && height - 60}
          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>