import Taro from '@tarojs/taro'
import { View, Text, Block, PickerView, PickerViewColumn, Label, Radio, RadioGroup, Checkbox, CheckboxGroup, ScrollView } from '@tarojs/components'
import { AtFloatLayout } from 'taro-ui'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CommonEvent } from '@tarojs/components/types/common'
import { CtsFloatLayoutProps, CtsFloatLayoutState } from 'types/float-layout'

/**
 * 浮动弹层组件
 */
export default class CtsFloatLayout extends CtsComponent<CtsFloatLayoutProps, CtsFloatLayoutState> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsFloatLayoutProps
  public static propTypes: InferProps<CtsFloatLayoutProps>

  public constructor(props: CtsFloatLayoutProps) {
    super(props)
    this.state = {
      selectorVal: null,
    }
  }

  public componentWillReceiveProps(props: CtsFloatLayoutProps): void {
    // 初始化选中
    let { dataVal } = props
    this.setState({
      selectorVal: dataVal
    })
  }

  private onChange(e: CommonEvent): void {
    let val = e.detail.value
    this.setState({
      selectorVal: val
    })
  }

  // 点击确定
  private onConfirm(selectorVal: any): void {
    this.props.onConfirm(selectorVal)
  }

  public render(): JSX.Element {
    const {
      className,
      isOpened, mode, title, note, data,
      cancelText, isCancel, confirmText, isConfirm,
      onCancel
    } = this.props

    let { selectorVal } = this.state

    return (
      <AtFloatLayout className={classNames(className)} isOpened={isOpened} onClose={onCancel} scrollY={false}>
        <View className='float-layout' style={{ height: (mode === 'radio' || mode === 'checkbox') ? Taro.pxTransform(880) : '' }}>
          <View className='float-layout-top'>
            {
              isCancel && <Text className='float-layout-btn' onClick={onCancel}>{cancelText}</Text>
            }
            <Text className='float-layout-title'>
              <Text>{title}</Text>
              {
                note && <Text> (已经选择{selectorVal.length || 0}项，最多选择5项)</Text>
              }
            </Text>
            {
              isConfirm && <Text className='float-layout-btn' onClick={this.onConfirm.bind(this, selectorVal)}>{confirmText}</Text>
            }
          </View>
          <View className='float-layout-content'>

            {
              // 自定义内容
              this.props.renderContent
            }

            {
              isOpened &&
              <Block>
                {
                  mode === 'address' &&
                  <PickerView indicatorStyle='height: 44px;' style='width: 100%; height: 200px; text-align:center;' value={selectorVal} onChange={this.onChange}>
                    {
                      selectorVal.length > 0 &&
                      <PickerViewColumn>
                        {data.map((item, index) => {
                          return (
                            <View key={index}>{item.areaName}</View>
                          );
                        })}
                      </PickerViewColumn>
                    }
                    {
                      selectorVal.length > 1 &&
                      <PickerViewColumn>
                        {data[selectorVal[0]].child.map((item, index) => {
                          return (
                            <View key={index}>{item.areaName}</View>
                          )
                        })}
                      </PickerViewColumn>
                    }
                    {
                      selectorVal.length > 2 &&
                      <PickerViewColumn>
                        {data[selectorVal[0]].child[selectorVal[1]].child.map((item, index) => {
                          return (
                            <View key={index}>{item.areaName}</View>
                          )
                        })}
                      </PickerViewColumn>
                    }
                  </PickerView>
                }

                {
                  // 工资详情
                  mode === 'salary' &&
                  (
                    <View className='salary-float'>
                      <View className='salary-float-list'>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>工价</Text>
                          <Text className='salary-float-right'>{data.salary || 0}元</Text>
                        </View>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>工时</Text>
                          <Text className='salary-float-right'>{data.worktime || 0}天</Text>
                        </View>
                        {
                          // 1：已调整，0：未调整
                          data.status === 1 &&
                          <View className='salary-float-list-item'>
                            <Text className='salary-float-left'>调整</Text>
                            <Text className='salary-float-right'>{data.adjustType === 1 ? '+' : data.adjustType === 0 ? '-' : ''}{data.adjustAmount ? data.adjustAmount + '元' : '无'}</Text>
                          </View>
                        }
                        {
                          // 1：已调整，0：未调整
                          data.status === 1 &&
                          <View className='salary-float-list-item'>
                            <Text className='salary-float-left'>备注</Text>
                            <Text className='salary-float-right salary-float-text'>{data.remark ? data.remark : '无备注'}</Text>
                          </View>
                        }
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>工资</Text>
                          <Text className='salary-float-right'>{data.amount || 0}</Text>
                        </View>
                      </View>
                    </View>
                  )
                }

                {
                  // 工友详情
                  mode === 'workmate' &&
                  (
                    <View className='salary-float'>
                      <View className='salary-float-list'>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>手机号码</Text>
                          <Text className='salary-float-right'>{data.mobile || '无'}</Text>
                        </View>
                        {
                          (data && data.source === '2' && data.selfBuilt === 'true') &&
                          <View className='salary-float-list-item'>
                            <Text className='salary-float-left'>工人职级</Text>
                            <Text className='salary-float-right'>{data.level ? Taro['common'].getDictsStorage('WorkerLevel')[data.level] : '无'}</Text>
                          </View>
                        }
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>加入时间</Text>
                          <Text className='salary-float-right'>{data.joinDate || '无'}</Text>
                        </View>
                        <View className='salary-float-list-item salary-float-list-item-title'>
                          <Text className='salary-float-left'>紧急联系人</Text>
                        </View>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>姓名</Text>
                          <Text className='salary-float-right'>{data.emergencyContact || '无'}</Text>
                        </View>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>手机</Text>
                          <Text className='salary-float-right'>{data.emergencyMobile || '无'}</Text>
                        </View>
                        <View className='salary-float-list-item'>
                          <Text className='salary-float-left'>地址</Text>
                          <Text className='salary-float-right'>{data.emergencyComment || '无'}</Text>
                        </View>
                      </View>
                    </View>
                  )
                }

                {
                  // 时间选择
                  mode === 'picker' &&
                  (
                    <PickerView indicatorStyle='height: 44px;' style='width:100%; height: 200px; text-align:center;' value={selectorVal} onChange={this.onChange}>
                      <PickerViewColumn>
                        {data.map((item, index) => {
                          return (
                            <View key={index}>{item}小时</View>
                          );
                        })}
                      </PickerViewColumn>
                    </PickerView>
                  )
                }

                {
                  // 单选
                  mode === 'radio' &&
                  <ScrollView scrollY className='grade-float'>
                    <RadioGroup onChange={this.onChange}>
                      {
                        data.map((item, index) => {
                          return (
                            <Label for={item.value} key={String(index)} >
                              <Text>{item.text || item.name}</Text>
                              <Radio value={item.value} id={item.value} checked={selectorVal === item.value} />
                            </Label>
                          )
                        })
                      }
                    </RadioGroup>
                  </ScrollView>
                }

                {
                  // 多选
                  mode === 'checkbox' &&
                  <ScrollView scrollY className='grade-float'>
                    <CheckboxGroup onChange={this.onChange.bind(this)}>
                      {
                        data.map((item, index) => {
                          return (
                            <Label for={item.value} key={String(index)} >
                              <Text>{item.text || item.name}</Text>
                              <Checkbox value={item.value} id={item.value} checked={selectorVal && selectorVal.includes(item.value)} />
                            </Label>
                          )
                        })
                      }
                    </CheckboxGroup>
                  </ScrollView>
                }

                {
                  // 内容自定义
                  mode === '' &&
                  <Block>{this.props.children}</Block>
                }

              </Block>
            }

          </View>
        </View>
      </AtFloatLayout>
    )
  }
}

CtsFloatLayout.defaultProps = {
  isOpened: false,
  mode: '',
  title: '',
  note: false,
  data: null,
  dataVal: null,
  cancelText: '取消',
  isCancel: true,
  confirmText: '确定',
  isConfirm: true,
  renderContent: null,
  onCancel() { },
  onConfirm() { }
}

CtsFloatLayout.propTypes = {
  isOpened: PropTypes.bool,
  mode: PropTypes.oneOf(['', 'address', 'salary', 'workmate', 'picker', 'radio', 'checkbox']),
  title: PropTypes.string,
  note: PropTypes.bool,
  data: PropTypes.any,
  dataVal: PropTypes.any,
  cancelText: PropTypes.string,
  isCancel: PropTypes.bool,
  confirmText: PropTypes.string,
  isConfirm: PropTypes.bool,
  renderContent: PropTypes.element,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func
}