import Taro from '@tarojs/taro'
import { View, Picker, Text } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CommonEvent } from '@tarojs/components/types/common'
import { CtsAddressProps, CtsAddressState } from 'types/address'

/**
 * 选择省市区组件
 */
export default class CtsAddress extends CtsComponent<CtsAddressProps, CtsAddressState> {
	// static options = {
	// 	addGlobalClass: true
	// }

	public static defaultProps: CtsAddressProps
	public static propTypes: InferProps<CtsAddressProps>

	public constructor(props: CtsAddressProps) {
		super(props)
		this.state = {
			range: [],
			multiIndex: [0, 0, 0],
			addressName: ''
		}
	}

	componentWillReceiveProps(props: CtsAddressProps) {
		// console.log('componentWillReceiveProps', props)
		this.initAddress(props)
	}

	componentDidMount(): void {
		// console.log('componentDidMount', this.props)
		this.initAddress(this.props)
	}

	// 初始化省市区
	initAddress(props) {
		const { value, region } = props
		this.setState({
			addressName: region
		})

		let data = Taro.getStorageSync('region')
		// console.log(data)
		let range: any[] = [[], [], []]
		let multiIndex: any[] = [0, 0, 0]

		// 有选中项，则处理省市区数据。否则默认第一项
		if (value.length > 0) {
			// 处理省份
			for (let i in data) {
				range[0].push({
					areaId: data[i].areaId,
					areaName: data[i].areaName
				})

				if (data[i].areaId === Number(value[0])) {
					multiIndex[0] = Number(i)

					// 处理城市
					let cityList = data[i].child
					for (let y in cityList) {
						range[1].push({
							areaId: cityList[y].areaId,
							areaName: cityList[y].areaName
						})

						if (cityList[y].areaId === Number(value[1])) {
							multiIndex[1] = Number(y)

							// 处理地区
							let district = cityList[y].child
							for (let z in district) {
								range[2].push({
									areaId: district[z].areaId,
									areaName: district[z].areaName
								})

								if (district[z].areaId === Number(value[2])) {
									multiIndex[2] = Number(z)
								}
							}
						}
					}
				}
			}
		} else {
			// 处理省份
			for (let i in data) {
				range[0].push({
					areaId: data[i].areaId,
					areaName: data[i].areaName
				})
				// 处理城市（默认第一项）
				range[1] = data[0].child
				// 处理地区（默认第一项）
				range[2] = data[0].child[0].child
			}
		}

		this.setState({
			range,
			multiIndex
		}, () => {
			// console.log(this.state.multiIndex, this.state.range)
		})
	}

	// 确认改变地址
	private changeArea(): void {
		let { multiIndex, addressName, range } = this.state

		addressName = `${range[0][multiIndex[0]].areaName}-${range[1][multiIndex[1]].areaName}-${range[2][multiIndex[2]].areaName}`

		let areaIdarr = [
			range[0][multiIndex[0]].areaId,
			range[1][multiIndex[1]].areaId,
			range[2][multiIndex[2]].areaId
		]

		this.setState({
			addressName
		})
		this.props.onChange(addressName, areaIdarr)
	}

	// 列变化
	private columnChange(e: CommonEvent): void {
		let { column, value } = e.detail
		let { multiIndex, range } = this.state
		let data = Taro.getStorageSync('region')

		if (column === 0) {
			multiIndex = [value, 0, 0]

			range[1] = data[value].child
			range[2] = data[value].child[multiIndex[1]].child
		} else if (column === 1) {
			multiIndex = [multiIndex[0], value, 0]

			range[2] = data[multiIndex[0]].child[value].child
		} else if (column === 2) {
			multiIndex = [multiIndex[0], multiIndex[1], value]
		}

		this.setState({
			multiIndex,
			range
		})

		// let index = multiIndex

		// const data = {
		// 	range,
		// 	multiIndex
		// }
		// multiIndex[e.detail.column] = e.detail.value;

		// if (e.detail.column === 0) {
		// 	index = [index[0], 0, 0]
		// 	data.range[1] = range[0][index[0]]['child']
		// 	data.range[2] = data.range[1][index[1]]['child']
		// 	range[1] = data.range[1]
		// 	range[2] = data.range[2]
		// 	this.setState({
		// 		range
		// 	})

		// } else if (e.detail.column === 1) {
		// 	index = [index[0], index[1], 0]
		// 	data.range[2] = data.range[1][index[1]]['child']
		// 	range[2] = data.range[2]
		// 	this.setState({
		// 		range
		// 	})
		// } else if (e.detail.column === 2) {

		// }

	}

	// 根据默认省市区id设置默认选项
	// private setDefaultArea(data: any): void {
	// 	let { areaIdarr, multiIndex, range } = this.state
	// 	let index = new Array(3)
	// 	if (areaIdarr) {
	// 		for (let x = 0; x < data.length; x++) {
	// 			if (data[x].areaId == areaIdarr[0]) {
	// 				index[0] = x
	// 				for (let y = 0; y < data[x].child.length; y++) {
	// 					if (data[x].child[y].areaId == areaIdarr[1]) {
	// 						index[1] = y
	// 						for (let z = 0; z < data[x].child[y].child.length; z++) {
	// 							if (data[x].child[y].child[z].areaId == areaIdarr[2]) {
	// 								index[2] = z
	// 								break
	// 							}
	// 						}
	// 						break
	// 					}
	// 				}
	// 				break
	// 			}
	// 		}
	// 	}
	// 	// 设置默认弹出数据
	// 	if ((index[0] || index[0] === 0) && (index[1] || index[1] === 0) && (index[2] || index[2] === 0)) {
	// 		multiIndex = index
	// 		range = [data, data[index[0]].child, data[index[0]].child[index[1]].child]
	// 		this.setState({
	// 			multiIndex,
	// 			range
	// 		})
	// 	}
	// }

	public render(): JSX.Element {
		const { multiIndex, range, addressName } = this.state
		const { className, disabled } = this.props
		return (
			<Picker
				className={classNames(className)}
				mode='multiSelector'
				value={multiIndex}
				range-key='areaName'
				onChange={this.changeArea.bind(this)}
				onColumnchange={this.columnChange.bind(this)}
				range={range}
				disabled={disabled}
			>
				<View className='picker'>
					<Text className='text'>{addressName || '请选择省/市/区'}</Text>
					{
						!disabled &&
						<Text className='iconfont iconicon_jiantou'></Text>
					}
				</View>
			</Picker>
		)
	}
}

CtsAddress.defaultProps = {
	value: [],
	region: '',
	disabled: false,
	onChange() { }
}

CtsAddress.propTypes = {
	value: PropTypes.array,
	region: PropTypes.string,
	disabled: PropTypes.bool,
	onChange: PropTypes.func
}