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'
import CardBody from 'antd-mobile/lib/card/CardBody';
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.order = this.order.bind(this)
        this.rowDataOnAutoComplete=this.rowDataOnAutoComplete.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:[],//步骤条数据 
            //----指派S--
            emp:[] ,//邀请的维修人员名单   
            show:false,//维修人员modal是否展示
            radiovalemp:null,//选中的人员名字
            //----指派E-----
        
        }
    }
    //取得子档json数据集
    componentWillMount() {
        console.log('will mount')
        console.log('rowData: ', this.state.rowData)
        //拿到所有维修人员名单   
        Http.getJSON2("employee/getuserid", {}, (data) => { this.setState({ emp: data }) })
        //获取步骤条数据
        this.dataAjax2=Http.getJSON2("ds/data/repairs/steps",{'repairid':this.state.rowData.repairsid}).done((data)=>{
            console.log(data)
            this.setState({stepdata:data})       
        })
        //获取车间资料，用于机台信息的第一层筛选。
        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 })
        })
    }
       
    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'
            })
        }
    }
     //点击接单生成维修单,type为1接单，type为2指派
     order = (type) => {
        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'//维修中
                    //维修单类型判断，如果报修单的报修状态是协助处理，接单时则维修单类型是协助处理，待接单则为正常接单
                    if(repairspostdata.ExtraDatas.repstatusname==='协助处理'){
                        postData.billtype='2020116201310000111'//维修单类型，协助处理
                    }
                    else{
                        postData.billtype='2020116200670000111'//维修单类型，正常接单
                    }
                    postData.repairser = repairspostdata.repairser
                    postData.Creator = localStorage['loginemployee']
                    postData.impactdegreeid = repairspostdata.impactdegreeid
                    //-----------维修单的维修人处理一下------------------------------
                    if(type==1){
                    postData.userid = localStorage['loginemployee']//gai，type为1的.
                    }
                    else if(type==2){
                     postData.userid = this.state.radiovalemp.Employeeid
                    }
                    //-----------------------------------------------------------
                    postData.malfunctionid = repairspostdata.malfunctionid
                    postData.begtime = this.getNowFormatDate()
                    console.log('postdata:', postData)
                    Http.postJSON2("repairs", { ...repairspostdata }, (data) => {
                        Http.postJSON2("maintain/savesend", { ...postData }, () => Toast.info(type==1?"接单成功！":"指派成功！", 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);
                }
            });
    }
    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 })
    }

    //取消报修
    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=()=>{
        history.back()
    
     
    }
    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.rowData.status === 'New' ?
                                <Button disabled={!this.state.isedit} type="primary" onClick={() => this.save()} >保存</Button>
                                : this.state.rowData.repstatus === '2019149051490000111' ||this.state.rowData.repstatus === '5' ?
                                    <div>
                                    <Button disabled={!this.state.isedit} type="primary" onClick={() => this.order(1)}>接单</Button>
                                    <p />
                                    <Button disabled={!this.state.isedit} type="primary" onClick={() => {this.setState({show:true})}}>指派</Button>
                                    </div>
                                    :null
                                            
                        }
                        </List>
                    </div>
                    <p />
                    <div>
                        <List>

                                <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>
                }
                  {/* 维修人员名单2.0 */}
                
                  <Modal
                    popup
                    visible={this.state.show}
                    animationType="slide-up"                            
                  >
                      <div style={{height:'430px'}}>
                      <List renderHeader={() => <div>指派人员</div>} className="popup-list">
                          <Flex>
                              <Flex.Item>
                                  <Card style={{ width: '100%', height: '300px', margin: '5px 2px 0 5px' }}>
                                      <CardBody style={{ height: '100%', overflowY: 'auto' }}>
                                          <List>
                          {this.state.emp.map(data=>{
                              return <RadioItem 
                                style={{ height: '40px',textAlign:'center'}} 
                                checked={data==this.state.radiovalemp?true:false}
                                onClick={()=>{this.setState({radiovalemp:data})}}                           
                              > {data.Name}</RadioItem>                             
                          })}
                          </List>
                          </CardBody>
                          </Card>
                          </Flex.Item>
                          </Flex>
                      </List>
                      <WingBlank size="sm">
                     <WhiteSpace />
                     <Flex>
                     <Flex.Item><Button type="warning" onClick={()=>{this.setState({radiovalemp:null,show:false})}}>取消</Button></Flex.Item>
                     <Flex.Item><Button type="primary" onClick={()=>{
                      this.setState({show:false})
                      this.order(2)
                      }}>确定</Button></Flex.Item> 
                        </Flex>
                    <WhiteSpace />
                     </WingBlank>
                      </div>
                  </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>
        )
    }


}