import closeIcon from "@/assets/brand/closeIcon.png";
import './dailyFlow.less'
import month from "@/assets/brand/month.png";
import turnoverS from "@/assets/brand/turnoverS.png";
import carNumber from "@/assets/brand/carNumber.png";
import React from "react";
import moment from "moment";


const DailyFlow = ({setShowDrawer,serviceCarList,tableList}: any)=>{



  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("")
  }
  return (
    <div className={'dailyDrawer'}>
      {
        tableList.current && tableList.current.length > 0 ?
          <div className={'drawerTop'}>
            <span className={'drawerTitles'}>{`${tableList.current[0].SERVERPART_NAME}${moment(tableList.current[0].STATISTICS_DATE).month()+1}月度车流分析`}</span>
            <img className={'closeIcon'} src={closeIcon} onClick={() => { setShowDrawer(false) }}></img>
          </div>:''
      }
      <div className={'carBox'}>
        <div className={'carList'}>
          {
            tableList.current && tableList.current.length > 0 ?
              tableList.current.map((item: any, index: number) => {
                return <div className={'carItem'}>
                  <div className={'left'} onClick={()=>{
                    setShowDrawer(true)
                  }}>
                    <img className={'month'} src={month} />
                    <span className={'monthText'}>{moment(item.STATISTICS_DATE).format('DD')}</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>
                          </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>
    </div>
  )
}

export default DailyFlow
