import api from '@/api/index'
import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui'
import ListView from '@/conpoments/list_view'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import DeviceItem from '@/conpoments/device_item'
import { showMyToast } from '@/common/utils'

import './index.scss'
export interface IDeviceItem {
  filmId: any
  filmName: any
  mqttTopic: string
  equipmentType: any
  equipmentId: string
  equipmentUrl: string
  equipmentName: string
  equipmentState: string
  calendarId?: string
}

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

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

type PageOwnProps = {
  height: number
}

type PageState = {
  showModal: boolean
  deviceList: IDeviceItem[]
  groupId: string | ''
  list: any[]
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface DeviceGroup {
  props: IProps
  state: PageState
}

class DeviceGroup extends Component {
  config: Config = {
    navigationBarTitleText: '组详情'
  }
  protected page = 1
  constructor(props: any) {
    super(props)
    const { id, name } = this.$router.params
    this.state = {
      deviceList: [],
      showModal: false,
      groupId: id,
      list: []
    }
    this.selectAddDevice = this.selectAddDevice.bind(this)
    Taro.setNavigationBarTitle({
      title: String(name + '(0)')
    })
  }

  async componentWillMount() {
    this.getDate()
  }

  componentDidShow() {
    this.page = 1
    this.getDate()
  }
  async getDate() {
    const { name } = this.$router.params
    api.common.getGroupDevice(this.$router.params.id).then(res => {
      const list = res
      Taro.setNavigationBarTitle({
        title: String(name + `(${res.length})`)
      })
      this.setState({
        list: list || []
      })
    })
  }

  selectAddDevice() {
    const groupId = this.$router.params.id
    Taro.navigateTo({ url: `/pages/home/device/group_device_bind/index?groupId=${groupId}` })
  }

  async handleItem(item: IDeviceItem, info) {
    const { text } = info
    const { equipmentId } = item
    const { id } = this.$router.params
    if (text === '删除') {
      Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => {
        if (confirm) {
          try {
            await api.common.deleteGroupDevice(id, equipmentId)
            this.getDate()
            showMyToast({ title: '删除成功~' })
          } catch (error) {
            console.error(error)
            showMyToast({ result: error, title: '失败~' })
          }
        }
      })
    }
  }

  async pullingUp(done: any) {
    this.page++
    await this.getDate()
    done()
  }

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

  goDetail(equipmentId) {
    Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
  }
  render() {
    const { count, height } = this.props
    const { list } = this.state
    return (
      <View className="device-list">
        <ListView
          count={count}
          height={height}
          dataListLength={list.length}
          pullingUp={done => this.pullingUp(done)}
          pullingDown={done => this.pullingDown(done)}
        >
          {list.map(item => (
            <AtSwipeAction
              autoClose
              key={item.equipmentId}
              onClick={info => this.handleItem(item, info)}
              options={[
                {
                  text: '删除',
                  style: {
                    backgroundColor: '#FF4949'
                  }
                }
              ]}
            >
              <View className="group-item" onClick={() => this.goDetail(item.equipmentId)}>
                <DeviceItem {...item} />
              </View>
            </AtSwipeAction>
          ))}
        </ListView>
        <View className="device-list-add-btn" onClick={this.selectAddDevice}>
          <Text className="icon">+</Text>
        </View>
      </View>
    )
  }
}
export default DeviceGroup as ComponentClass<PageOwnProps, PageState>