import React, { PureComponent } from 'react';
import { history } from 'umi';
import { Row, Col, Tooltip, Card, List, DatePicker, Button, Statistic, Spin, Empty, message } from 'antd';
import { connect } from 'dva';
import './index.less';
import talkPng from '@/images/talk/talk.png';
import { routerRedux } from 'dva/router';
import { RightOutlined } from '@ant-design/icons';
import moment from 'moment';
import { auctionFollowUpAProjectManager, getSessionUserData, getRA } from '@/utils/session';
import { getDefId } from './service';
import { getURLInformation } from '@/utils/CommonUtils';
import MessageDetail from '@/pages/SystemMessage/message/components/messageDetail'
import NoticeDetail from '@/pages/notice/noticeList/components/NoticeDetail'
import QuestDetail from '@/pages/SystemMessage/message/components/questDetail'
import { getQuestList } from '@/pages/SystemMessage/message/service'
import ChatUI  from '@/pages/customerservice/support/conversation' //智慧客服
@connect(({ dashboard, loading }) => ({
    ...dashboard,
    fetchtPageList: loading.effects['dashboard/fetchtPageList'],
    disposalListLoading: loading.effects['dashboard/fetchDisposalList'],
}))
class manager extends PureComponent {
    state = {
        datevalue: moment(moment().format('YYYYMM'), 'YYYY-MM'),
        datestring: moment().format('YYYYMM'),
        messId: '0', // 消息id
        messageDetail: false, // 消息弹窗
        detailId: '1', // 公告id
        noticeDetail: false, // 公告弹窗
        questData: {},//问卷数据
        questVisible: false, //问卷弹窗
        isModalVisible: false, //智慧客服
        isFlash: false, //智慧客服
        isCloseWs: true, //智慧客服
        optionsModal: false,  //智慧客服
        projectModal: false,  //智慧客服
        supplierNumber: '', //智慧客服
        staffId: '', //智慧客服'
        staffName:'', //智慧客服
        kfType:0,//智慧客服
        questionType:0,//智慧客服
        roleIds:'',//智慧客服
    }
    componentDidMount() {
        this.props.dispatch({
            type: "dashboard/fetchDisposalList",
            payload: { selectDate: moment().format('YYYY-MM') }
        })
        this.props.dispatch({
            type: "dashboard/fetchtlist",
            payload: { limit: 7 }
        })
        this.props.dispatch({
            type: "dashboard/fetchtPageList",
            payload: { pageNo: 1, pageSize: 4, limit: 4 }
        }),
        this.props.dispatch({
            type: "dashboard/fetchtlistre",
            payload: { pageNo: 1, pageSize: 7 }
        }),
        NTKF_PARAM = {
            siteid: "bl_1000",                    //企业ID，,为固定值
            settingid: "bl_1000_1492484340268",           //接待组ID，为固定值，必填
            uid: getSessionUserData()?.userId,
            uname: getSessionUserData()?.deptName + "-" + getSessionUserData()?.fullName,            //用户名，未登录可以为空，但是不能给null，uname赋予的值显示到小能客户端
            isvip: "0",                              //是否为vip用户，0代表非会员，1代表会员，取值显示到小能客户端
            userlevel: "1",                       //网站自定义会员级别，1-N，可根据选择判断，取值显示到小能客户端
            erpparam: "abc"                          //erpparam为erp功能的扩展字段，可选，购买erp功能后用于erp功能集成
        }
        //<<<<<<智慧客服，获取供应商编码
        let userData = getSessionUserData()
        let roleAuthority = getRA()
        this.setState({roleIds: roleAuthority && roleAuthority.length>0? roleAuthority[0]: userData.roleIds})
        this.setState({staffId: userData.userId})
        this.setState({staffName: userData.fullName})
        this.setState({supplierNumber: userData.organizationId}) 
        //<<<<<<智慧客服end
    }
    onChange = (date, dateString) => {
        this.setState({
            datevalue: moment(dateString, 'YYYY-MM'),
            datestring: dateString
        })
    }
    onSearch = () => {
        const { datestring } = this.state;
        this.props.dispatch({
            type: "dashboard/save",
            payload: { staloading: true }
        })
        this.props.dispatch({
            type: "dashboard/fetchDisposalList",
            payload: { selectDate: datestring }
        })
    }
    lookDetail = (id) => { // 消息查看详情
        this.setState({
            messId: id,
            messageDetail: true
        })
    }
    closeModel = () => { // 关闭消息弹窗
        this.setState({
            messageDetail: false
        })
    }
    lookInfo = (id) => { // 公告查看
        this.setState({
            detailId: id,
            noticeDetail: true
        })
    }
    noticeModel = () => { // 公告关闭消息弹窗
        this.setState({
            noticeDetail: false
        })
    }
    toParticipate = async (servicecode) => {//问卷调查弹窗
        const { questId } = JSON.parse(servicecode);
        await getQuestList({ id: questId }).then(res => {
          if (res?.code == 200 && res?.success) {
            this.setState({
                questData: res?.data,
                questVisible: true,
            })
          }
        })
      }
    closeParticipate = () => { // 关闭问卷调查弹窗
        this.setState({
            questVisible: false
        })
    }
    initChatUI = () => {
        //智慧客服
        if(this.state.isCloseWs && sessionStorage.getItem('CUSTOMERSERVICE_isCloseChatUIModal')==null){ //弹窗主动关闭或者页面刷新
          this.setState({optionsModal: true})
        }else{
            this.setState({isModalVisible: true})
            this.setState({isCloseWs: false})
            this.setState({isFlash :false})
        } 
    }
    followUpProject = async (data) => { // 项目跟进
        auctionFollowUpAProjectManager(data)
        // sessionStorage.setItem('projectData', JSON.stringify(data));
        // sessionStorage.setItem('defId', JSON.stringify('auction'));
        history.push('/ProjectLayout/Auction/AuctionInfoManage')
    };
    render() {
        const { projectlist, staloading, tlist, trelist, pagelist, disposalList } = this.props;
        const { datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible,  isModalVisible, isCloseWs, optionsModal, projectModal, supplierNumber, staffId, staffName, kfType, questionType, isFlash, roleIds} = this.state; //智慧客服state
        return (
            <>
                <a className={isFlash && !isModalVisible ? "talk text-effect":"talk"} onClick={() => this.initChatUI()}>咨询服务︵<span>8:30</span><span>|</span><span>12:30</span><span>13:00</span><span>|</span><span>17:00</span>︶<img src={talkPng} /></a>
                <div className="dashboard" style={{ height: innerHeight - 70, overflow: "hidden" }}>
                    <Row className="topt">
                        <Col span={8}><Card title="我的消息" bordered={false} className="cardtre" style={{ marginRight: "10px" }} extra={<div className="moret" onClick={() => history.push('/SystemMessage/message')}>更多<RightOutlined /></div>}>
                            {trelist != [] && trelist.map((item, index) => {
                                return (
                                    <div onClick={() => { item.templatetype == '3' ? this.toParticipate(item.servicecode) : this.lookDetail(item.msgId) }} className="messagetre" key={item.id}>
                                        <div className="round">{index + 1}</div>
                                        <div className="txt" title={item.title}>{item.title}</div>
                                        <div className="time">{item.createtime}</div>
                                    </div>
                                )
                            })}
                        </Card></Col>
                        <Col span={8}><Card title="项目统计" bordered={false} className="cardtremanager" style={{ marginRight: "10px" }} loading={staloading} extra={<div style={{ marginTop: "-14px" }}>
                            <DatePicker showNow={false} picker="month" style={{ marginRight: "10px" }} value={datevalue} onChange={this.onChange} allowClear={false} /><Button type="primary" onClick={() => { this.onSearch() }}>确定</Button></div>}>
                            <div className="boxrezt" key='0' style={{ height: "130px" }}>
                                <div className="boxtitle" title='竞拍'>
                                    竞拍<div className="yue">月</div></div>
                                <div className="boxcount" onClick={() => history.push('/Auction/AuctionManagerProject')}><Statistic value={disposalList} /></div>
                                <div className="boxdescription" title='竞拍的数量'>竞拍的数量</div>
                            </div>
                        </Card>
                        </Col>
                        <Col span={8}><Card title="系统公告" bordered={false} className="cardtre" extra={<div className="moret" onClick={() => history.push('/notice/noticeList')}>更多<RightOutlined /></div>}>
                            {tlist != [] && tlist.map((item, index) => {
                                return (
                                    <div className="messagetre" onClick={() => { this.lookInfo(item.id) }} key={item.id}>
                                        <div className="round">{index + 1}</div>
                                        <div className="txt" title={item.noticeTitle}>{item.noticeTitle}</div>
                                        <div className="time">{item.updateDate}</div>
                                    </div>
                                )
                            })}</Card>
                        </Col>
                    </Row>
                    <Row className="downt" type="flex" justify="space-around">
                        <Col span={24}>
                            <Card title="我的内拍项目" className="cardtre" extra={<div className="moret" onClick={() => history.push('/Auction/AuctionManagerProject')}>更多<RightOutlined /></div>}>
                                <List
                                    size="large"
                                    bordered={false}
                                    dataSource={pagelist != [] && pagelist}
                                    renderItem={item => <List.Item className="pointer" key={item.id} style={{ height: "25%" }}>
                                        <div className="downtitle" title={item.projectName}>{item.projectName}
                                            <div className="downtime">竞拍开始时间：{item.auctionStartTime}</div>
                                        </div>
                                        <div className="downb">
                                            <Button onClick={() => {
                                                this.followUpProject({
                                                    "id": item.id,
                                                    "projectName": item.projectName,
                                                    "bidMethodDict": 'auction',
                                                    "biddingSignDict": item.biddingSignDict,
                                                    "isClientFile": item.isClientFile,
                                                    "isIPassDecode": item.isIPassDecode,
                                                    "isIPassFile": item.isIPassFile,
                                                    "openTenderForm": item.openTenderForm
                                                })
                                            }} style={{ float: "right" }} type="primary">项目跟进</Button>
                                        </div>
                                    </List.Item>}
                                />
                            </Card>
                        </Col>
                    </Row>
                </div>
                {messageDetail ? <MessageDetail messId={messId} onCancel={() => { this.closeModel(), this.props.dispatch({type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 }}) }} modalVisible={messageDetail} /> : null }
                {questVisible ? <QuestDetail questData={questData} onCancel={() => { this.closeParticipate(), this.props.dispatch({type: "dashboard/fetchtlistre", payload: { pageNo: 1, pageSize: 7 }}) }} modalVisible={questVisible} /> : null}
                {noticeDetail && <NoticeDetail detailId={detailId} onCancel={() => { this.noticeModel() }} modalVisible={noticeDetail} />}
                {/*智慧客服*/}
                <ChatUI 
                    openProjectWin={()=>{
                        this.setState({kfType: 2})
                        this.setState({projectModal: true})
                    }}
                    openWin={(kfType, questionType)=>{
                        this.setState({questionType: questionType})
                        this.setState({kfType: kfType})
                        this.setState({optionsModal: false})
                        this.setState({isModalVisible: true})
                        this.setState({isCloseWs: false})
                        this.setState({isFlash :false})
                    }}
                    closeWin={()=>{
                        this.setState({kfType: 0})
                        this.setState({questionType: 0})
                        this.setState({optionsModal: false})
                        this.setState({isModalVisible: false})
                        this.setState({isCloseWs: true})
                        this.setState({projectModal: false})
                    }} 
                    optionsModal={optionsModal}
                    projectModal={projectModal}
                    isModalVisible={isModalVisible}
                    kfType={kfType}
                    questionType={questionType}
                    staffId={staffId}
                    staffName={staffName}
                    supplierNumber={supplierNumber}
                    isCloseWs={isCloseWs}
                    roleIds={roleIds}
                    hideWin={()=>{
                        this.setState({optionsModal: false})
                        this.setState({isModalVisible: false})
                    }}
                    closeOptionsModal={()=>{
                        this.setState({optionsModal: false})
                    }}
                    closeProjectModal={()=>{
                        this.setState({projectModal: false})
                    }}
                    msgAlert={()=>{
                    if(!isModalVisible) this.setState({isFlash: true})
                    }}
                />
            </>
        )
    }
}
export default manager;