import React from 'react'
import { Row, Col, Upload, Icon, Radio, Switch } from 'antd'
import { WeaInput } 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);
    }

    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 => (
                                <div className="configItemWrapper">
                                    <div className="configTitle">{group.groupName}</div>
                                    <div className="configContent">
                                        {group.items.map(item => (
                                            <span className="editItem">{item.name}</span> 
                                        ))}
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}