import React, {PureComponent, useRef} from 'react';
import { history } from '@umijs/max';
import {
  Row,
  Col,
  Tooltip,
  Card,
  List,
  DatePicker,
  Button,
  Statistic,
  Spin,
  Empty,
  message,
  Popconfirm,
  Space,
  Modal
} from 'antd';
// import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import './index.less';
import talkPng from '@/images/talk/talk.png';
import { RightOutlined } from '@ant-design/icons';
import moment from 'moment';
import { followUpAProjectManager, getRA, getSessionUserData } from '@/utils/session';
import { getDefId ,fetchProjectEntrustFileList} 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 ApprovalDetail from '@/pages/SystemMessage/message/components/approvalDetail'
import {submitHiddenForm, createHiddenForm} from '@/utils/CustomerService' //智慧客服
import kefu from '@/assets/img/kefu.png'  //智慧客服
import {getProjectInProgress} from '@/services/dashboard'
import {procurementMode} from "@/pages/ProjectFiles/dict";
import {agencyCompanyDispatch} from "@/pages/ProjectFiles/service";
import ProTable from '@ant-design/pro-table';
@connect(({ dashboard, loading }) => ({
    ...dashboard,
    downlistLoading: loading.effects['dashboard/fetchDowntlist'],
    projectlistLoading: loading.effects['dashboard/fetchprojectRecords'],
}))
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, //问卷弹窗
        mainDetail: false, // 审批单消息弹窗
        isModalVisible: false, //智慧客服
        kefuTip: false, // 客服弹窗
        projectInProgressObj: [],
    }
    componentDidMount() {
      this.props.dispatch({
        type: "dashboard/fetchDowntlist",
        payload: {limit: 4}
      })
      this.props.dispatch({
        type: "dashboard/fetchprojectRecords",
        payload: {selectDate: moment().format('YYYYMM')}
      })
      this.props.dispatch({
        type: "dashboard/fetchtlist",
        payload: {limit: 7}
      })
      this.props.dispatch({
        type: "dashboard/fetchtlistre",
        payload: {pageNo: 1, pageSize: 7}
      })
      this.props.dispatch({
        type: "dashboard/fetchtClarify",
        payload: {authorizestate: '0', templatetype: '4', size: 6}
      })
      // this.props.dispatch({
      //   type: "dashboard/fetchProjectFileList",
      //   payload: {ownerContactId: 'xiaorui', status: 2}
      // })
        // 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功能集成
        // }
        this.approvalDetail()
    }

    onChange = (date, dateString) => {
        this.setState({
            datevalue: moment(dateString, 'YYYY-MM'),
            datestring: dateString.split('-').join('')
        })
    }
    onSearch = () => {
        const { datestring } = this.state;
        this.props.dispatch({
            type: "dashboard/save",
            payload: { staloading: true }
        })
        this.props.dispatch({
            type: "dashboard/fetchprojectRecords",
            payload: { selectDate: datestring }
        })
    }
    lookDetail = (id) => { // 消息查看详情
        this.setState({
            messId: id,
            messageDetail: true
        })
    }
    closeModel = () => { // 关闭消息弹窗
        this.setState({
            messageDetail: false,
            mainDetail: false,
        })
    }
    lookInfo = (id) => { // 公告查看
        this.setState({
            detailId: id,
            noticeDetail: true
        })
    }
    noticeModel = () => { // 公告关闭消息弹窗
        this.setState({
            noticeDetail: false
        })
    }
    approvalDetail = () => { // 审批单消息查看详情
        this.setState({
            mainDetail: true
        })
    }
    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
        })
    }
    followUpProject = async (data) => {
        await followUpAProjectManager(data);
        history.push('/ProjectLayout/Manager/HomePageSectionList');
    };
    //触发客服
    initChatUI = ()=>{
        let roleAuthority = sessionStorage.getItem('roleAuthority');
        let data = getSessionUserData();
        const inputList = [
        {
            label:null,
            paraName:'origin',
            isEncode:false,
            paraVal:'eBid',
        },
        {
            label:null,
            paraName:'organizationId',
            isEncode:false,
            paraVal: data.organizationId,
        },
        {
            label:null,
            paraName:'tenderAgencyId',
            isEncode:false,
            paraVal:'EMPTY',
        },
        {
            label:null,
            paraName:'tenderAgencyName',
            isEncode:true,
            paraVal:'招标采购中心客服',
        },
        {
            label:null,
            paraName:'roleAuthority',
            isEncode:false,
            paraVal:JSON.parse(roleAuthority)[0],
        },
        {
            label:null,
            paraName:'module',
            isEncode:false,
            paraVal:'2',
        },
        {
            label:null,
            paraName:'custType',
            isEncode:false,
            paraVal:'1',
        },
        ]
        createHiddenForm(inputList, window.location.pathname)
        submitHiddenForm()
    }

    render() {
      const {downlist, projectlist, staloading, tlist, trelist, idList, dateNum,} = this.props;
      // const {projectInProgressObj} = this.state;
      // console.log(projectInProgressList);
      const {datevalue, messId, messageDetail, detailId, noticeDetail, questData, questVisible, mainDetail,} = this.state; //智慧客服state
      const columns = [
        {
          title: '序号',
          dataIndex: 'index',
          renderText: (text, record, index) => index + 1,
          width: 50,
          hideInSearch: true,
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          valueType: 'text',
        },
        {
          title: '标段名称',
          dataIndex: 'bidSectName',
          hideInSearch: true,
        },
        {
          title: '采购方式',
          dataIndex: 'bidMethodDict',
          valueType: 'select',
          valueEnum: procurementMode,
        },
        {
          title: '项目进度',
          dataIndex: 'businessModule',
          hideInSearch: true,
          render: (_, record) => {
            console.log(record.businessModule)
            return businessModuleMap.get(record.businessModule + '');
          }
        },
        {
          /**
           * 1  未分派   2 已分派/项目经理未同意  3 项目经理已同意
           4  项目草稿 5 项目进行  9 拒绝
           */
          title: '在此环节停留时间',
          dataIndex: 'bidSectionStartDate',
          valueType: 'select',
          render: (_, record) => {
            if(record.bidSectionStartDate){
              const d1 = moment(record.bidSectionStartDate);
              const now = moment(); // 使用moment获取当前时间
              const daysDiff = Math.abs(now.diff(d1, 'days')); // 直接使用moment的diff方法
              return daysDiff + '天';
            }
            return '-'
          }
        },
        {
          title: '操作',
          dataIndex: 'option',
          valueType: 'option',
          render: (text, record) => (
            <>
              <Button type="link" onClick={() => {
                sessionStorage.setItem("projectData",JSON.stringify(record))
                sessionStorage.setItem("opt","iview")
                history.push({
                  pathname: '/ProjectLayout/Manager/HomePageSectionList'
                });

              }}>项目跟进
              </Button>
            </>
          )
        },
      ];
      const businessModuleMap = new Map([
        ['1','建档'],
        ['2','资审招标'],
        ['3','资审投标'],
        ['4','资审开标'],
        ['5','资审评标'],
        ['6','资审定标'],
        ['7','招标'],
        ['8','投标'],
        ['9','开标'],
        ['10','评标'],
        ['11','定标'],
        ['12','归档'],
      ]);
      const fetchData = async (params) => {
        const { current, pageSize } = params;
        const res = await getProjectInProgress({appManagerId: 'xiaorui', status: 2, pageNumber:(Number(current)-1)*pageSize,pageSize: pageSize})
        const result = {
          data: res.data.records,
          total: res.data.total,
          success: res.data.success,
        };
        return result;
      }
        // @ts-ignore
      return (
            <>
                <a className="talk" onClick={() => {
                     this.setState({
                        kefuTip: true
                    })
                }}>平台操作咨询︵<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: '100%', overflow: "hidden" }}>
                    <Row className="topt">
                        <Col span={12}><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={12}><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">
                            <ProTable
                            rowKey="id"
                            pagination={{
                              pageSize: 5 ,
                            }}
                            options={false}
                            search={false}
                            request={fetchData}
                            columns={columns}
                            />
                          </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} />}
                {
                    idList.length > 0 ? <ApprovalDetail approvalId={idList[0]} dateNum={dateNum} trelist={idList} onCancel={() => { this.closeModel(), this.props.dispatch({ type: "dashboard/fetchtClarify", payload: { authorizestate: '0', templatetype: '4', size: 6 } }) }} modalVisible={mainDetail} /> : null
                }
                {
                this.state.kefuTip ? <div style={{ border:'1px solid grey', borderRadius: '10px', backgroundColor:'white',position:'absolute', width:'600px', left:'50%', top:'50%',transform:'translate(-50%,-50%)'}}>
                    <div style={{padding:'10px',borderRadius: '6px 6px 0px 0px',backgroundColor:'rgb(179,0,0)', color:'white'}}>
                        温馨提示
                    </div>
                    <div style={{padding:'10px'}}>
                        <p>您好，平台操作咨询仅可以解决您在<span style={{color:'rgb(179,0,0)', fontWeight:'bolder'}}>平台的操作使用问题。</span></p>
                        <p>如您需要咨询项目相关问题（发票、保证金等）请点击项目右侧<img style={{width:20,height:20,}} src={kefu} alt="" />进行咨询。</p>
                        <p>请问您是否咨询系统操作问题？</p>
                    </div>
                    <div style={{
                        //width:'200px',
                        position:'relative',
                        left:'50%',
                        transform:'translateX(-50%)',
                        display: 'inline-block',
                        margin: '8px 4px',
                        padding: '4px'
                        }}>

                            <Space
                                align='center'
                                >
                                <Button type='primary' onClick={() => {this.initChatUI();this.setState({
                                    kefuTip: false
                                    })}}>是</Button>
                                <Button  onClick={() => this.setState({
                                    kefuTip: false
                                    })}>否
                                </Button>
                            </Space>

                    </div>
                </div>:null
            }
            </>
        )
    }
}
export default manager;