import React from 'react'
import { Row, Col, Upload, Icon, Radio, Switch, Modal } from 'antd'
import { WeaInput, WeaDraggable } from 'ecCom'
import { inject, observer } from 'mobx-react';
import BackgroundUpload from '../components/backgroundUpload'
import RequiredLabelTip from '../../../components/requiredLabelTip';

const Dragger = Upload.Dragger;

@inject('payrollStore')
@observer
export default class ShowSettingForm extends React.Component {

    componentWillMount() {
        const { payrollStore } = this.props;
        const { initShowSettingForm } = payrollStore
        initShowSettingForm(this.props.id)
    }
    // form 字段变化时的回调
    handleChange(params) {
        const { payrollStore: {salaryTemplateShowSet, setSalaryTemplateShowSet}} = this.props;
        let request = {...salaryTemplateShowSet, ...params};
        setSalaryTemplateShowSet(request);
    }

    // 工资单主题 插入变量
    handleThemeNameCllck(param) {
        const { payrollStore } = this.props;
        const { salaryTemplateShowSet, setSalaryTemplateShowSet } = payrollStore;
        let request= {...salaryTemplateShowSet};
        request.theme = (request.theme ? request.theme : "") + param;
        setSalaryTemplateShowSet(request);
    }

    handleDownClick(index) {
        const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props
        let downItem = salaryItemSet[index + 1];
        let thisItem = salaryItemSet[index]
        let resultSet = [...salaryItemSet] 
        resultSet[index] = downItem;
        resultSet[index + 1] = thisItem;
        setSalaryItemSet(resultSet)
    }

    handleUpClick(index) {
        const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props
        let upItem = salaryItemSet[index - 1]
        let thisItem = salaryItemSet[index]
        let resultSet = [...salaryItemSet]
        resultSet[index] = upItem
        resultSet[index - 1] = thisItem;
        setSalaryItemSet(resultSet)
    }

    handleDeleteItem(group, item) {
        const { payrollStore : {salaryItemSet, setSalaryItemSet}} = this.props;
        console.log("item:", item);
        let resultSalaryItemSet = [...salaryItemSet]
        resultSalaryItemSet.map(sourceGroup => {
            if(sourceGroup.id == group.id) {
                sourceGroup.items.map((sourceItem, index) => {
                    if(sourceItem.id == item.id) {
                        sourceGroup.items.splice(index, 1)
                    }
                })
            }
        })
        setSalaryItemSet(resultSalaryItemSet)
    }

    handleDrag(data1, data2) {
        console.log("data1:", data1);
        console.log("data2:", data2);
    }

    handleDeleteClick(index) {
        Modal.confirm({
            title: '信息确认',
            content: '确认删除',
            onOk:() => {
              const {payrollStore: {salaryItemSet, setSalaryItemSet}} = this.props;
              let resultSalaryItemSet = [...salaryItemSet]
              resultSalaryItemSet.splice(index, 1)
              setSalaryItemSet(resultSalaryItemSet)
            },
            onCancel: () => {
            },
          });
    }

    render() {
        const { payrollStore } = this.props;
        const { salaryTemplateShowSet } = payrollStore;
        const { salaryItemSet } = payrollStore
        const { theme,
        background,
        textContent,
        textContentPosition,
        salaryItemNullStatus,
        salaryItemZeroStatus
        } = salaryTemplateShowSet
        const dropProps = {
            name: 'file',
            action: '/api/doc/upload/uploadFile',
            onChange(info) {
                const { status } = info.file;
                if (status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    message.success(`${info.file.name} file uploaded successfully.`);
                } else if (status === 'error') {
                    message.error(`${info.file.name} file upload failed.`);
                }
            },
            onDrop(e) {
                console.log('Dropped files', e.dataTransfer.files);
            },
        };
        return (
            <div className="showSettingForm">
                <div className="settingItemWrapper">
                    <div className="itemTitle">主题及其他设置</div>
                    <div className="itemContent">
                        <Row className="formItem">
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>工资单主题<RequiredLabelTip /></Col>
                                    <Col span={16}>
                                        <WeaInput style={{width: "200px"}} value={theme} onChange={(value) => {this.handleChange({theme:value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <span style={{float: "right"}}>
                                插入变量： 
                                <a onClick={() => {this.handleThemeNameCllck("${companyName}")}} className="themeFormalStr">公司名称</a>
                                <a onClick={() => {this.handleThemeNameCllck("${salaryMonth}")}} className="themeFormalStr">薪资所属月</a>
                                </span>
                            </Col>
                        </Row>
                        <Row className="formItem">
                            <Col span={4}>工资单背景</Col>
                            <Col span={20}>
                                <BackgroundUpload imageUrl={background} onChange={(value) => {this.handleChange({background: value})}}/>
                                {/* <Dragger {...dropProps} style={{width: "100px"}}>
                                    <div style={{ padding: '55px 0' }}>
                                    <Icon type="plus" />
                                    </div>
                                </Dragger> */}
                            </Col>
                        </Row>

                        <Row className="formItem">
                            <Col span={4}>文本内容</Col>
                            <Col span={20}>
                                <WeaInput value={textContent} onChange={(value) => {this.handleChange({textContent: value})}}/>
                            </Col>
                        </Row>

                        <Row className="formItem">
                            <Col span={4}>文本内容位置</Col>
                            <Col span={20}>
                                <Radio.Group value={textContentPosition} onChange={(e) => {this.handleChange({textContentPosition: e.target.value})}}>
                                    <Radio value={"1"}>薪资项目前</Radio>
                                    <Radio value={"2"}>薪资项目后</Radio>
                                </Radio.Group>
                            </Col>
                        </Row>

                        <Row className="formItem">
                            <Col span={6}>薪资项为空时不显示</Col>
                            <Col span={18}>
                                <Switch checked={salaryItemNullStatus} onChange={(value) => {this.handleChange({salaryItemNullStatus: value})}}/>
                            </Col>
                        </Row>

                        <Row className="formItem">
                            <Col span={6}>薪资项为0时不显示</Col>
                            <Col span={18}>
                                <Switch checked={salaryItemZeroStatus} onChange={(value) => {this.handleChange({salaryItemZeroStatus: value})}}/>
                            </Col>
                        </Row>
                    </div>
                </div>

                <div className="settingItemWrapper">
                    <div className="itemTitle">薪资项目设置</div>
                    <div className="itemContent">
                        {
                            salaryItemSet.map((group, index) => (
                                <div className="configItemWrapper" >
                                    <div className="configTitle">{group.groupName} 
                                        {
                                            index < salaryItemSet.length - 1 && 
                                            <Icon type="caret-down" style={{marginLeft: "10px" , cursor: "pointer", color: "#666"}}
                                                onClick={() => {this.handleDownClick(index)}} 
                                            />
                                        }
                                        
                                        {
                                            index > 0 && <Icon type="caret-up" style={{marginLeft: "10px", cursor: 'pointer', color: "#666"}}
                                            onClick={() => {this.handleUpClick(index)}}/>
                                        }

                                        <i className="icon-coms-Delete" style={{cursor: "pointer", color: '#666', marginLeft: "10px"}} onClick={() => {
                                            this.handleDeleteClick(index)
                                        }}/>
                                    </div>
                                    <div className="configContent">
                                        {group.items.map(item => (
                                            <span className="editItem">{item.name} <Icon type="cross" style={{cursor: "pointer"}} onClick={() => {this.handleDeleteItem(group, item)}}/></span> 
                                        ))}
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}