// 月度车流分析

import closeIcon from "@/assets/brand/closeIcon.png";
import moment from "moment/moment";
import CarPic from "@/pages/basicManage/Brand/components/carPic";
import month from "@/assets/brand/month.png";
import turnoverS from "@/assets/brand/turnoverS.png";
import carNumber from "@/assets/brand/carNumber.png";
import {Button, DatePicker, Drawer} from "antd";
import React, {useRef, useState} from "react";
import DailyFlow from "@/pages/basicManage/Brand/components/dailyFlow";

 
// currentServiceName 服务区名称
// closeMonthFlow   关闭月度车流分析的抽屉
// flowSearch  车流分析顶部图表的搜索
// searchTime  车流分析顶部图表的搜索时间
// pieLines和pieLists 车流的数据
// serviceCarList 没处理的车流数据
// showFlowModal 点击车流分析出现的小悬浮框
// showNotice 小悬浮框是否显示
// showNoticeIndex 显示的是第几行
// showNoticeSubIndex 这一行的第几个
// closeFlowModal 点击车流的悬浮框 让他关闭
// maxObject 最大值对象 里面有四种车流的最大值
// currentItem 当前选中的品牌详情
// currentProjectItem 当前选中的项目详情
const MonthFlow = ({ currentServiceName, closeMonthFlow, flowSearch, searchTime, pieLines, pieLists, serviceCarList, showFlowModal,
  showNotice, showNoticeIndex, showNoticeSubIndex, closeFlowModal, maxObject,currentItem,currentProjectItem }: any) => {

  const { RangePicker } = DatePicker;
  const [showDrawer,setShowDrawer] = useState<boolean>(false)// 抽屉是否显示
  const tableList = useRef()// 表格列表
  const fmoney = (s: number, n?: number) => {
    /*
     * 参数说明：
     * s：要格式化的数字
     * n：保留几位小数
     * */
    n = n > 0 && n <= 20 ? n : s.toString().indexOf('.') === -1 ? 0 : s.toString().indexOf('.') > -1 ? s.toString().split('.')[1].length : 2;
    let fuhao = ''; // 如果数字小于零则值为-
    if (s < 0) {
      s = Math.abs(s);
      fuhao = '-'
    }
    s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, "")).toFixed(n)}`;
    const l = s.split(".")[0].split("").reverse();
    const r = s.split(".")[1];
    let t = "";
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    if (n === 0) {
      return s
    }
    return `${fuhao + [...t].reverse().join("")}.${r}`;

  }
  const noDecimal = (s: number) => {
    let fuhao = ''; // 如果数字小于零则值为-
    if (s < 0) {
      s = Math.abs(s);
      fuhao = '-'
    }
    s = `${parseFloat((`${s}`).replace(/[^\d\.-]/g, ""))}`
    const l = s.split(".")[0].split("").reverse(); const r = s.split(".")[1];
    let t = ''
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return fuhao + [...t].reverse().join("")
  }

  // const getDailyFlowData = async (item: any)=>{
  //   const req = {
  //     SERVERPART_ID: currentProjectItem?.current.SERVERPART_IDS,
  //     STATISTICS_DATE_Start: moment(item.STATISTICS_DATE).startOf("month").format("YYYY-MM-DD"),
  //     STATISTICS_DATE_End: moment(item.STATISTICS_DATE).endOf('month').format("YYYY-MM-DD"),
  //     ServerpartShopIds: currentProjectItem?.current.SERVERPARTSHOP_ID,
  //     PageIndex: 1,
  //     PageSize: 31,
  //     SortStr: 'STATISTICS_DATE desc'
  //   }
  //   const data = await GetDailyAnalysis(req)
  //   tableList.current = data.List
  //   setShowDrawer(true)
  // }

  return (
    <div className={'serviceDrawer'}>
      <div className={'drawerTop'}>
        <span className={'drawerTitles'}>{`${currentServiceName}-月度车流分析`}</span>
        <img className={'closeIcon'} src={closeIcon} onClick={() => { closeMonthFlow() }}></img>
      </div>
      <div className={'serviceCarEcharts'}>
        {/* defaultValue={[dayjs(searchTime[0],'YYYY-MM'),dayjs(searchTime[1],'YYYY-MM')]} */}
        <RangePicker className={'dateSelect'} defaultValue={[moment(searchTime[0], 'YYYY-MM'), moment(searchTime[1], 'YYYY-MM')]}
          changeOnBlur={true} format={'YYYY-MM'} picker="month" onChange={(val) => {
            flowSearch(val,currentServiceName,currentItem)
          }} />
        <CarPic pieLines={pieLines} pieLists={pieLists} noShowUnit={false} maxObject={maxObject} inDrawer={true} />
      </div>
      <div className={'serviceCar'}>
        <div className={'carList'}>
          {
            serviceCarList.length > 0 ?
              serviceCarList.map((item: any, index: number) => {
                return <div className={'carItem'}>
                  <div className={'left'} onClick={()=>{
                    getDailyFlowData(item)
                  }}>
                    <img className={'month'} src={month} />
                    <span className={'monthText'}>{item.STATISTICS_DATE.toString().substring(2)}</span>
                  </div>
                  <div className={'right'}>
                    {
                      item.list.map((subItem: any, subIndex: number) => {
                        return <div className={'serviceItem'}>
                          <div className={'item'}>
                            <div style={{ display: 'inline-block' }}>
                              <div className={'top'}>
                                <img className={'icon'} src={turnoverS} />
                                <span className={'text'}>{`${subItem.SERVERPART_REGION}区营业额`}<span className={'unit'}>(元)</span></span>
                              </div>
                              <div className={'price'}>{subItem.SERVERPART.REVENUE_AMOUNT ? fmoney(subItem.SERVERPART.REVENUE_AMOUNT, 2) : '-'}</div>
                            </div>
                          </div>

                          <div className={'item'} style={{ cursor: 'pointer' }} onClick={() => {
                            showFlowModal(index, subIndex)
                          }}>
                            <div style={{ display: 'inline-block' }}>
                              <div className={'top'}>
                                <img className={'icon'} src={carNumber} />
                                <span className={'text'}>{`${subItem.SERVERPART_REGION}区车流量`}</span>
                              </div>
                              <div className={'price'}>{subItem.SERVERPART.VEHICLE_COUNT ? noDecimal(subItem.SERVERPART.VEHICLE_COUNT) : ''}</div>
                            </div>
                            {
                              showNotice && index === showNoticeIndex && showNoticeSubIndex === subIndex ?
                                <div className={'notice'} onClick={(e: any) => {
                                  closeFlowModal(e)
                                }}>
                                  <div className={'noticeItem'}>
                                    <span className={'name'}>大型车</span>
                                    <div className={'progress'}>
                                      <div className={'have'} style={{ width: `${(subItem.SERVERPART.VEHICLE_COUNT_DXC / subItem.SERVERPART.VEHICLE_COUNT) * 100}%` }}></div>
                                    </div>
                                    <span className={'value'}>{subItem.SERVERPART.VEHICLE_COUNT_DXC ? noDecimal(subItem.SERVERPART.VEHICLE_COUNT_DXC) : ''}</span>
                                  </div>

                                  <div className={'noticeItem'}>
                                    <span className={'name'}>中型车</span>
                                    <div className={'progress'}>
                                      <div className={'have'} style={{ width: `${(subItem.SERVERPART.VEHICLE_COUNT_ZXC / subItem.SERVERPART.VEHICLE_COUNT) * 100}%` }}></div>
                                    </div>
                                    <span className={'value'}>{subItem.SERVERPART.VEHICLE_COUNT_ZXC ? noDecimal(subItem.SERVERPART.VEHICLE_COUNT_ZXC) : ''}</span>
                                  </div>

                                  <div className={'noticeItem'}>
                                    <span className={'name'}>小型车</span>
                                    <div className={'progress'}>
                                      <div className={'have'} style={{ width: `${(subItem.SERVERPART.VEHICLE_COUNT_XXC / subItem.SERVERPART.VEHICLE_COUNT) * 100}%` }}></div>
                                    </div>
                                    <span className={'value'}>{subItem.SERVERPART.VEHICLE_COUNT_XXC ? noDecimal(subItem.SERVERPART.VEHICLE_COUNT_XXC) : ''}</span>
                                  </div>
                                </div>
                                : ''
                            }
                          </div>

                          <div className={'item'}>
                            <div style={{ display: 'inline-block' }}>
                              <div className={'top'}>
                                <img className={'icon'} src={turnoverS} />
                                <span className={'text'}>{`${subItem.SERVERPART_REGION}单车价值`}<span className={'unit'}>(元/辆)</span></span>
                              </div>
                              <div className={'price'}>{subItem.SERVERPART.VEHICLE_COUNT ? fmoney(subItem.SERVERPART.REVENUE_AMOUNT / subItem.SERVERPART.VEHICLE_COUNT, 2) : '-'}</div>
                            </div>
                          </div>
                        </div>
                      })
                    }
                  </div>
                </div>
              }) : ''
          }
        </div>
      </div>

      <Drawer
        width={'60%'}
        visible={showDrawer}
        onClose={() => {
          setShowDrawer(false);
        }}
        bodyStyle={{ padding: 0 }}
        footer={
          <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={() => { setShowDrawer(false) }}>取消</Button>
            {/* <Button type={'primary'}>确定</Button> */}
          </div>
        }
        closable={false}>
        {
          tableList.current && tableList.current.length>0?
            <DailyFlow setShowDrawer={setShowDrawer} serviceCarList={serviceCarList} tableList={tableList}/>:''
        }
      </Drawer>
    </div>
  )
}

export default MonthFlow
