import React, { Component, Fragment } from 'react';
import { permissionAuth } from '@/utils/permission';
import { Button, InputNumber, List, message, Radio,Modal } from 'antd';

const RadioGroup = Radio.Group
const InputNumberItem = props => <InputNumber precision={0} style={{width:60}} placeholder="请输入" size="small" {...props}/>

class mixedStairs extends Component {
  state = {
    stairs: [{ num: '',  index: 1}],
    postage_typemax: 1,
    edit: true,
  }

  componentDidMount() {
    const { goodtype, onChange } = this.props
    if(goodtype === 'subgood'){
      onChange('people', 'mode' )
    }
  }


  componentDidUpdate = (preprops,prestate) => {
    const { stairs } = this.props
    let { postage_typemax, edit } = this.state
    if((stairs && stairs.length > 0 || !edit) && postage_typemax !== stairs.length){
      postage_typemax = stairs.length
      this.setState({ postage_typemax, stairs:[...stairs], edit: false })
    }
  }

  //配送距离的邮费设置
  disthandle = (item,keyname,key) => {
    let { edit,stairs } = this.state
    const that = this
    if(edit){
      if(keyname === ''){  //删除
        Modal.confirm({
          title:'确认操作',
          content:'确认删除该阶梯',
          okText:'删除',
          centered:true,
          cancelText:'取消',
          onOk(){
            let newfilterstair = stairs.filter(item => item.index !== key )
            let newstair = []
            for (let i = 0; i < newfilterstair.length; i++){
              newstair.push({index:i+1,num:newfilterstair[i].num})
            }
            if(newstair.length === 0){
              that.setState({ stairs:[]  })
            }
            else{
              that.setState({ stairs:[...newstair]  })
            }
          }
        })
      }
      else{  //修改
        stairs[key-1][keyname] = item
        this.setState({ stairs })
      }
    }
  }

  adddist = () => {
    let { postage_typemax, edit, stairs } = this.state
    const { mode } = this.props
    if(edit){
      let flag = true
      const nulllist = { num: '',  index: ''}
      if(stairs && stairs.length > 0) {
        stairs.map((list) => {
          if(!list.num){
            flag = Boolean(flag && false)
          }
        })
      }
      if(!flag){
        message.warning('请先填写完整上面数据！')
      }
      else{
        nulllist.index = stairs.length + 1
        stairs.push(nulllist)
        this.setState({ postage_typemax: postage_typemax+1, stairs:[...stairs] })
      }
    }
    else{
      if(mode){
        this.setState({ edit:true })
      }
      else{
        message.warning("请选择成团的类型！")
      }
    }
  }

  savedist = () => {
    let { onChange } = this.props
    let { stairs } = this.state
    let flag = true
    stairs && stairs.length > 0 ? stairs.map((list) => {
      if (!list.num) {
        flag = Boolean(flag && false)
      }
    }) : null
    if(flag){
      onChange(stairs, 'ladder_list')
      this.setState({ edit:false, stairs, postage_typemax: stairs.length })
    }
    else{
      message.warning('请先填写完整上面数据！')
    }
  }

  //处理传值
  conversionObject() {
    const { mode, disabled, stairs } = this.props;
    return {
      mode,
      disabled,
      stairs1:[...stairs]
    };
  }

  render(){
    const { edit, stairs } = this.state
    const { goodtype, onChange } = this.props
    const { mode, disabled, stairs1 } = this.conversionObject();
    const _stairs = !edit && stairs.length <= 0 ? stairs1 : stairs
    return(
      <Fragment>
        <RadioGroup disabled={Boolean(goodtype || disabled)} onChange={(e) => onChange(e.target.value, 'mode' )} value={mode}>
          <Radio value="people">成团人数</Radio>
          <Radio value="goods">成团商品件数</Radio>
        </RadioGroup>
        <List
          dataSource={_stairs}
          itemLayout="horizontal"
          renderItem={item => (
            <List.Item
              actions={[<a onClick={() => this.disthandle(item,'',item.index)} style={ edit ? {color:'red'} : {display: 'none'}}>删除</a>]}>
              <span style={{marginRight: 10}}>阶梯{item.index}</span>
              <span style={{marginRight: 5}}>
                { mode === 'people' ? '成团人数' : '成团商品件数'}
              </span>
              { edit ?
                <InputNumberItem value={item.num}
                                 min={item.index-1 > 0 ? Number(_stairs[item.index-2].num)+1 : 2}
                                 onChange={(e) => this.disthandle(e, 'num', item.index)}/>
                : item.num
              }
              <span style={{marginLeft:5,marginRight: 30}}>
                { mode === 'people' ? '人' : '件'}
              </span>
            </List.Item>
          )}
          footer={(
            <Fragment>
              <Button size="small" onClick={this.adddist} disabled={disabled}>{edit ? '添加' : '编辑'}</Button>
              { edit ?
                <Button size="small" style={{ marginLeft: 10 }} type="primary" onClick={this.savedist}>保存</Button>
                : null
              }
            </Fragment>
          )}
        />
      </Fragment>
    )
  }
}

export default mixedStairs;