import React, { Component } from "react";
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
import PropTypes from 'prop-types'
import address from '../../../utils/tools/city.js'
import { addressList } from '../../../utils/tools/config'
import './index.less'

let provinceList = [];
let cityObj = {};
let areaObj = {};
addressList.map(item => {
  provinceList.push({ name: item.name, id: item.id });
  cityObj[item.id] = item.cityList.map(cityItem => {
    return { provice: item.name, name: cityItem.name, id: cityItem.id }
  });
  item.cityList.map(cityItem => {
    areaObj[cityItem.id] = cityItem.areaList.map(areaItem => {
      return { city: cityItem.name, name: areaItem.name, id: areaItem.id }
    });
  });
});

class AddressPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [10, 0, 2],
      // provinces: address.provinces || [],
      // citys: cityObj[430000] || {},
      // areas: areaObj[430100] || {},
      provinces: addressList || [],
      citys: cityObj[11] || {},
      areas: areaObj[128] || {},
      areaInfo: {
        province: "湖南省",
        city: "长沙市",
        county: "芙蓉区",
      },

    }
    this.cityChange = this.cityChange.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(',')) {
        console.log(this.props.value)
        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 });
      }
    }
  }

  cityChange(e) {
    const { provinces, citys, value } = this.state
    const pickerValue = e.detail.value
    const provinceNum = pickerValue[0]
    const cityNum = pickerValue[1]
    const countyNum = pickerValue[2]
    // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
    if (value[0] != provinceNum) {
      const id = provinces[provinceNum].id
      this.setState({
        value: [provinceNum, 0, 0],
        citys: cityObj[id],
        areas: areaObj[cityObj[id][0].id]
      })
    } else if (value[1] != cityNum) {
      // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
      const id = citys[cityNum].id
      this.setState({
        value: [provinceNum, cityNum, 0],
        areas: areaObj[citys[cityNum].id]
      })
    } else {
      // 滑动选择了区
      this.setState({
        value: [provinceNum, cityNum, countyNum]
      })
    }
  }

  //  params true代表传递地址，false不传递
  handlePickerShow(params) {
    if (params) {
      const { provinces, citys, areas, value } = this.state
      // 将选择的城市信息显示到输入框
      const tempAreaInfo = {
        province: provinces[value[0]].name,
        city: citys[value[1]].name,
        area: areas[value[2]].name
      }
      this.setState({
        areaInfo: tempAreaInfo
      }, () => {
        this.props.onHandleToggleShow(tempAreaInfo, true)
      })
    } else {
      this.props.onHandleToggleShow({}, false)
    }
  }

  render() {
    const { provinces, citys, areas, value } = this.state
    const { pickerShow } = this.props
    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.cityChange} value={value} className='picker-view-wrap'>
            <PickerViewColumn>
              {
                provinces.map((province, index) => {
                  return <View className="picker-item" key={index}>{province.name}</View>
                })
              }
            </PickerViewColumn>
            <PickerViewColumn>
              {
                citys.map((city, index) => {
                  return <View className="picker-item" key={index}>{city.name}</View>
                })
              }
            </PickerViewColumn>
            <PickerViewColumn>
              {
                areas.map((area, index) => {
                  return <View className="picker-item" key={index}>{area.name}</View>
                })
              }
            </PickerViewColumn>
          </PickerView>
        </View>
      </View>
    )
  }
}

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

export default AddressPicker;