import React from 'react';
import ReactDOM from 'react-dom';
import {List, TextareaItem, DatePicker, Switch, ListView, Button, WhiteSpace, Card, Toast, Flex, InputItem, Modal} from 'antd-mobile';
import { Http } from '../../Utils/help';
import './less/list.less'

const Item = List.Item;
//const Brief = Item.Brief;
export default class machealthchecklogdetail extends React.Component {
    constructor(props) {
        super(props);
        const { func, rowData } = this.props.location.state;
        this.baseData = this.baseData.bind(this)
        this.getNowFormatDate = this.getNowFormatDate.bind(this)
        this.onClose = this.onClose.bind(this)
        this.state = {
            func: func,
            rowData: rowData,
            //机台型号
            device: new Map(),
            //子档
            machealthchecklogdetailvo:[],
            //子档当前操作元素下标记
            machealthchecklogdetailvoindex:'',
            //模态窗口是否显示:
            modal: false,
            //模态窗口标题
            modalTitle:'',
            //主档编辑字段 临时
            rowDatafield:'',
        }
    }
   //修改子档
    qtyOnchange = (index, field, e) => {
        console.log(index, field, e)
        const machealthchecklogdetailvo = this.state.machealthchecklogdetailvo
        console.log(machealthchecklogdetailvo[index][field])
        machealthchecklogdetailvo[index][field] = e
        if (machealthchecklogdetailvo[index]['status'] == 0) {
            machealthchecklogdetailvo[index]['status'] = 'Modified'
        }
        this.setState({ machealthchecklogdetailvo, machealthchecklogdetailvoindex: index })
    }
    //修改主档
    selectedRowChange=(key)=>{
        const rowData = this.state.rowData
        rowData[this.state.rowDatafield] = key
        // if(rowData.status == 0){
        //     rowData.status = 'Modified'
        // }
        console.log('edited rowData:', rowData,key)
        Http.getJSON2("maccheckdefinition/detail", { "deviceid": key },data=>{
            console.log('get device ID:', data.data)
            const definitionvo = data.data[0].Items.maccheckdefinitiondetailvo
            const machealthchecklogdetailvo = []
            definitionvo.map((item)=>{
                let detail = {}
                detail.checklogdtlid = this.getNowFormatDate()
                detail.itemid = item.contentid
                detail.ExtraDatas = {'contentcode': item.ExtraDatas.contentcode,'contentname':item.ExtraDatas.contentname}
                detail.status = 'New'
                machealthchecklogdetailvo.push(detail)
            })
            this.setState({machealthchecklogdetailvo:machealthchecklogdetailvo},console.log('set dtl:',this.state, machealthchecklogdetailvo))
            // const machealthchecklogdetailvo = data.data
            // this.setState({machealthchecklogdetailvo})
        })
        
        this.setState({ rowData }, this.onClose('modal'))
    }
    //提交保存
    save = () => {
        //整合提交数据
        const postdata = this.state.rowData
        const machealthchecklogdetailvoarr = this.state.machealthchecklogdetailvo
        postdata.Items.machealthchecklogdetailvo = machealthchecklogdetailvoarr
        // if (postdata.status != 'New') {
        //     postdata.status = 'Modified'
        // }
        if (postdata.status == 0) {
            postdata.status = 'Modified'
        }
        console.log('postdata:', postdata)
        Http.postJSON2("machealthchecklog", { ...postdata },null,data=>{Toast.info(data.responseJSON.Error, 3)})
        .done((data)=>{
            console.log('post return:', data)
             //刷新数据
             //更新主档
            Http.getJSON2("machealthchecklog",{"checklogid": data.checklogid}, (data)=>{
                console.log('待刷新主档:', data.data)
                const rowData = data.data[0]
                this.setState({rowData})
            })
            //更新子档
            Http.getJSON2("machealthchecklog/items", { "checkid": data.checklogid },data=>{
                console.log('待刷新子档:', data.data)
                const machealthchecklogdetailvo = data.data
                this.setState({machealthchecklogdetailvo})
            })
            //  const rowData = data
            //  const machealthchecklogdetailvo = data.Items.machealthchecklogdetailvo
            //  this.setState({ rowData, machealthchecklogdetailvo })
        })
    }
    //取得子档json数据集
    componentWillMount() {
        if(this.state.rowData.status != 'New'){
        this.dataAjax = Http.getJSON2("machealthchecklog/items", {"checkid":this.state.rowData['checklogid']})
        .done((data) => {
            console.log('will mount Items:', data.data)
            try {
                this.setState({
                    machealthchecklogdetailvo:data.data,
                });
                console.log("this.state", this.state)
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });
        }
        //拿到机台数据
        Http.getJSON2("device", {}, (data) => {
            const map = new Map()
            data.data.map((item) => { map.set(item.deviceid, item.Code) })
            this.setState({ device: map })
        })
       
    }

    componentDidMount() {
        console.log('Did Mount:', this.state)
    }
    componentWillUnmount(){
        console.log('Will UNMOUNT!')
        this.setState({rowData:{}, machealthchecklogdetailvo:[]})
    }
     //生成基础数据,并弹出模态窗口
     baseData = (type) =>{
         if(this.state.rowData.status != 'New')
         return
        let modalTitle = type
        if(modalTitle == '维修状态'){
            this.setState({
                modal: true,
                modalTitle,
                rowDatafield:'stacon'
            })
        }
        if(modalTitle == '维修类别'){
            this.setState({
                modal: true,
                modalTitle,
                rowDatafield:'maintaintype'
            })
        }
        if(modalTitle == '机台型号'){
            this.setState({
                modal: true,
                modalTitle,
                rowDatafield:'deviceid'
            })
        }
        if(modalTitle == '维修人员'){
            this.setState({
                modal: true,
                modalTitle,
                rowDatafield:'userid'
            })
        }
        
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    getNowFormatDate = () =>{//获取id
        var date = Math.random().toString();
        var nowmilis = Date.now()
        var currentdate = date.substring(3,9)+ nowmilis
        return currentdate;
    }
    render() {
        {console.log('render vo:', this.state.machealthchecklogdetailvo)}
        //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 style={{ height: '100%', padding:'10px'}}>
                <List>
                    <TextareaItem
                            defaultValue= {this.state.rowData.BillDate}
                            title="单据日期 :"
                            editable={false}
                            />
                    <InputItem onClick={()=> this.baseData('机台型号')} editable={false} value={this.state.device.get(this.state.rowData.deviceid)}>机台型号 :</InputItem>
                    {/* <TextareaItem
                            defaultValue= {this.state.rowData.ExtraDatas.devicecode}
                            title="机台型号 :"
                            editable={false}
                            />
                    <TextareaItem
                            defaultValue= {this.state.rowData.ExtraDatas.devicename}
                            title="机台名称 :"
                            editable={false}
                            /> */}
                </List>
                <List>
                    <List.Item
                        extra={<Flex justify="end">
                            <Flex.Item style = {{ flex:'0.6'}}><Button onClick={() => this.save()} type="primary" size="small" inline>保存</Button></Flex.Item></Flex>}
                    > <h4>点检内容 : </h4> </List.Item>
                    {
                    this.state.machealthchecklogdetailvo.map((item, index)=>{
                       return( 
                           <List key={'machealthchecklogdetailvo' + index}>
                                <Flex>
                                <div style={{paddingTop:'14px', backgroundColor:'#FFF'}}></div>
                                <Flex.Item>
                                <div style={{ textAlign: 'left', paddingBottom: '8px', paddingTop:'8px', paddingLeft:'4px', fontSize:'17px' }} >{item.ExtraDatas.contentname}:</div></Flex.Item>
                                    <Flex.Item style={{flex:'0.2'}}>
                                        <Switch
                                        checked={this.state.machealthchecklogdetailvo[index].isdone}
                                        onChange={(e) => this.qtyOnchange(index, 'isdone', e)} />
                                    </Flex.Item>
                                <div style={{paddingTop:'14px', backgroundColor:'#FFF'}}></div>
                                </Flex>
                            </List>
                        )
                    })
                }
                </List>

                {
                    <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%', overflowY: 'auto' }}>
                             
                             {
                                this.state.modalTitle =='机台型号'?
                                <List className="popup-list">
                                { 
                                    showMap(this.state.device)
                                }
                            </List>
                            : null
                            }
                             
                            </Card.Body>
                        </Card>
                    </Modal>
                }
                
            </div>
        )
    }


}