import { Flex, InputItem, List, TextareaItem, Button, Toast, Picker } from 'antd-mobile';
import React from 'react';
import Autocomplete from '../../Utils/Autocomplete';
import { Http } from '../../Utils/help';
import { browserHistory } from 'react-router';


export default class RepairsSundry extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props)
        const { code, workshoparr, login, impactdegree, repairtype } = this.props.location.state;
        // console.log(code, workshoparr, login, impactdegree,repairtype)
        this.onCommit = this.onCommit.bind(this)
        this.onBlurIssue = this.onBlurIssue.bind(this)
        this.getNowFormatDate = this.getNowFormatDate.bind(this)

        this.state = {
            code: code,
            workshoparr: workshoparr,
            login: login,
            impactdegree: impactdegree,
            repairtype: repairtype,
            onworkshop: '',
            onworkshopid: '',
            issue: '',
            pickerValue: '',
            impa: '',
            createdate: this.getNowFormatDate(),
        };
    }

    //用户完成选择之后去更新 state里面的rowData的,注意一下字段名
    rowDataOnAutoComplete (type, field, value) {
        if (type === 'workshop') {
            console.log(value)
            console.log(this.state.workshoparr)
            let onworkshop = this.state.workshoparr.filter(item => item.Workshopid === value)[0].Name
            console.log(onworkshop, value)
            this.setState({ onworkshop: onworkshop, onworkshopid: value })

        }
    }

    onBlurIssue = (e) => {
        console.log(e)
        this.setState({ issue: e })
    }

    onCommit = () => {
        console.log("commit", this.state.login)
        console.log("编号" + this.state.code, "车间" + this.state.onworkshopid, "描述" + this.state.issue, "紧急程度" + this.state.impa)
        if (this.state.onworkshopid === null || this.state.onworkshopid === '') {
            Toast.fail('请选择车间 !!!', 1);
        } else if (!this.state.impa) {
            Toast.fail("请选择紧急程度！", 1);
        } else {
            console.log(this.state.impa[0])
            var impav = ""
            if (this.state.impa) {
                impav = this.state.impa[0]
            }
            var postdata = {}
            postdata.repairsid = ""
            postdata.code = this.state.code
            postdata.deviceid = ''
            postdata.trouble = this.state.issue
            postdata.createtime = this.state.createdate
            postdata.repstatus = '2019149051490000111'
            postdata.malfunctionid = this.state.repairtype[0].value
            postdata.status = 'New'
            postdata.workshopname = this.state.onworkshopid
            postdata.Item = {}
            postdata.impactdegreeid = impav

            console.log(postdata)

            Http.postJSON2("repairs", { ...postdata }, () => Toast.success("保存成功！", 2, () => { browserHistory.push("home") }), data => { Toast.info("保存错误！" + data.responseJSON.Error, 3) })
        }
    }

    getNowFormatDate = () => {//获取当前时间
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + hour + seperator2 + minute
            + seperator2 + second;
        return currentdate;
    }
    render () {
        return (
            <div key="sundrydiv1">
                <div style={{ height: '100%', padding: '10px' }}>
                    <div style={{ borderTop: "1PX solid #ddd" }}>
                        <InputItem editable={false} value={this.state.code}>报修单号:</InputItem>
                    </div>
                    <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1, borderTop: "1PX solid #ddd" }} >
                        <Flex>
                            <Flex.Item style={{ flex: '1.6' }}>
                                <p style={{ fontSize: '17px' }}>车间名称:</p>
                            </Flex.Item>

                            <Flex.Item onClick={() => this.setState({ workshopFocus: true })} onFocus={() => this.setState({ workshopFocus: true })} onBlur={() => setTimeout(() => { this.setState({ workshopFocus: false }) }, 200)}>
                                <Autocomplete
                                    inputProps={{ placeholder: '挑选车间' }}
                                    items={this.state.workshoparr}
                                    shouldItemRender={(item, value) => item.Name.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                    getItemValue={item => item.Workshopid}
                                    renderItem={(item, highlighted) =>
                                        <div
                                            key={item.Workshopid}
                                            style={{ paddingTop: '4px', backgroundColor: highlighted ? '#eee' : 'transparent' }}
                                        >
                                            {item.Name}
                                        </div>
                                    }
                                    value={this.state.onworkshop}
                                    onChange={e => {
                                        this.setState({ onworkshop: e.target.value })
                                        this.setState({ onprocess: '', deviceCode: '', devicearr: [] })
                                    }
                                    }
                                    onSelect={value => {
                                        this.rowDataOnAutoComplete('workshop', 'workshopid', value)
                                    }}
                                /></Flex.Item>
                            <Flex.Item style={{ flex: '1' }}>
                                <div>
                                    {this.state.workshopFocus ?
                                        <img onClick={() => {
                                            this.setState({ onworkshop: '', onprocess: '', deviceCode: '', devicearr: [], onworkshopid: '' })
                                            const rowData = this.state.rowData
                                            rowData.workshopname = ''
                                            this.setState({ rowData })
                                        }}
                                            src={require('../../images/delete.png')} style={{ height: '20px', width: '20px' }} />
                                        : null
                                    }
                                </div>
                            </Flex.Item>
                            <Flex.Item><div style={{ color: "#F00" }}>*必填项</div></Flex.Item>
                        </Flex>
                    </div>

                    <div style={{ borderTop: "1PX solid #ddd" }}>
                        <InputItem key="createuser" editable={false} value={this.state.login.Name}>报修人员：</InputItem>
                    </div>
                    <div style={{ borderTop: "1PX solid #ddd" }}>
                        <InputItem key="createdate" editable={false} value={this.state.createdate}>报修时间：</InputItem>
                    </div>
                    <div style={{ borderTop: "1PX solid #ddd" }}>
                        <InputItem key="createuser" editable={false} value={this.state.repairtype[0].label}>故障类型:</InputItem>
                    </div>
                    <div style={{ borderTop: "1PX solid #ddd", fontSize: '17px' }}>
                        <List style={{ fontSize: '17px' }}>
                            <Picker
                                itemStyle={{ fontSize: '17px', textAlign: 'center' }}
                                data={this.state.impactdegree}
                                value={this.state.impa}
                                cols={1}
                                onChange={(v) => { this.setState({ impa: v, }) }}
                                onOk={(v) => { this.setState({ imap: v, }) }}
                            >
                                <List.Item style={{ paddingTop: '10px', paddingBottom: '10px', fontSize: '17px', width: '50%' }}>紧急程度:</List.Item>
                            </Picker>
                        </List>
                    </div>

                    <div style={{ borderTop: "1PX solid #ddd" }}>
                        <TextareaItem
                            key="textareaitem1"
                            title="问题描述:"
                            autoHeight
                            rows="10"
                            onBlur={(e) => this.onBlurIssue(e)}
                        />
                    </div>
                    <div>
                        <Button key="commit" type="primary" onClick={() => this.onCommit()}>提交</Button>
                    </div>
                </div>
            </div>
        );
    }
}