import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtDrawer, AtRadio, AtSearchBar } from 'taro-ui'
import './index.scss'
import { noEmpty } from '@utils'
import SelectSearch from './SelectSearch'
import ListMore from '@/c/pageDataList/listMore'
export default class RadioSelect extends Component {
  constructor (props) {
    super(props)
    const { val: curVal } = this.props
    this.state = {
      remoteOptions: [],
      curVal,
      isSSShow: false,
      keyWord: '',
    }
  }

  componentWillMount () {
    const { moreOptions } = this.props
    if (!moreOptions) return
    if (moreOptions.arr) {
      const remoteOptions = []
      moreOptions.arr.forEach(item => {
        const curItem = { label: item.key, value: item.val, desc: item['desc'] }
        remoteOptions.push({ ...item, ...curItem })
      })
      this.setState({
        remoteOptions
      })
    } else {
      this.getRemoteData('first')
    }
  }

  componentDidMount () {
    // this.initData()
  }
  
  initData () {
    const { val: curVal } = this.props
    this.setState({
      curVal
    }, () => {
      this.bcPopup('save')
    })
  }

  getRemoteData (str) {
    const { keyWord } = this.state
    const { moreOptions } = this.props
    const apiArr = moreOptions.api.split('?')
    const apiUrl = apiArr[0]
    const apiUrlArr = apiUrl.split('.')
    let params = {}
    if (apiArr[1]) {
      const queryArr = apiArr[1].split('&')
      queryArr.forEach(item => {
        const itemArr = item.split('=')
        if (noEmpty(itemArr[1])) params[itemArr[0]] = itemArr[1]
      })
    }
    if (!Taro.api[apiUrlArr[0]] || !Taro.api[apiUrlArr[0]][apiUrlArr[1]]) {
      console.warn('tip:接口不存在')
      return
    }
    if (keyWord) params[moreOptions.skey] = keyWord
    Taro.api[apiUrlArr[0]][apiUrlArr[1]](params).then(res => {
      const arr = res.list || res || []
      const remoteOptions = []
      arr.forEach(item => {
        const curItem = { label: item[moreOptions.opKey], value: item[moreOptions.opVal], desc: item[moreOptions.opDesc || 'desc'] }
        remoteOptions.push({ ...item, ...curItem })
      })
      this.setState({
        remoteOptions
      }, () => {
        if (str === 'first') this.bcPopup('save')
      })
    })
  }
 
  componentDidUpdate (prevProps, prevState) {
    const { val, moreOptions, initUpdate='yes' } = this.props
    if (val !== prevProps.val) {
      if (initUpdate === 'yes') {
        this.initData()
      } else {
        const { val: curVal } = this.props
        this.setState({
          curVal
        })
      }
    }
    if (moreOptions && moreOptions.arr) {
      const remoteOptions = []
      moreOptions.arr.forEach(item => {
        const curItem = { label: item.key, value: item.val, desc: item['desc'] }
        remoteOptions.push({ ...item, ...curItem })
      })
      this.setState({
        remoteOptions
      })
    }
  }


  bcPopup (str) {
    const { curVal, remoteOptions } = this.state
    const { bc } = this.props
    if (bc) {
      if (str === 'save') {
        let curItem = {}
        remoteOptions.forEach(x => {
          if (x.value === curVal) {
            curItem = x
          }
        })
        bc(curVal, curItem)
      } else if (str === 'clear') {
        this.setState({
          curVal: ''
        })
      } else {
        bc()
      }
    }
  }
  closePopup () {
    const { close } = this.props
    close()
  }

  remoteHandleChange (value) {
    this.setState({
      curVal: value
    })
  }
  
  dealSSPopup (str, obj) {
    this.closeSSPopup()
    if (str === 'confirm') {
      this.setState({
        keyWord: obj.keyWord || ''
      }, () => {
        this.getRemoteData()
      })
    }
  }
  openSSPopup () {
    this.setState({
      isSSShow: true
    })
  }
  closeSSPopup (obj) {
    this.setState({
      isSSShow: false
    })
  }



  onSeachChange (keyWord) {
    this.setState({
      keyWord
    }, () => {
      this.getRemoteData()
    })
  }
  onClearHandle () {
    this.setState({
      keyWord: '',
      page: 1
    }, () => {
      this.getRemoteData()
    })
  }
  onSelectActionClick () {
    this.setState({
      page: 1,
    }, () => {
      this.getRemoteData()
    })
  }



  render () {
    const { remoteOptions, curVal, isSSShow, keyWord } = this.state
    const { isShow, keyStr, hasFooterNav = false, moreOptions } = this.props
    let boxStr = hasFooterNav ? 'multi-select t2' : 'multi-select'
    return (
      <AtDrawer
        show={isShow}
        width="80%"
        onClose={this.closePopup.bind(this)}
        right
        mask>
        <View className={boxStr}>
          <View className="l-com-header">
            {
              moreOptions && moreOptions.skey
              ?
              <AtSearchBar
                value={keyWord}
                placeholder="请输入关键字"
                onChange={this.onSeachChange.bind(this)}
                onActionClick={this.onSelectActionClick.bind(this)}
                onClear={this.onClearHandle.bind(this)}
              />
              :<View className="title">{keyStr}选择</View>
            }
            {/* <View className="title">{keyStr}选择</View> */}
            {/* {
              moreOptions && moreOptions.arr
              ? ''
              : moreOptions.skey
              ? <View className={keyWord.length > 0 ? 'right color-danger' : 'right'} onClick={this.openSSPopup.bind(this)}>{keyWord.length > 0 ? '已筛选' : '筛选'}</View>
              : ''
            } */}
          </View>
          <View className="ms-main">
            <AtRadio
              options={remoteOptions}
              value={curVal}
              onClick={this.remoteHandleChange.bind(this)}
            />
            {
              remoteOptions.length === 0
              &&
              <ListMore isOther={true} />
            }
          </View>
          <SelectSearch show={isSSShow} close={this.closeSSPopup.bind(this)} bc={this.dealSSPopup.bind(this)} />
          <View className="l-floor-footer">
            <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>
    )
  }
}