import React from 'react';
import ReactDOM from 'react-dom';
import { Toast,SearchBar,NoticeBar,Tabs, List, TextareaItem, DatePicker, Switch, ListView, Button, Radio, WhiteSpace, WingBlank, Card, InputItem, Modal, Flex, ImagePicker, } from 'antd-mobile';
import { Http } from '../../Utils/help';
import { finished } from 'stream';
import { browserHistory } from 'react-router';
import Autocomplete from '../../Utils/Autocomplete'
import PropTypes from 'prop-types'
import $ from 'jquery'; 
import Config from '../../Utils/Config'; 
import ImgBundle from '../../Utils/imagebundle.js'

const RadioItem = Radio.RadioItem;
export default class repairsdetail extends React.Component {
    constructor(props, context) {
        super(props, context);
        //const { func, rowData } = this.props.location.state;
        //报修的时候没的取数据，自己构造一条空数据给明细页显示，通过判断状态，判断this.state.rowdata取什么，是空的还是原本有的数据，以供显示
        let newRowData = {}
        newRowData.repairsid = ''
        newRowData.code = ''
        newRowData.deviceid = ''
        newRowData.trouble = ''
        newRowData.createtime = this.getNowFormatDate()
        //0待接单（2019149051490000111）   1维修中 （2019149051490000211）  2确认完成（2019149051490000311）
        newRowData.repstatus = '2019149051490000111'
        //故障类型id字段malfunctionid
        newRowData.malfunctionid = ''
        let ExtraDatas = {}
        ExtraDatas.creatorname = ''
        ExtraDatas.malfunctionname = ''
        //rowData.creator = ''//这里要放用户id，而不是放给用户看的名字
        newRowData.ExtraDatas = ExtraDatas
        newRowData.status = 'New'
        newRowData.Items = {}
        const rowData = this.isEmpty(this.props.location.state.rowData) ? newRowData : this.props.location.state.rowData;
        this.baseData = this.baseData.bind(this)
        this.selectedRowChange = this.selectedRowChange.bind(this)
        this.onClose = this.onClose.bind(this)
        this.save = this.save.bind(this)
        this.order = this.order.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.compare = this.compare.bind(this)
        this.imagePickerOnChange = this.imagePickerOnChange.bind(this)
        this.imageupload = this.imageupload.bind(this)
        this.onSubmit=this.onSubmit.bind(this)
        this.devchoose=this.devchoose.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(),//车间名
            process: [],//工序
            processFocus: false,//工序是否获取焦点
            onprocess: '',//选定的工序名
            //车间
            workshoparr: [],//车间数组
            workshopFocus: false,//车间是否获取焦点
            onworkshop: '',//选定的车间名
            onworkshopid: '',//选定的车间名id
            workshopnamelist: [],
            //图片群
            images:[],
            //图片是否展示模态窗
            imgShow:false,
            imgSrc:'',
            //故障+机台不重复
            malfunctionalready:[],//该机台已经报修的故障类型id数组
            //提醒
            repairing:[],//选中机台时未完成的单据数据
            notice:undefined,//有未完成单据的时候的提醒
            billshow:false,//单据具体信息是否展示模态窗
            //输入
            devcode:null,//输入框的值
            devarr:[],//机台数组，搜索框搜索机台返回结果
            devshow:false,//机台信息是否展示模态窗
        }

    }
    //取得子档json数据集
    componentWillMount () {
        console.log('will mount')
        console.log('rowData: ', this.state.rowData)
        Http.postJSON2("employee/getlogin", {}, data => {
            console.log(data)
            this.setState({ login: data[0] })
        }).done(data => {
            console.log(this.state)
        }),//登录
            //拿到机台数据
            // this.dataAjax1= Http.getJSON2("device", {},(data)=>{
            //     const devices=data.data
            //     console.log(data)
            //     this.setState({devices})
            // })
            // this.dataAjax2=Http.getJSON2("repairs/getrepairsdevice", {},(data)=>{
            //     const repairsdevice=data
            //     console.log(data)
            //     this.setState({repairsdevice})
            // })
            //没有工序作为筛选条件时机台的预加载
            // Http.getJSON2("device", {}).done(data=>{
            //     let devicetotal = data.data
            //     const map = new Map()
            //     const workshopidmap=new Map()
            //     devicetotal.map((item) => { map.set(item.deviceid, item.Code) })
            //     devicetotal.map((item) => { workshopidmap.set(item.deviceid, item.workshopid) })
            //     Http.getJSON2("repairs/getrepairsdevice", {},(data)=>{
            //         const repairsdevice = data
            //         console.log(devicetotal, repairsdevice)
            //         for(let i =0; i<repairsdevice.length; i ++){
            //             devicetotal = devicetotal.filter(item => item.deviceid !=repairsdevice[i].deviceid)//先筛选出可以报修的机台，所有工序
            //         }
            //         console.log(devicetotal)

            //         this.setState({ device: map,workshopid:workshopidmap, devicearr:devicetotal })
            //     })
            // })
            //拿到机型数据
            Http.getJSON2("devicetype", {}, data => {
                const devicetype = data.data
                let radioval = data.data[0].devtypeid
                this.setState({ devicetype, radioval })
            })
        //获取车间资料，用于机台信息的第一层筛选。
        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.setState({ workshoparr: data.data }, console.log(this.state.workshoparr))
            console.log(this.state.workshoparr)
        })
        //拿到影响程度类别数据
        Http.getJSON2("basetype/items", { parentid: '2019130036900000111' }, (data) => {
            const map = new Map()
            data.data.map((item) => { map.set(item.id, item.name) })
            this.setState({ impactdegreeid: map })
        })
        //拿到在职员工数据
        Http.getJSON2('employee', { 'quit': 'false' }, (data) => {
            const map = new Map()
            data.data.map((item) => { map.set(item.Employeeid, item.Name) })
            this.setState({ employee: map })
        })
        //拿到所有的故障类型数据
        Http.getJSON2('macmalfunction/allparent', {}, (data => {
            this.setState({ malfunction: data }, console.log(this.state))
        }))
        //拿到机台含有的车间名字，匹配，有的就筛选，没有就在没有信息车间中筛选
        Http.getJSON2('device/getworkshop', {}, (data => {
            console.log(data)
            this.setState({ workshopnamelist: data })
            console.log(this.state.workshopnamelist)
        }))
        //拿到所有工序资料
        Http.getJSON2('processes', {}, (data => {
            console.log(data)
            this.setState({ process: data.data }, console.log(this.state.process))
        }))
        //拿到关联的图片如果可以的话
        if('New' != this.state.rowData.status){
            Http.getJSON2('maintain/getrepairsimage',{'id':this.state.rowData.code},data=>{
                console.log('getrepairesimg:',data)
                if(undefined != data && null != data && data.length >0){
                    const images = []
                    var reg = new RegExp("(.*)/(.*)/(.*)","ig")
                    var r = reg.exec(Config.SERVER_URL)
                    for(let i=0; i<data.length; i++){
                        let img = {}
                        img.id = data[i].id
                        img.url = r[1] + "/" + data[i].path
                        img.ts = data[i].ts
                        images.push(img)
                    }
                    console.log("plan add to state.images",images)//this.state.images
                    this.setState({images},console.log("set state:",this.state.images))
                }
            })
        }
    }
    //搜索栏回车触发时间
    onSubmit=(value)=>{
        console.log(value)
        Http.getJSON2('device/getdevice', {devcode:value}, (data => {
            console.log(data)
            this.setState({ devarr: data })
            console.log(this.state.devarr)
            if(this.state.devarr.length==0){
                Toast.info('找不到对应'+this.state.devcode+'的机台，请重新输入', 2);
            }
            if(this.state.devarr.length!=0){
                this.setState({devshow:true})
            }
        }))
    }
    //机台modal选择机台时触发
    devchoose=(i)=>{
        this.state.devicearr[0]=i
        this.setState({devshow:false,onworkshop:i.ExtraDatas.shopname,onworkshopid:i.workshopid,onprocess:i.ExtraDatas.processname},()=>{        
        this.rowDataOnAutoComplete('workshop', 'workshopid', i.workshopid)
        this.rowDataOnAutoComplete('process', 'processid', i.Processid)
        this.setState({devicearr:this.state.devicearr},this.rowDataOnAutoComplete('device', 'deviceid', i.Code))
        
    })
        console.log('选中机台',i)

    }
    //imagepicker add/delete
    imagePickerOnChange = (images, type, index) => {
        console.log(images, type, index);
        this.setState({
            images,
        });
    }

    //上传图片
    imageupload = () =>{
        for(let key in this.state.images){
            console.log(key)
            ImgBundle(this.state.images[key].file,{quality:0.6})
                .then((rst)=>{
                    const formData = new FormData();
                    formData.append("billcode", this.state.rowData.code)
                    formData.append("file", rst.file,rst.origin.name)
                    $.ajax({
                        type : 'POST',
                        url :  Config.SERVER_URL+"maintain/imageupload",
                        data : formData,
                        dataType : 'text',//'json',
                        contentType: false, //禁止设置请求类型 
                        processData: false, //禁止jquery对DAta数据的处理,默认会处理 
                        success : (json) =>{
                            console.log(json)
                        }
                    })
                })
            }//for end
    }
    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'
            })
        }
    }
    //车间信息匹配
    compare = () => {
        let arr = this.state.workshopnamelist;
        for (var i = 0; i < arr.length; i++) {
            if (this.state.onworkshop === arr[i]) {
                return true;
            }
        }
        return false;
    }
    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 })
    }
    //报修单填完提交保存
    save = () => {
        //整合提交数据
        this.setState({ repstatus: '2019149051490000111' })
        const postdata = this.state.rowData
        postdata.repstatus = '2019149051490000111'
        //    postdata.repairser=localStorage['loginemployee']
        console.log('postdata:', postdata)
        if (postdata.status == 0) {
            postdata.status = 'Modified'
        }
        //判断机台是否有挑选机台
        if (this.isEmpty(postdata.deviceid)) {
            Toast.info("请挑选机台!", 2)
            return
        }
        //不自动去转换车间id与车间名称2020年3月20日 14:41:27
        // if (!this.isEmpty(this.state.workshopname.get(this.state.workshopid.get(this.state.rowData.deviceid)))) {
        //     postdata.workshopname = this.state.workshopname.get(this.state.workshopid.get(this.state.rowData.deviceid))
        // }
        console.log('postdata:', postdata)
        if (this.isEmpty(postdata.workshopname)) {
            Toast.info("请填写车间!", 2)
            return
        }
        //判断影响程度有没有写
        if (this.isEmpty(postdata.impactdegreeid)) {
            Toast.info("请挑选影响程度!", 2)
            return
        }
        //判断故障类型是否有选
        if (this.isEmpty(postdata.malfunctionid)) {
            Toast.info("请挑选故障类型，若无，请挑选其他故障，并在问题描述加以说明!", 2)
            return
        }
        console.log('postdata:', postdata)
        //判断如果挑选其他故障时问题描述是否填写
        // if(postdata.ExtraDatas.malfunctionname ==='其他故障'){
        //     if(this.isEmpty(postdata.trouble))
        //     Toast.info("问题描述没有填写!",2)
        //     return
        // }
        if (this.isEmpty(postdata.trouble)) {
            Toast.info("问题描述没有填写!", 2)
            return
        }
        console.log('postdata:', postdata)
        let isedit = !this.state.isedit
        this.setState({ isedit })
        //this.setState({rowData})
        //上传图片
        this.imageupload()
        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]
                    // this.setState({rowData})
                })
            })
    }
    //取消报修
    cancelRepairs = () => {
        let isedit = !this.state.isedit
        this.setState({ isedit })
        const postdata = this.state.rowData
        if (postdata.status == 0) {
            postdata.status = 'Modified'
        }
        console.log('postdata:', postdata)
        postdata.repstatus = '2019149051490000411' //取消报修对应的id（3）
        Http.postJSON2("repairs/cacelrepairs", { ...postdata }, () => Toast.info("取消成功！", 2, () => this.returntofirst(), true), data => { Toast.info(data.responseJSON.Error, 3) })
            .done((data) => {
                console.log('post return:', data)
                //刷新数据
                Http.getJSON2("repairs/cacelrepairs", { "repairsid": data.repairsid }, (data) => {
                    console.log('待刷新主档:', data.data)
                    const rowData = data.data[0]
                    // this.setState({rowData})
                })
            })
    }

    //点击接单生成维修单
    order = () => {
        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
                    postData.userid = localStorage['loginemployee']
                    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);
                }
            });
    }

    //完成
    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 = () => {
        if (this.state.rowData.repstatus === '2019149051490000311')
            browserHistory.push("/myallbills")
        else if (this.state.rowData.repstatus === '2019149051490000211')
            browserHistory.push("/repairs")
        else
            history.back()
    }

    //杂项报修
    sundry = () => {
        console.log('杂项报修')

        console.log(this.state.impactdegreeid)
        let impaarr = []
        let i = 0
        this.state.impactdegreeid.forEach((value, key) => {
            impaarr[i] = { label: value, value: key }
            i += 1
        })
        let repairtypes = []
        if (this.state.malfunction) {
            this.state.malfunction.map((v, k) => {
                //console.log(v, k)
                if (v.ExtraDatas.malfunctionname === '杂项') {
                    var sv = {}
                    sv.label = v.ExtraDatas.malfunctionname
                    sv.value = v.basetypelistid
                    repairtypes[0] = sv
                }
            })
            browserHistory.push({
                pathname: '/repairssundry',
                state: {
                    code: this.state.rowData.code,
                    workshoparr: this.state.workshoparr,
                    login: this.state.login,
                    impactdegree: impaarr,
                    repairtype: repairtypes,
                }
            }
            )
        } else {
            Toast.fail("无故障类型！")
        }
    }

    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    //用户完成选择之后去更新 state里面的rowData的,注意一下字段名
    rowDataOnAutoComplete (type, field, value) {
        if (type === 'device') {
            this.setState({
                notice:undefined
              });
            console.log(value)
            const rowData = this.state.rowData
            console.log(this.state.devicearr)
            console.log(type, field, value, rowData[field], this.state.devicearr.filter(item => item.Code === value))
            console.log(this.state.devicearr)
            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'
            }
            console.log('选中的deviceid',rowData[field])
            Http.getJSON2("repairs/getrepairing", {deviceid:rowData[field]},(data)=>{
                const repairing = data
                console.log('该台的未完成单据',repairing)
                if(data.length != 0){
                    this.setState({
                        billshow:true,
                        notice:'该机台有'+data.length +'个未完成单据.'
                      });
                }
                this.setState({repairing:repairing})
                //筛选选中机台已报修过的故障类型id，供后面剔除
                let malfunctionalreadyset = new Set()
                data.map(item => malfunctionalreadyset.add(item.malfunctionid))
                let malfunctionalready = Array.from(malfunctionalreadyset)
                this.setState({malfunctionalready:malfunctionalready})
                console.log('该机台已报修的故障类型',this.state.malfunctionalready)
                console.log('该台的未完成单据',this.state.repairing)
                //把报修了的机台从总机台剔除
                // for(let i =0; i<repairsdevice.length; i ++){
                //     devicetotal = devicetotal.filter(item => item.deviceid !=repairsdevice[i].deviceid)//先筛选出可以报修的机台，所有工序
                // }
            })            
            //this.setState({ rowData, deviceCode: value }, console.log(value, this.state.rowData), Http.getJSON2('macmalfunction/bydevicetype', { 'devicetypeid': devicetypeid }, (data => { this.setState({ malfunctionDevice: data }) })))
            this.setState({rowData, deviceCode:value},console.log(value,this.state.rowData),Http.getJSON2('macmalfunction/bydevicetype',{'devicetypeid':devicetypeid},(data=>{
                
                //this.setState({ malfunctionDevice: data})
                let malfunctionDevice=data  //故障类型总
                console.log('故障类型未剔除前',malfunctionDevice)//未剔除前
                for(let i =0; i<this.state.malfunctionalready.length; i++){
                    malfunctionDevice=malfunctionDevice.filter(item => item.basetypelistid !=this.state.malfunctionalready[i])
                }
                this.setState({ malfunctionDevice: malfunctionDevice})
                console.log('故障类型下拉框',this.state.malfunctionDevice)//剔除已报的故障类型             
                       
        })))               
        }
        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))
        }
        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)
            this.setState({ onworkshop: onworkshop, onworkshopid: value })
            let rowData = this.state.rowData
            rowData.workshopname = value//onworkshop;存储车间id 2020年3月20日 14:46:30
            this.setState({ rowData })
        }

        //工序
        if (type === 'process') {
            console.log(this.state.onworkshop)//车间名
            if (this.isEmpty(this.state.onworkshop)) {
                Toast.info("请先挑选车间!", 2)
                return
            }
            console.log(value)//id
            console.log(this.state.onworkshop)
            console.log(this.compare())
            console.log(this.state.workshopid)
            let onprocess = this.state.process.filter(item => item.processid === value)[0].Name
            this.setState({ onprocess: onprocess })

            Http.getJSON2("device", { processid: value, workshopid: this.compare() ? this.state.onworkshopid : null }).done(data => {
                let devicetotal = data.data
                console.log(devicetotal)
                const map = new Map()
                const workshopidmap = new Map()
                devicetotal.map((item) => { map.set(item.deviceid, item.Code) })
                devicetotal.map((item) => { workshopidmap.set(item.deviceid, item.workshopid) })
                Http.getJSON2("repairs/getrepairsdevice", {}, (data) => {
                    const repairsdevice = data
                    console.log(devicetotal, repairsdevice)
                    //把报修了的机台从总机台剔除                   
                    // for (let i = 0; i < repairsdevice.length; i++) {
                    //     devicetotal = devicetotal.filter(item => item.deviceid != repairsdevice[i].deviceid)
                    // }
                    //把停用的机台从总机台剔除                   
                    // for (let i = 0; i < repairsdevice.length; i++) {
                    //     devicetotal = devicetotal.filter(item => item.ExtraDatas.statename != '停用')
                    // }
                    console.log(devicetotal)
                    this.setState({ device: map, workshopid: workshopidmap, devicearr: devicetotal })
                    console.log(this.state.devicearr)
                })
            })
        }
    }

    render () {
        //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'}>
            {this.state.rowData.status === 'New' ?
            <div style={{ backgroundColor:'#efeff4', paddingLeft: '2px',paddingRight: '2px' }}>
            <SearchBar
            value={this.state.devcode}
            placeholder='请输入机台编号'
            onSubmit={value => this.onSubmit(value)}
            onFocus={() => console.log('onFocus')}
            onCancel={() => {this.setState({devcode:''}),console.log(this.state.devcode)}}
            //showCancelButton
            onChange={(value)=>{this.setState({devcode:value},console.log(this.state.devcode))}}
            />
            </div>:null}
                {/* {this.state.notice?<NoticeBar mode="closable" >{this.state.notice}</NoticeBar>:""}                 */}
                {<div key={'divmain'} style={{ backgroundColor:'#efeff4',height: '100%', paddingTop:this.state.rowData.status === 'New' ?'0px':'10px',paddingLeft: '10px',paddingRight: '10px'  }}>
                   
                    {/* <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>
                    {/* 车间名称2.0：作为机台的第一层筛选。 */}
                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>车间名称:</p>
                                    </Flex.Item>
                                    {console.log(this.state.workshoparr)}
                                    <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>
                        :
                        <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>
                    }
                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>生产工序:</p>
                                    </Flex.Item>
                                    <Flex.Item onClick={() => this.setState({ processFocus: true })} onFocus={() => this.setState({ processFocus: true })} onBlur={() => setTimeout(() => { this.setState({ processFocus: false }) }, 200)}>
                                        {console.log(this.state.process)}
                                        <Autocomplete
                                            inputProps={{ placeholder: '挑选工序' }}
                                            items={this.state.process}
                                            shouldItemRender={(item, value) => item.Name.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                            getItemValue={item => item.processid}
                                            renderItem={(item, highlighted) =>
                                                <div
                                                    key={item.processid}
                                                    style={{ paddingTop: '4px', backgroundColor: highlighted ? '#eee' : 'transparent' }}
                                                >
                                                    {item.Name}
                                                </div>
                                            }
                                            value={this.state.onprocess}
                                            onChange={e => {
                                                this.setState({ onprocess: e.target.value })
                                            }
                                            }
                                            //onSelect={value => this.setState({ onprocess: value })}
                                            onSelect={value => this.rowDataOnAutoComplete('process', 'processid', value)}

                                        /></Flex.Item>
                                    <Flex.Item style={{ flex: '1' }}>
                                        <div>
                                            {this.state.processFocus ?
                                                <img onClick={() => {
                                                    this.setState({ onprocess: '', deviceCode: '', devicearr: [] })
                                                }}
                                                    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>
                        :
                        null
                    }
                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>机台编号:</p>
                                    </Flex.Item>
                                    <Flex.Item onClick={() => this.setState({ deviceonFocus: true })} onFocus={() => this.setState({ deviceonFocus: true })} onBlur={() => setTimeout(() => { this.setState({ deviceonFocus: false }) }, 200)}>
                                        <Autocomplete
                                            inputProps={{ placeholder: '挑选机台' }}
                                            items={this.state.devicearr}
                                            shouldItemRender={(item, value) => item.Code.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                            getItemValue={item => item.Code}
                                            renderItem={(item, highlighted) =>
                                                <div
                                                    key={item.deviceid}
                                                    style={{ paddingTop: '4px', backgroundColor: highlighted ? '#eee' : 'transparent' }}
                                                >
                                                    {item.Code}
                                                </div>
                                            }
                                            value={this.state.deviceCode}
                                            //onChange={e => this.setState({ deviceCode: e.target.value })}
                                            onChange={e => this.setState({ deviceCode: e.target.value,notice:undefined,repairing:[] })}
                                            onSelect={value => this.rowDataOnAutoComplete('device', 'deviceid', value)}
                                        /></Flex.Item>
                                    <Flex.Item style={{ flex: '1' }}>
                                        <div>
                                            {this.state.deviceonFocus ?
                                                <img onClick={() => {
                                                    this.setState({deviceCode:'',notice:undefined,repairing:[] })
                                                    // this.setState({ deviceCode: '' })
                                                    const rowData = this.state.rowData
                                                    rowData.deviceid = ''
                                                    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>
                        :
                        <InputItem onClick={() => this.baseData('机台编号')} editable={false} value={this.state.rowData.ExtraDatas.devicecode}>机台编号:</InputItem>}
                    {/* 车间名称1.0：选中机台自动带出，没有自行填写。 */}
                    {/* {this.state.rowData.status === 'New'?
                    <div style={{paddingLeft:'15px', backgroundColor:'#FFFFFF', lineHeight: 1}}>
                    <div style={{borderBottom:'1px solid #ddd'}}>
                        <Flex>
                            <Flex.Item style={{flex:'1.6'}}>
                            <p style={{fontSize:'17px', marginRight:'5px'}}>车间名称:</p>
                            </Flex.Item>
                            <Flex.Item style={{flex:'2'}}>
                                {console.log(this.state.rowData.deviceid)}
                                {!this.isEmpty(this.state.workshopname.get(this.state.workshopid.get(this.state.rowData.deviceid)))?
                                <InputItem editable={true}   value={this.isEmpty(this.state.onprocess)?'':this.state.workshopname.get(this.state.workshopid.get(this.state.rowData.deviceid))}></InputItem>
                                
                               :
                                <InputItem value={this.state.rowData.workshopname} onChange={(e) => this.rowDataOnchange('workshopname', e)} editable={true} ></InputItem>
                               // <InputItem editable={false} value={this.state.workshopname.get(this.state.workshopid.get(this.state.rowData.deviceid))}></InputItem>
                            }
                                </Flex.Item>

                            <Flex.Item><div style={{color:"#F00"}}>*必填项</div></Flex.Item> 
                        </Flex>
                    </div></div>  
                    :
                    <InputItem  editable={false} value={this.state.rowData.workshopname}>车间名称:</InputItem>
                    }                  */}
                    {/* 故障类型        */}
                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>故障类型:</p>
                                    </Flex.Item>
                                    <Flex.Item onClick={() => this.setState({ malfunctionFocus: true })} onFocus={() => this.setState({ malfunctionFocus: true })} onBlur={() => setTimeout(() => { this.setState({ malfunctionFocus: false }) }, 200)}>
                                        <Autocomplete
                                            inputProps={{ placeholder: '请先挑选机台' }}
                                            items={this.state.malfunctionDevice}
                                            shouldItemRender={(item, value) => item.ExtraDatas.malfunctionname.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                            getItemValue={item => item.basetypelistid}
                                            renderItem={(item, highlighted) =>
                                                <div
                                                    key={item.id}
                                                    style={{ paddingTop: '4px', backgroundColor: highlighted ? '#eee' : 'transparent' }}
                                                >
                                                    {item.ExtraDatas.malfunctionname}
                                                </div>
                                            }
                                            value={this.state.rowData.ExtraDatas.malfunctionname}
                                            onChange={e => {
                                                const rowData = this.state.rowData
                                                rowData.ExtraDatas.malfunctionname = e.target.value
                                                this.setState({ rowData })
                                            }}
                                            onSelect={value => this.rowDataOnAutoComplete('malfunction', 'malfunctionid', value)}
                                        /></Flex.Item>
                                    <Flex.Item style={{ flex: '1' }}>
                                        <div>
                                            {this.state.malfunctionFocus ?
                                                <img onClick={() => {
                                                    const rowData = this.state.rowData
                                                    rowData.ExtraDatas.malfunctionname = ''
                                                    rowData.malfunctionid = ''
                                                    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>
                        :
                        <InputItem editable={false} value={this.state.rowData.ExtraDatas.malfunctionname}>故障类型:</InputItem>}


                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>影响程度:</p>
                                    </Flex.Item>
                                    <Flex.Item style={{ flex: '2' }}>
                                        <InputItem onClick={() => this.baseData('影响程度')} editable={false} value={this.state.impactdegreeid.get(this.state.rowData.impactdegreeid)}></InputItem>
                                    </Flex.Item>

                                    <Flex.Item><div style={{ color: "#F00" }}>*必填项</div></Flex.Item>
                                </Flex>
                            </div></div>
                        : <InputItem onClick={() => this.baseData('影响程度')} editable={false} value={this.state.rowData.ExtraDatas.impactdegreename}>影响程度:</InputItem>
                    }
                    {this.state.rowData.repstatus === '2019149051490000111' ?
                        <InputItem editable={false} value={this.state.rowData.status === 'New' ? this.state.login.Name : this.state.rowData.ExtraDatas.repairsname} >报修人员:</InputItem>
                        //null
                        :
                        <InputItem editable={false} value={this.state.rowData.ExtraDatas.orderedusername}>接单人员:</InputItem>
                    }
                    <InputItem editable={false} value={this.state.rowData.createtime}>报修时间:</InputItem>

                    {this.state.rowData.status === 'New' ?
                        <div style={{ paddingLeft: '15px', backgroundColor: '#FFFFFF', lineHeight: 1 }}>
                            <div style={{ borderBottom: '1px solid #ddd' }}>
                                <Flex>
                                    <Flex.Item style={{ flex: '1.6' }}>
                                        <p style={{ fontSize: '17px', marginRight: '5px' }}>问题描述:</p>
                                    </Flex.Item>
                                    <Flex.Item style={{ flex: '2' }}>
                                        <TextareaItem value={this.state.rowData.trouble} onChange={(e) => this.rowDataOnchange('trouble', e)} editable={true} autoHeight={true}></TextareaItem>
                                    </Flex.Item>

                                    <Flex.Item><div style={{ color: "#F00" }}>*必填项</div></Flex.Item>
                                </Flex>
                            </div>
                                <ImagePicker
                                    files={this.state.images}
                                    onChange={this.imagePickerOnChange}
                                    onImageClick={(index, fs) => console.log(index, fs)}
                                    selectable = {this.state.images.length < 4}
                                />
                            </div>
                        :
                        <div>
                            <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>
                    }
                    <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' ?
                                        <Button disabled={!this.state.isedit} type="primary" onClick={() => this.order()}>接单</Button>
                                        : this.state.rowData.repstatus === '2019149051490000511' ?
                                            <Button disabled={!this.state.isedit} type="primary" onClick={() => this.finish()}>确认完成</Button>
                                            : this.state.rowData.repstatus === '2019149051490000211' ?
                                                <Button disabled={!this.state.isedit} type="primary" onClick={() => this.cancelRepairs()}>取消报修</Button>
                                                :
                                                <Button type="primary" onClick={() => this.returntofirst()}>返回</Button>
                            }
                        </List>
                        <p />
                        <List>
                        {this.state.rowData.status === 'New' ?<Button type="primary" onClick={() => this.sundry()}>杂项报修</Button>:""}
                        </List>                      
                    </div>
                </div>}

                {
                    <Modal
                        popup
                        visible={this.state.modal}
                        onClose={this.onClose('modal')}
                        animationType="slide-up"
                    //afterClose={() => { alert('afterClose'); }}
                    >
                        <Card style={{ width: '100%', height: '300px', }}>
                            <Card.Header
                                style={{ textAlign: 'center' }}
                                title={this.state.modalTitle}
                                extra={<span onClick={this.onClose('modal')}><img src={require('../../images/delete.png')} style={{ height: '25px', width: '25px' }} /></span>}
                            />
                            <Card.Body style={{ height: '100%' }}>
                                {
                                    this.state.modalTitle == '机台编号' ?
                                        <WingBlank size="sm">
                                            <Flex>
                                                <Flex.Item style={{ flex: '0.6' }}>
                                                    <Card style={{ width: '100%', height: '300px', margin: '5px 2px 0 5px' }}>
                                                        <Card.Body style={{ height: '100%', overflowY: 'auto' }}>

                                                            <List>
                                                                {console.log('devicetype map:', this.state.devicetype)}
                                                                {this.state.devicetype.map(i => (
                                                                    <RadioItem key={i.devtypeid} style={{ height: '40px' }} checked={this.state.radioval === i.devtypeid} onChange={() => this.onDevicetypeChange(i.devtypeid)}>
                                                                        {i.Code}
                                                                    </RadioItem>
                                                                ))}
                                                            </List>
                                                        </Card.Body>
                                                    </Card>
                                                </Flex.Item>
                                                <Flex.Item>
                                                    <Card style={{ width: '95%', height: '300px', margin: '5px 5px 0 2px' }}>
                                                        <Card.Body style={{ height: '100%', overflowY: 'auto' }}>
                                                            {
                                                                <List>
                                                                    {
                                                                        showMap(this.state.device)
                                                                    }
                                                                </List>

                                                            }
                                                        </Card.Body>
                                                    </Card>
                                                </Flex.Item>
                                            </Flex>
                                        </WingBlank> : null
                                }
                                {
                                    this.state.modalTitle == '影响程度' ?
                                        <List className="popup-list">
                                            {
                                                showMap(this.state.impactdegreeid)
                                            }
                                        </List>
                                        : null
                                }
                            </Card.Body>
                        </Card>
                    </Modal>
                }
                {
                    //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>
                }
                
                {
                    //单据模态窗
                    <Modal
                        visible = {this.state.billshow}
                        transparent
                        maskClosable = {true}
                        onClose = {() => { this.setState({billshow: false}) }}
                        title = "该机台未完成单据"
                        footer={[ {text:'关闭', onPress:()=>{this.setState({billshow: false})} }]}

                    >
                    <div  style={{ height: 280, overflowY: 'scroll' }}> 
                    {
                        
                       
                        this.state.repairing.map(i=>{
                            return <div>
                            
                            <div style={{ border:'1px solid #000'}}>
                                
                                <TextareaItem editable={false} value={i.code}  style={{ fontSize: '14px'}}title="报修单号:"autoHeight={true}></TextareaItem>
                                <TextareaItem editable={false} value={i.ExtraDatas.malfunctionname}title="故障类型:"autoHeight={true}></TextareaItem>
                                <TextareaItem editable={false}  value={i.trouble} title="问题描述:" autoHeight={true}></TextareaItem>
                                
                                </div>
                                <WhiteSpace size='md' />
                            </div>
                        })
                    }
                    </div>
                    </Modal>
                }
                {
                    //机台modal
                    <Modal
                        visible = {this.state.devshow}
                        transparent
                        maskClosable = {true}
                        onClose = {() => { this.setState({devshow: false}) }}
                        title = "机台挑选"
                        footer={[ {text:'取消', onPress:()=>{this.setState({devshow: false})} }]}

                    >
                    <div  style={{ height: 280, overflowY: 'scroll' }}> 
                    {
                        
                       
                        this.state.devarr.map(i=>{
                            return <div>
                            
                            <div style={{ border:'1px solid #000'}} onClick={()=>{this.devchoose(i)}}>
                                
                                <TextareaItem editable={false} value={i.Code}  style={{ fontSize: '14px'}}title="机台编号:"autoHeight={true}></TextareaItem>
                                <TextareaItem editable={false} value={i.ExtraDatas.processname}title="生产工序:"autoHeight={true}></TextareaItem>
                                <TextareaItem editable={false}  value={i.ExtraDatas.shopname} title="车间名称:" autoHeight={true}></TextareaItem>
                                
                                </div>
                                <WhiteSpace size='md' />
                            </div>
                        })
                    }
                    </div>
                    </Modal>
                }

            </div>
        )
    }
}

repairsdetail.contextType = {
    router: PropTypes.object.isRequired
}