import {
	observable,
	action,
	computed,
} from 'mobx';
import {
	WeaForm
} from 'comsMobx';
import {
	WeaLocaleProvider,
} from 'ecCom';
import {
	Button,
} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

export default class SearchStore {
	constructor(api, rootStore) {
		this.api = api;
		this.rootStore = rootStore;
	}

	@observable datas = [];//用来渲染页签
	@observable selectedKey = '0';//页签的选中值
	@observable form = new WeaForm();//实例化WeaForm
	@observable conditions = [];
	@observable showSearchAd = false;//控制下拉面板的显隐

	//基本值
	@computed get searchsBaseValue() {
		return this.form.getFormParams()[this.linkageFieldName]
	}

	//渲染高级搜索表单
	@computed get searchsAd() {
		return <div
			onKeyDown={(e) =>{
		          if (e.keyCode == 13 && e.target.tagName === "INPUT") {
		          	this.handleSearch();
		          }
		      } 
		    }
		>{this.form.render()}</div> ;
	}

	//存放Search组件所需的，不被观察的属性。
	get searchProps() {
		const basicProps = {
			advanceHeight: 130,
			hasMask: false,
			keyParam: 'key',
			searchType: ['base', 'advanced'],
		};

		return Object.assign({}, basicProps, this.searchMoreProps);
	}

	//按钮组
	get buttons() {
		const mark = (this.searchMark !== undefined) ? this.searchMark : '';
		return this.rootStore[`${mark}SearchButtons`];
	}

	//高级搜索下拉面板中按钮组的名称
	get buttonsAdNames() {
		return [getLabel(82529, '搜索'), getLabel(27088, '重置'), getLabel(32694, '取消')];
	}

	//高级搜索下拉面板中的按钮组
	get buttonsAd() {
		return this.buttonsAdNames.map((name, index) => {
			const type = (index === 0) && "primary";

			let callback;
			if (index === 0) {
				callback = () => this.handleSearch();
			} else if (index === 1) {
				callback = () => {
					if (this.isFormIncludeSelect) {
						this.form.resetConditionValue();
					} else {
						this.form.reset();
					}
				}
			} else {
				callback = () => this.setShowSearchAd(false)
			}

			return <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9ftc3f@${index}`} type={type} onClick={callback}>{name}</Button>
		})
	}

	//表单元素中是否包含下拉框
	get isFormIncludeSelect() {
		return this.conditions.some(condition => {
			return condition.items.some(item => {
				const {
					conditionType
				} = item;

				return conditionType === 'SELECT'
			})
		})
	}

	//获取高级搜索表单数据
	@action fetchSearchForm = (params = {}) => {
		this.form = new WeaForm();

		return new Promise((resolve, reject) => {
			this.api(params).then(datas => {
				const conditions = this.getCondition(datas);
				
				if (conditions.length == 1) {
					conditions[0].title = "";
				}

				this.conditions = conditions;
				this.form.setCondition(conditions);

				resolve();
			});
		})
	}

	//设置渲染页签所需的数据
	@action setDatas = (datas) => {
		this.datas = datas;
	}

	//改变页签的选中值
	@action setSelectedKey = (selectedKey) => {
		this.selectedKey = selectedKey;
	}

	//控制高级搜索下拉面板的显隐
	@action setShowSearchAd = (showSearchAd) => {
		this.showSearchAd = showSearchAd;
	}

	//切换页签触发的回调函数
	handleTabChange = (selectedKey) => {
		this.setSelectedKey(selectedKey);

		this.rootStore.handleTabClick && this.rootStore.handleTabClick();
	}

	//搜索
	handleSearch = (v) => {
		this.rootStore.handleSearch(v);
		this.setShowSearchAd(false);
		
	}

	//联动表单中的字段
	handleSearchChange = (val) => {
		if (this.linkageFieldName) {
			this.form.updateFields({
				[this.linkageFieldName]: val
			});
		}
	}

	//处理后端接口参数名混乱的问题
	getCondition = (datas) => {
		let condition = [];
		Object.keys(datas).forEach(key => {
			if (key.includes('condition')) {
				condition = datas[key];
			}
		})
		return condition;
	}

	//config包括：linkageFieldName、searchMark、searchMoreProps等
	setSearchConfig=(config)=>{
		Object.keys(config).forEach(key => {
			this[key] = config[key];
		})
	}



}