import React from 'react';
import ReactDOM from 'react-dom';
import { Tabs,Steps,ImagePicker,List, TextareaItem, DatePicker, Switch, ListView, Button, Radio, WhiteSpace, WingBlank, Toast, Card, InputItem, Modal, Flex } from 'antd-mobile';
import { Http } from '../../Utils/help';
import { finished } from 'stream';
import { browserHistory } from 'react-router';
import Autocomplete from '../../Utils/Autocomplete'
const Step = Steps.Step;
const tabs = [
    { title: '工单信息' },
    { title: '工单进度' },
  ];
function formatDate(date) {
    /* eslint no-confusing-arrow: 0 */
    const pad = n => n < 10 ? `0${n}` : n;
    const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
    return `${dateStr} ${timeStr}`;
  }
function convertDateFromString(dateString) { 
    if (dateString) { 
        dateString = dateString.replace(/-/g,"/");
        // console.log('dataString.replace:',dateString)
        var date = new Date(dateString);
    return date;
    } 
    }
    const RadioItem = Radio.RadioItem;
export default class myrepairsdetail extends React.Component {
    constructor(props) {
        super(props);
        //const { func, rowData } = this.props.location.state;
        //报修的时候没的取数据，自己构造一条空数据给明细页显示，通过判断状态，判断this.state.rowdata取什么，是空的还是原本有的数据，以供显示
        const rowData = this.props.location.state.rowData;
        this.baseData = this.baseData.bind(this)
        this.selectedRowChange = this.selectedRowChange.bind(this)
        this.onClose = this.onClose.bind(this)
        this.isEmpty=this.isEmpty.bind(this)
        this.getNowFormatDate = this.getNowFormatDate.bind(this)
        this.returntofirst = this.returntofirst.bind(this)
        this.onDevicetypeChange = this.onDevicetypeChange.bind(this)
        this.finish=this.finish.bind(this)
        this.cancelRepairs=this.cancelRepairs.bind(this)
        this.rowDataOnAutoComplete=this.rowDataOnAutoComplete.bind(this)
        this.returnrepair=this.returnrepair.bind(this)
        this.state = {
            //func: func,
            rowData:rowData,
            //影响程度
            impactdegreeid:new Map(),
            //机台型号
            device: new Map(),
            //模态窗口是否显示:
            modal: false,
            //模态窗标题 临时
            modalTitle: '',
            //主档编辑字段 临时
            rowDatafield:'',
            //date:'',
            //机型
            repairs:[],
            devicetype:[],
            //机台array
            devicearr:[],
            //radio value
            radioval:'',
            //报修单号
            serialno:'',
            before:'',
            deviceonFocus:false,//是否获得焦点
            //机台自动搜索框 
            deviceCode:rowData.ExtraDatas.devicecode === null || rowData.ExtraDatas.devicecode === undefined ? '' : rowData.ExtraDatas.devicecode ,  
            //员工map
            employee: new Map(),
            repairsdevice:[],
            //故障类型
            malfunction:[],
            malfunctionFocus:false,//故障类型是否获得焦点
            //故障类型特定机台
            malfunctionDevice:[],
            isedit:true,//限制保存只能保存一次
            login:{},
            workshopid:new Map(),//车间id
            workshopname:new Map(),//车间名
            repstatus:rowData.repstatus,//数据的报修状态
            //图片群
             images:[],
            //图片是否展示模态窗
            imgShow:false,
            imgSrc:'',
            stepdata:[],//步骤条数据 

        }

    }
    //取得子档json数据集
    componentWillMount() {
        console.log('will mount')
        console.log('rowData: ', this.state.rowData)
        //获取车间资料，用于机台信息的第一层筛选。
        Http.getJSON2("workshop", { disabled: 'false' }, (data) => {
            const map = new Map()
            data.data.map((item) => { map.set(item.Workshopid, item.Name) })
            console.log(data) //所有车间的车间信息
            this.setState({ workshopname: map })
        })
        this.dataAjax2=Http.getJSON2("ds/data/repairs/steps",{'repairid':this.state.rowData.repairsid}).done((data)=>{
            console.log(data)
            this.setState({stepdata:data})
        
        })
    }
       
    componentDidMount() {
        console.log('did mount')
        if(this.state.rowData.status === "New"){
            this.dataAjax = Http.getJSON2("serialnods", {"":"/repairs"})
            .done((data) => {
                try {
                    const rowData = this.state.rowData
                    rowData.code = data[0].serialno
                    this.setState({rowData})
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            });
        }
       
    }
    //修改主档
    rowDataOnchange = (field, e) => {
        //如果不是新增的报修单无法修改
        if(this.state.rowData.status != 'New')
        return
        const rowData = this.state.rowData
        rowData[field] = e
        console.log('edit rowData:', rowData)
        this.setState({ rowData })
    }
    selectedRowChange=(key)=>{
        //如果不是新增的报修单无法修改
        if(this.state.rowData.status != 'New')
        return
        const rowData = this.state.rowData
        rowData[this.state.rowDatafield] = key
        console.log('edited rowData:', rowData)
        this.setState({ rowData }, this.onClose('modal'))
    }
    //生成基础数据,并弹出模态窗口
    baseData = (type,index) =>{
        //如果不是新增的报修单无法修改
        if(this.state.rowData.status != 'New')
        return
        let modalTitle = type
        if(modalTitle == '影响程度'){
            this.setState({
                modal: true,
                modalTitle,
                rowDatafield:'impactdegreeid'
            })
        }
    }
    isEmpty = (obj) =>{
        if (typeof obj === 'undefined' || obj == null || obj === '') { 
            return true; 
            } else {
             return false; 
            } 
        }
    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;
        }
    //通过机型获得对应机台
    onDevicetypeChange = (devicetypeid) =>{
        const filtered = this.state.devicearr.filter(item=>{
            return item.Typeid === devicetypeid
        })
        console.log('filter', filtered, devicetypeid)
        const map = new Map()
        filtered.map(item=>{ map.set(item.deviceid, item.Code) })
        this.setState({device:map, radioval:devicetypeid })
    }
   //返修
   returnrepair = () => {
    let isedit = !this.state.isedit
    this.setState({ isedit })
    this.state.repstatus = '2019149051490000211'
    this.dataAjax = Http.getJSON2("serialnods", { "": "/maintain" })
        .done((data) => {
            try {
                //处理一下上传的数据从报修单取对应的内容赋值给维修单的字段名，维修单编号，机台，问题描述，状态
                const repairspostdata = this.state.rowData
                console.log('报修单',this.state.rowData)
                repairspostdata.status = '2019149051490000211'
                repairspostdata.status = 'Modified'
                let postData = {}//生成的维修单数据
                postData.position = repairspostdata.deviceid//机台
                postData.status = 'New'//状态
                postData.trouble = repairspostdata.trouble//备注那一栏对应问题描述
                postData.billno = data[0].serialno
                postData.source = repairspostdata.repairsid
                postData.stacon = '2'//维修中              
                postData.billtype='2020116201580001211' //维修单类型赋值为返修，2020116201580001211 返修             
                postData.repairser = repairspostdata.repairser
                postData.Creator = localStorage['loginemployee']//创建人：返修时创建人为报修人
                postData.impactdegreeid = repairspostdata.impactdegreeid
                postData.userid =repairspostdata.ordereduser//维修人：返修时维修人为原报修单的维修人
                postData.malfunctionid = repairspostdata.malfunctionid
                postData.begtime = this.getNowFormatDate()
                console.log('postdata:', postData)
                Http.postJSON2("repairs", { ...repairspostdata }, (data) => {
                    Http.postJSON2("maintain/savesend", { ...postData }, () => Toast.info("返修成功！", 3, this.returntofirst(), true), data => { Toast.info(data.responseJSON.Error, 3) })
                }, data => { Toast.info(data.responseJSON.Error, 3) })
                console.log('报修单数据', repairspostdata)
                console.log('维修单数据', postData)
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });
}
    //取消报修
    cancelRepairs=()=>{
        let isedit=!this.state.isedit
        this.setState({isedit})
        const postdata = this.state.rowData
        postdata.status = 'Modified'
        postdata.repstatus='2019149051490000411'
        console.log('postdata:', postdata)
        Http.postJSON2("repairs", { ...postdata },()=>Toast.info("取消成功！", 2, ()=>this.returntofirst(), true),data=>{Toast.info(data.responseJSON.Error, 3)})
        .done((data)=>{
            console.log('post return:', data)
             //刷新数据
            Http.getJSON2("repairs",{"repairsid": data.repairsid}, (data)=>{
                console.log('待刷新主档:', data.data)
                const rowData = data.data[0]
            })
        })


    }


    //完成
    finish=()=>{  
        let isedit=!this.state.isedit
        this.setState({isedit})
        const postdata = this.state.rowData
        postdata.status = 'Modified'
        postdata.repstatus='2019149051490000311'
        postdata.closeorderts=this.getNowFormatDate()
        console.log('postdata:', postdata)
        Http.postJSON2("repairs", { ...postdata },()=>Toast.info("已确认！", 2, ()=>this.returntofirst(), true),data=>{Toast.info(data.responseJSON.Error, 3)})
        .done((data)=>{
            console.log('post return:', data)
             //刷新数据
            Http.getJSON2("repairs",{"repairsid": data.repairsid}, (data)=>{
                console.log('待刷新主档:', data.data)
                const rowData = data.data[0]
            })
        })
    }
    //返回的页面
    returntofirst=()=>{
            browserHistory.push('/myallbills')
     
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    //用户完成选择之后去更新 state里面的rowData的,注意一下字段名
    rowDataOnAutoComplete(type, field, value) {
        if(type === 'device'){
            const rowData = this.state.rowData
            console.log(type, field, value,rowData[field],this.state.devicearr.filter(item=>item.Code === value))
            rowData[field] = this.state.devicearr.filter(item=>item.Code === value)[0].deviceid
            let devicetypeid = this.state.devicearr.filter(item=>item.Code === value)[0].Typeid
            if (rowData['status'] == 0) {
                rowData['status'] = 'Modified'
            }
            this.setState({rowData, deviceCode:value},console.log(value,this.state.rowData),Http.getJSON2('macmalfunction/bydevicetype',{'devicetypeid':devicetypeid},(data=>{this.setState({ malfunctionDevice: data})})))
        }
        if(type === 'malfunction'){
            const rowData = this.state.rowData
            console.log(type,field,value)
            rowData.ExtraDatas.malfunctionname = this.state.malfunction.filter(item=>item.basetypelistid === value)[0].ExtraDatas.malfunctionname
            rowData[field]= value
            if (rowData['status'] == 0) {
                rowData['status'] = 'Modified'
            }
            this.setState({rowData},console.log(value,this.state.rowData))
        }
            
        }

    render() {
        //步骤条图标
        const customIcon = () => (
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" className="am-icon am-icon-md">
              <g fillRule="evenodd" stroke="transparent" strokeWidth="4">
                <path d="M21 0C9.402 0 0 9.402 0 21c0 11.6 9.402 21 21 21s21-9.4 21-21C42 9.402 32.598 0 21 0z" />
              </g>
            </svg>
          )
        //showmap
        const showMap=(map)=>{
            let array = []
            map.forEach((value, key)=> {
                array.push(<List.Item
                    key={'maintianstatus' + key}
                    // arrow="horizontal"
                    multipleLine
                    onClick={() => this.selectedRowChange(key)}
                    platform="android"
                >
                {value}
                </List.Item>)
            })
            return array
        }
        return (
            <div key={'divwrap'}>
            <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                {<div key={'divmain'}  style={{ height: '100%',width:'100%',padding:'10px',backgroundColor: '#fff'}}>
                    {/* <InputItem editable={false} onChange={(e) => this.rowDataOnchange('code', e)}  value={this.state.rowData.status==='New'?this.state.rowData.code:null}>报修单号:</InputItem> */}
                    <InputItem editable={false} value={this.state.rowData.code}>报修单号:</InputItem>  
                    <InputItem editable={false} value={this.state.rowData.ExtraDatas.repstatusname}>报修状态:</InputItem>  
                    <InputItem  editable={false} value={this.state.rowData.ExtraDatas.devicecode}>机台编号:</InputItem> 
                    <InputItem  editable={false} value={this.state.workshopname.get(this.state.rowData.workshopname)?this.state.workshopname.get(this.state.rowData.workshopname) : this.state.rowData.workshopname}>车间名称:</InputItem>
                    <InputItem  editable={false} value={this.state.rowData.ExtraDatas.impactdegreename}>影响程度:</InputItem>
                    {this.state.repstatus === '2019149051490000111'?
                    null
                    :
                    <InputItem editable={false} value={this.state.rowData.ExtraDatas.orderedusername}>接单人员:</InputItem> 
                    }
                    <InputItem editable={false} value={this.state.rowData.createtime}>报修时间:</InputItem>  
                    {/* 故障类型        */}   
                    <InputItem  editable={false} value={this.state.rowData.ExtraDatas.malfunctionname}>故障类型:</InputItem> 
                    <TextareaItem value={this.state.rowData.trouble} onChange={(e) => this.rowDataOnchange('trouble', e)} editable={this.state.rowData.status != 'New'? false : true} title="问题描述:" autoHeight={true}></TextareaItem>                    
                    <ImagePicker
                            files = {this.state.images}
                            selectable = {false}
                            onImageClick={(index, fs) => this.setState({imgSrc:this.state.images[index].url}, this.setState({imgShow:true}) )} 
                            disableDelete = { true }
                         />                                     
                    <div style={{paddingTop:'10px', backgroundColor:'#FFF'}}></div>
                    <div>
                        <List>
                                {
                                this.state.repstatus ==='2019149051490000511'?
                                <div>
                                <Button disabled={!this.state.isedit} type="primary" onClick={() => this.finish()}>确认完成</Button>
                                <WhiteSpace/>
                                <Button disabled={!this.state.isedit} type="primary" onClick={()=>{this.returnrepair()}}>返修</Button>
                                </div>
                                :this.state.repstatus ==='2019149051490000211'||this.state.repstatus ==='2019149051490000111'?
                                <Button disabled={!this.state.isedit} type="primary" onClick={() => this.cancelRepairs()}>取消报修</Button>
                                :
                                <Button type="primary" onClick={() => this.returntofirst()}>返回</Button>
                                }
                        </List>
                    </div>
                </div>}
                {
                    //show image
                    <Modal
                        visible = {this.state.imgShow}
                        transparent
                        maskClosable = {true}
                        onClose = {() => { this.setState({imgShow: false, imgSrc:''}) }}
                        title = "查看图片"
                        footer={[ {text:'关闭', onPress:()=>{this.setState({imgShow: false, imgSrc:''})} }]}

                    >
                        <img style={{width: '100%'}} src={this.state.imgSrc} />
                    </Modal>
                }
    </div>   
    <div style={{paddingLeft:'20px',paddingTop:'15px',backgroundColor: '#fff'}}> 
    <Steps current={100}   status="error">
        {
            this.state.stepdata.map(i=>{
                return <Step title={i.name+''+i.behavior}  icon={customIcon()}  description={i.time} />
            })
        }
    </Steps>
</div>            
  </Tabs>             
</div>
        )
    }


}