import './planRevenYear.less'

const planRevenYear = ({planType,planRevenueData,serviceName,revenueMonthYearDetail,planRevenueDetailList}: 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}`;

  }


  return (
    <div className={'planBox'}>
      {
        planType.current==='month'?
          <>
            <div className={'planTitle'}>{serviceName}自营计划</div>
            <div className={'planMonth'}>
              <div className={'planTop'}>
                <div className={'planTopLeft'}>
                  <img className={'img'} src={'https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg'}/>
                </div>
                <div className={'planTopRight'}>
                  <div className={'planRightTop'}>
                    <div className={'topTitle'}>{revenueMonthYearDetail.MonthBudget_Degree}%</div>
                    <div className={'topAdd'}>
                      <span className={'addLabel'}>比计划:</span>
                      <img className={'addIcon'} src={revenueMonthYearDetail.MonthGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'}/>
                      <span className={'addValue'}>{revenueMonthYearDetail.MonthGrowth_Rate}%</span>
                    </div>
                  </div>
                  <div className={'rightCenter'}>
                    <div className={'have'} style={{width:`${revenueMonthYearDetail.MonthBudget_Degree}%`}}></div>
                  </div>
                  <div className={'rightBottom'}>
                    <div className={'rightBottomItem'}>
                      <span className={'bottomLabel'}>本月已完成/元</span>
                      <span className={'bottomValue'}>{revenueMonthYearDetail.RevenueMonth_Amount?fmoney(revenueMonthYearDetail.RevenueMonth_Amount,2):''}</span>
                    </div>
                    <div className={'rightBottomItem'}>
                      <span className={'bottomLabel'}>本月计划/元</span>
                      <span className={'bottomValue'}>{revenueMonthYearDetail.BudgetMonth_Amount?fmoney(revenueMonthYearDetail.BudgetMonth_Amount,2):''}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className={'planDetail'}>
                {
                  planRevenueDetailList.current && planRevenueDetailList.current.length>0?
                    <>
                      {
                        planRevenueDetailList.current.map((item: any)=>{
                          return <div className={'detailItem'}>
                            <div className={'detailItemTop'}>
                              <div className={'itemTitle'}>{item.node.ACCOUNT_CODE}</div>

                            </div>
                            {
                              item.children && item.children.length>0?
                                <>
                                  {
                                    item.children.map((subItem: any)=>{
                                      return <div className={'subItem'}>
                                        <div className={'subItemTop'}>
                                          <div className={'subItemTitle'}>{subItem.node.ACCOUNT_CODE}</div>
                                          <div className={'subItemDetail'}>
                                            {
                                              subItem.node.BUDGETDETAIL_AMOUNT?
                                                <div className={'plan'}>{item.node.ACCOUNT_CODE==='毛利率'?`${fmoney(subItem.node.BUDGETDETAIL_AMOUNT,2)  }%`:fmoney(subItem.node.BUDGETDETAIL_AMOUNT,2)}<span className={'unit'}>(计划)</span></div>:'-'
                                            }
                                            {
                                              subItem.node.ShowGrowth_Rate?
                                              <div className={'real'}>{subItem.node.REVENUE_AMOUNT?fmoney(subItem.node.REVENUE_AMOUNT,2):''}<span className={'unit'}>(实际)</span></div>:''
                                            }
                                            {
                                              subItem.node.ShowGrowth_Rate?
                                                <div className={'add'}>
                                                  <img className={'detailAddIcon'} src={subItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':subItem.node.Growth_Rate<0?'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg':''}/>
                                                  <span className={'addValue'}>{Math.abs(subItem.node.Growth_Rate)}%</span>
                                                  <span className={'unit'}>({subItem.node.Growth_Rate>0?'提升':'降低'})</span>
                                                </div>:''
                                            }
                                          </div>
                                        </div>
                                        {
                                          subItem.children && subItem.children.length>0?
                                            <>
                                              {
                                                subItem.children.map((thirdItem: any)=>{
                                                  return <div className={'thirdItem'}>
                                                    <div className={'thirdItemTop'}>
                                                      <div className={'thirdTitle'}>{thirdItem.node.ACCOUNT_CODE}</div>
                                                      <div className={'thirdItemDetail'}>
                                                        {
                                                          thirdItem.node.BUDGETDETAIL_AMOUNT?
                                                            <div className={'plan'}>{fmoney(thirdItem.node.BUDGETDETAIL_AMOUNT,2)}<span className={'unit'}>(计划)</span></div>:'-'
                                                        }
                                                        {
                                                          thirdItem.node.ShowGrowth_Rate?
                                                            <div className={'real'}>{thirdItem.node.REVENUE_AMOUNT?fmoney(thirdItem.node.REVENUE_AMOUNT,2):''}<span className={'unit'}>(实际)</span></div>
                                                            :''
                                                        }
                                                        {
                                                          thirdItem.node.ShowGrowth_Rate?
                                                            <div className={'add'}>
                                                              {
                                                                thirdItem.node.Growth_Rate?
                                                                  <img className={'detailAddIcon'} src={thirdItem.node.Growth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'}/>
                                                                  :''
                                                              }
                                                              {
                                                                thirdItem.node.Growth_Rate?
                                                                  <span className={'addValue'}>{Math.abs(thirdItem.node.Growth_Rate)}%</span>
                                                                  :'-'
                                                              }
                                                              {
                                                                thirdItem.node.Growth_Rate?
                                                                  <span className={'unit'}>({thirdItem.node.Growth_Rate>0?'提升':'降低'})</span>
                                                                  :''
                                                              }
                                                            </div>:''
                                                        }
                                                      </div>
                                                    </div>
                                                  </div>
                                                })
                                              }
                                            </>:''
                                        }
                                      </div>
                                    })
                                  }
                                </>:''
                            }
                          </div>
                        })
                      }
                    </> :''
                }
              </div>
            </div>
          </>:
        planType.current==='year'?
        <>
          {
            planRevenueData?
              <>
                <div className={'planTitle'}>年度自营计划</div>
                <div className={'planYear'}>
                  <div className={'planTop'}>
                    <div className={'planTopLeft'}>
                      <img className={'img'} src={'https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg'}/>
                    </div>
                    <div className={'planTopRight'}>
                      <div className={'planRightTop'}>
                        <div className={'topTitle'}>{revenueMonthYearDetail.YearBudget_Degree}%</div>
                        <div className={'topAdd'}>
                          <span className={'addLabel'}>比计划:</span>
                          <img className={'addIcon'} src={revenueMonthYearDetail.YearGrowth_Rate>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'}/>
                          <span className={'addValue'}>{revenueMonthYearDetail.YearGrowth_Rate}%</span>
                        </div>
                      </div>
                      <div className={'rightCenter'}>
                        <div className={'have'} style={{width:`${revenueMonthYearDetail.YearBudget_Degree}%`}}></div>
                      </div>
                      <div className={'rightBottom'}>
                        <div className={'rightBottomItem'}>
                          <span className={'bottomLabel'}>本月已完成/元</span>
                          <span className={'bottomValue'}>{revenueMonthYearDetail.RevenueYear_Amount?fmoney(revenueMonthYearDetail.RevenueYear_Amount,2):''}</span>
                        </div>
                        <div className={'rightBottomItem'}>
                          <span className={'bottomLabel'}>本月计划/元</span>
                          <span className={'bottomValue'}>{revenueMonthYearDetail.BudgetYear_Amount?fmoney(revenueMonthYearDetail.BudgetYear_Amount,2):''}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={'areaList'}>
                    {
                      planRevenueData.current?.RegionBudgetList && planRevenueData.current?.RegionBudgetList.length>0?
                        <>
                          {
                            planRevenueData.current?.RegionBudgetList.map((item: any)=>{
                              return <div className={'areaItem'}>
                                <div className={'areaItemTop'}>
                                  <div className={'topLeft'}>
                                    <span className={'BigTitle'}>{item.Statistics_Month}</span>
                                    <span className={'smallText'}>月</span>
                                    <span className={'leftValue'}>{item.Budget_Degree}%</span>
                                  </div>
                                  <div className={'topRight'}>
                                    <span className={'rightText'}>比计划:</span>
                                    <img className={'rightAddIcon'} src={Number(item.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'}/>
                                    <span className={'rightAddValue'}>{item.Growth_Rate?`${item.Growth_Rate}%`:''}</span>
                                  </div>
                                </div>

                                <div className={'areaItemCenter'}>
                                  <div className={'areaItemHave'} style={{width:`${item.Budget_Degree}%`}}></div>
                                </div>
                                <div className={'areaItemBottom'}>
                                  <div className={'bottomItem'}>
                                    <span className={'bottomItemLabel'}>已完成</span>
                                    <span className={'bottomItemValue'}>{item.Revenue_Amount?fmoney(item.Revenue_Amount):'-'}</span>
                                  </div>

                                  <div className={'bottomItem'}>
                                    <span className={'bottomItemLabel'}>计划</span>
                                    <span className={'bottomItemValue'}>{item.Revenue_Amount?fmoney(item.Budget_Amount):''}</span>
                                  </div>
                                </div>
                              </div>
                            })
                          }
                        </>:''
                    }

                  </div>
                </div>
              </>:''
          }
        </>:''
      }
    </div>
  )
}

export default planRevenYear
