import React, { Component } from "react";
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
import PropTypes from 'prop-types'
import './index.less'

class CustomNatureSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [0],
      natureOptions1: [{
        id: 1,
        title: "政府机构"
      }, {
        id: 2,
        title: "科研院所"
      }, {
        id: 3,
        title: "高等院校"
      }, {
        id: 4,
        title: "社会团体"
      }, {
        id: 5,
        title: "企业"
      }, {
        id: 0,
        title: "其他组织"
      }],
      natureOptions2: [{
        id: 1,
        title: "国企"
      }, {
        id: 2,
        title: "央企"
      }, {
        id: 3,
        title: "私企"
      }, {
        id: 4,
        title: "合资企业（含港澳台）"
      }, {
        id: 5,
        title: "外资控股"
      }],
      natureOptions3: [{
        id: 1,
        title: "上市公司",
      }, {
        id: 0,
        title: "非上市公司",
      }],
    }
    this.handlePickerChange = this.handlePickerChange.bind(this);
  }

  componentDidUpdate(prevProps) {
    // if (!!this.props.value && !!prevProps.value && this.props.value instanceof Array && prevProps.value instanceof Array) {
    //   if (this.props.value.join(',') != prevProps.value.join(',')) {
    //     let citys = cityObj[provinceList[this.props.value[0]].id];
    //     let areas = areaObj[citys[this.props.value[1]].id];
    //     this.setState({ value: this.props.value, citys, areas });
    //   }
    // }
  }

  handlePickerChange(e) {
    if (e.detail.value[0] == 4) {
      this.setState({ value: [e.detail.value[0], 0, 0] });
    } else {
      this.setState({ value: [e.detail.value[0]] });
    }
  }

  //  params true代表传递地址，false不传递
  handlePickerShow(params) {
    if (params) {
      const { natureOptions1, natureOptions2, natureOptions3, value } = this.state;
      const valueIds = [];
      const valueNames = [];
      value.map((item, idx) => {
        let id, name = '';
        if (idx == 0) {
          id = natureOptions1[item].id;
          name = natureOptions1[item].title;
        } else if (idx == 1) {
          id = natureOptions2[item].id;
          name = natureOptions2[item].title;
        } else if (idx == 2) {
          id = natureOptions3[item].id;
          name = natureOptions3[item].title;
        }
        valueIds.push(id);
        valueNames.push(name);
      })

      let tempInfo = { id: valueIds, name: valueNames };
      this.props.onHandleToggleShow(tempInfo, true)
    } else {
      this.props.onHandleToggleShow({}, false)
    }
  }

  render() {
    const { natureOptions1, natureOptions2, natureOptions3, value } = this.state
    const { pickerShow } = this.props
    console.log(pickerShow)
    return (
      <View className={pickerShow ? 'address-picker-containers' : 'address-picker-container'} onClick={this.handlePickerShow.bind(this, false)}>
        <View className="picker-content" onClick={e => { e.stopPropagation() }}>
          <View className="dialog-header">
            <View className="dialog-button cancel" onClick={this.handlePickerShow.bind(this, false)}>取消</View>
            <View className="dialog-title">请选择客户性质</View>
            <View className="dialog-button" onClick={this.handlePickerShow.bind(this, true)}>确定</View>
          </View>
          <PickerView onChange={this.handlePickerChange} value={value} className='picker-view-wrap'>
            <PickerViewColumn>
              {
                natureOptions1.map((item, index) => {
                  return <View className="picker-item" key={index}>{item.title}</View>
                })
              }
            </PickerViewColumn>
            
            { this.state.value[0] == 4 ? (
              <PickerViewColumn>
                {
                  natureOptions2.map((item, index) => {
                    return <View className="picker-item" key={index}>{item.title}</View>
                  })
                }
              </PickerViewColumn>
            ) : null}

            { this.state.value[0] == 4 ? (
                <PickerViewColumn>
                {
                  natureOptions3.map((item, index) => {
                    return <View className="picker-item" key={index}>{item.title}</View>
                  })
                }
              </PickerViewColumn>
            ) : null}

          </PickerView>
        </View>
      </View>
    )
  }
}

CustomNatureSelect.propTypes = {
  pickerShow: PropTypes.bool.isRequired,
  onHandleToggleShow: PropTypes.func.isRequired,
}

export default CustomNatureSelect;