import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtDrawer } from 'taro-ui'
import './index.scss'
import LFormGroup from '@/c/lform/formGroup'
export default class LCanton extends Component {
  constructor (props) {
    super(props)
    const { val } = this.props
    this.state = {
      formObj: {},
      labelObj: {},
      canton1Arr: [],
      canton2Arr: [],
      canton3Arr: [],
    }
  }

  componentWillMount () {
    this.canton1Get()
  }

  componentDidMount () {

  }
 
  componentDidUpdate (prevProps, prevState) {
    const { val, cantonLabelObj } = this.props
    if (val !== prevProps.val && val.canton1 && cantonLabelObj) {
      this.initData()
    }
  }

  initData () {
    const { val: formObj, cantonLabelObj } = this.props
    this.setState({
      formObj,
      labelObj: cantonLabelObj || {}
    }, () => {
      this.bcPopup('save')
      this.canton2Get()
      this.canton3Get()
    })
  }

  canton1Get () {
    Taro.api.other.cantonselect({parentId: 156}).then(res => {
      const curArr = res || []
      let canton1Arr = curArr.map(item => {
        return {
          key: item.text,
          val: item.id,
        }
      })
      this.setState({
        canton1Arr
      })
    })
  }
  canton2Get () {
    const { formObj } = this.state
    if (!formObj.canton1) return
    Taro.api.other.cantonselect({parentId: formObj.canton1}).then(res => {
      const curArr = res || []
      let canton2Arr = curArr.map(item => {
        return {
          key: item.text,
          val: item.id,
        }
      })
      this.setState({
        canton2Arr
      })
    })
  }
  canton3Get () {
    const { formObj } = this.state
    if (!formObj.canton2) return
    Taro.api.other.cantonselect({parentId: formObj.canton2}).then(res => {
      const curArr = res || []
      let canton3Arr = curArr.map(item => {
        return {
          key: item.text,
          val: item.id,
        }
      })
      this.setState({
        canton3Arr
      })
    })
  }


  bcPopup (str) {
    const { formObj, labelObj } = this.state
    const { bc, cantonVerify } = this.props
    if (bc) {
      if (str === 'save') {
        if (cantonVerify === 'canton3' && !formObj.canton3) return Taro.$msg('请完整选择省市区')
        if (cantonVerify === 'canton2' && !formObj.canton2) return Taro.$msg('请完整选择省市')
        if (cantonVerify === 'canton1' && !formObj.canton1) return Taro.$msg('请选择省份')
        bc(formObj, labelObj)
      } else if (str === 'clear') {
        this.setState({
          formObj: {}
        })
      } else {
        bc()
      }
    }
  }
  closePopup () {
    const { close } = this.props
    close()
  }

  baseForm1Change (key, val, item) {
    let { formObj, labelObj } = this.state
    labelObj.canton1 = item ? item.label : ''
    formObj[key] = val
    formObj.canton2 = ''
    formObj.canton3 = ''
    this.setState({
      formObj,
      labelObj,
    }, () => {
      this.canton2Get()
    })
  }
  baseForm2Change (key, val, item) {
    let { formObj, labelObj } = this.state
    if (item) {
      labelObj.canton2 = item.label
    } else {
      labelObj.canton2 = ''
      labelObj.canton3 = ''
    }
    // labelObj.canton2 = item ? item.label : ''
    formObj[key] = val
    formObj.canton3 = ''
    this.setState({
      formObj,
      labelObj,
    }, () => {
      this.canton3Get()
    })
  }
  baseFormChange (key, val, item) {
    let { formObj, labelObj } = this.state
    labelObj.canton3 = item ? item.label : ''
    formObj[key] = val
    this.setState({
      formObj,
      labelObj,
    })
  }

  render () {
    const { formObj, canton1Arr, canton2Arr, canton3Arr } = this.state
    const { isShow, cantonLevel= 3 } = this.props
    const canton1MoreOptions = {arr: canton1Arr}
    const canton2MoreOptions = {arr: canton2Arr}
    const canton3MoreOptions = {arr: canton3Arr}
    return (
      <AtDrawer
        show={isShow}
        width="80%"
        onClose={this.closePopup.bind(this)}
        right
        mask>
        <View className="multi-select">
          <View className="l-com-header">
            <View className="title">省市区选择
            </View>
          </View>
          <View className="l-floor-pos">
            <LFormGroup
              val={formObj.canton1}
              valStr="canton1"
              keyStr="省"
              typeStr="radio"
              labelShow="no"
              initUpdate="no"
              moreOptions={canton1MoreOptions}
              bc={this.baseForm1Change.bind(this)}
            />
            {
              formObj.canton1
              &&
              cantonLevel > 1
              &&
              <LFormGroup
                val={formObj.canton2}
                valStr="canton2"
                keyStr="市"
                typeStr="radio"
                labelShow="no"
                initUpdate="no"
                moreOptions={canton2MoreOptions}
                bc={this.baseForm2Change.bind(this)}
              />
            }
            {
              formObj.canton2
              &&
              cantonLevel > 2
              &&
              <LFormGroup
                val={formObj.canton3}
                valStr="canton3"
                keyStr="区"
                typeStr="radio"
                labelShow="no"
                moreOptions={canton3MoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
            }
          </View>
          <View className="l-floor-footer t2">
            <View className="lff-flex">
              <View onClick={this.bcPopup.bind(this, 'clear')} className="lff-btn t4">清空</View>
              <View className="lff-btn" onClick={this.bcPopup.bind(this, 'save')}>确定</View>
            </View>
          </View>
        </View>
      </AtDrawer>
    )
  }
}