import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { AtIndexes } from 'taro-ui'
import { Checkbox } from 'tea-component-mobile'
import { abbr } from './abbr'
import './index.less'

interface IndexesProps {
  checkIndexesList: any
  selectALLSHOW: Boolean
  list: any
  isAbbr: Boolean
}
export default class Indexes extends React.Component<any, any, IndexesProps> {
  constructor(props: any) {
    super(props)
    this.state = {
      scrollTop: 0,
      toView: '',
      CheckboxList: [],
    }
  }
  goToIndex(key) {
    let i = 0
    let child = 0
    for (let is = 0; is <= this.props.list.length; is++) {
      if (this.props.list[is].key === key) {
        break
      }
      i++
      child += this.props.list[is].items.length
    }
    Taro.showToast({
      title: key,
      icon: 'none',
      duration: 1000,
    })
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    // var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    let len = i * ((w / 375) * 28) + child * ((w / 375) * 36)
    this.setState({
      scrollTop: len,
    })
    const partIndex = document.getElementById('footerIndexs');
    if (partIndex) {
      partIndex.scrollTop = this.state.scrollTop
    }
  }
  componentWillMount() {
    this.setState({
      CheckboxList: this.props.checkIndexesList,
    })
  }
  handleCheckbox(items) {
    this.setState({ CheckboxList: items })
    this.props.handleCheckIndexesList(items)
  }
  render() {
    const { scrollTop, CheckboxList } = this.state
    let indexsarr = new Array()
    if (this.props.selectALLSHOW) {
      this.props.list.map((item) => {
        indexsarr = [...indexsarr, ...item.items]
      })
      indexsarr = indexsarr.map((citem) => {
        return citem.name
      })
    }
    return (
      <View className="component-Index" style="height:100%;padding:10px 0">
        {this.props.selectALLSHOW ? (
          <View
            className="selectall"
            onClick={() => {
              if (CheckboxList.length === indexsarr.length) {
                this.setState({
                  CheckboxList: [],
                })
              } else {
                this.setState({
                  CheckboxList: indexsarr,
                })
              }
              this.props.handleCheckIndexesList(this.state.CheckboxList)
            }}
          >
            {CheckboxList.length === indexsarr.length ? 'Clear All' : 'Select All'}
          </View>
        ) : (
          ''
        )}
        <ScrollView className="scrollview" scrollY={true} scrollWithAnimation={true} scrollTop={scrollTop} onScroll={(e) => console.log(e)}>
          <View className="footer" style={{ height: this.state.selectALLSHOW ? '71vh' : '66vh' }} id="footerIndexs">
            <View>
              <AtIndexes list={[]} ref="atIndexes" topKey="" isVibrate={false} isShowToast={true}>
                <Checkbox.Group value={CheckboxList} onChange={this.handleCheckbox.bind(this)}>
                  {this.props.list.map((title) => {
                    return (
                      <View key={title.key} id={title.key}>
                        <View className="mail-key">{title.key}</View>
                        {title.items.map((item) => {
                          return (
                            <View className="mail" key={item.key + item.name}>
                              <Text className="mail-name" style={{ WebkitBoxOrient: 'vertical' }}>
                                {this.props.isAbbr ? abbr[item.name] || item.name : item.name}
                              </Text>
                              <Checkbox name={item.name}></Checkbox>
                            </View>
                          )
                        })}
                      </View>
                    )
                  })}
                </Checkbox.Group>
              </AtIndexes>
            </View>
          </View>
          <View style="height:8rpx" />
        </ScrollView>
        {/* 右侧索引英文 */}
        <View className="charterBox">
          {this.props.list.map((item) => {
            return (
              <View className="charterItem" key={item.key} onClick={this.goToIndex.bind(this, item.key)}>
                {item.key}
              </View>
            )
          })}
        </View>
      </View>
    )
  }
}