import position from "@/assets/brand/position.png";
import typeA from "@/assets/brand/typeA.png";
import typeB from "@/assets/brand/typeB.png";
import typeC from "@/assets/brand/typeC.png";
import typeD from "@/assets/brand/typeD.png";
import carIcon from "@/assets/brand/carIcon.png";
import moment from "moment";
import {businessType} from "@/pages/contract/emun";
import numeral from "numeral";
import shopIcon from "@/assets/brand/shopIcon.png";
import map from "@/assets/brand/map.png";
import date from "@/assets/brand/date.png";
import React from "react";


const ProjectListItem = ({type,item,fmoney,noDecimal,openCarFlow,openProject,getModeLabel,openShopDetail,setProjectDetailType,setProject,setShowProject,setShowLoading,setCurrentServiceName,handleCarAnalysis}: any)=>{
  return (
    <div className={'serviceTypeItem'}>
      <div className={'top'}>

        <div className={'topLeft'}>
          <img className={'positionImg'} src={position} />
          <span className={'itemTitle'}>{item.SERVERPART_NAME}</span>
          <img className={'typeImg'} src={item.SERVERPART_TYPE === 'A类' ? typeA : item.SERVERPART_TYPE === 'B类' ? typeB : item.SERVERPART_TYPE === 'C类' ? typeC : typeD} />
          {
            item.BUSINESSPROJECT_ICO?
              <img className={'logo'} style={{width:'40px',height:'40px',margin:'0 8px'}} src={item.BUSINESSPROJECT_ICO}></img>:''
          }
          {/* <span className={'value'}>{item.BRAND_NAME}</span> */}
        </div>

        <div className={'topCenter'}>
          <span className={'label'}>日均营收</span>
          {
            item.BUSINESSDAYS ?
              <span className={'value'}>￥{fmoney(item.REVENUE_AMOUNT / item.BUSINESSDAYS, 2)}</span>
              : ''
          }
        </div>
        <div className={'topRight'}>
          <img className={'carImg'} src={carIcon} />
          <span className={'text'}>断面流量</span>
          <span className={'number'} onClick={() => {
            // merchantInfo代表是抽屉里面那一层的内容
            if (type==='merchantInfo'){
              setShowLoading(true)
              setCurrentServiceName(item.SERVERPART_NAME)
              handleCarAnalysis(item,null)
            }else{
              openCarFlow(item)
            }
          }}>{noDecimal(item.SECTIONFLOW_NUM)}</span>
        </div>
      </div>
      <div className={'other'}>
        <div className={'otherTop'}>
          <div className={'otherTopLeft'}>
            <span className={'otherTopLeftTitle'} onClick={() => {
              if (type==='merchantInfo'){
                if (item.COOPMERCHANTS_ID !== '-1286') {
                  setProjectDetailType(1)
                  setProject(item)
                  setShowProject(true)
                } else {
                  setProjectDetailType(2)
                  setProject(item)
                  setShowProject(true)
                }
              }else{
                openProject(item)
              }
            }}>{item.BUSINESSPROJECT_NAME}</span>
            {
              item.PROJECT_ENDDATE ? Number(moment().diff(moment(item.PROJECT_ENDDATE), 'day')) < 0 ?
                  <></>
                  : <span className={'over'}>已到期</span>
                : item.BUSINESS_STATE === 2000 ?
                  <span className={'over'}>暂停中</span> :
                  item.BUSINESS_STATE === 3000 ?
                    <span className={'over'}>已停业</span>
                    : <></>
            }
          </div>
          <div className={'otherCenter'}>
            {
              item.SETTLEMENT_MODES ? <span className={'text'} style={{ marginRight: '4px' }}>{getModeLabel(item.SETTLEMENT_MODES)}</span> : ''
            }
            {
              item.BUSINESS_TRADE ? <span className={'text'}> / {businessType[item.BUSINESS_TRADE]}</span> : ''
            }
          </div>
          <div className={'otherTopRight'}>
            <span className={'money'}>{item.PROJECT_AMOUNT ? fmoney(item.PROJECT_AMOUNT) : '0'}</span>
            <span className={'unit'}>(万元)</span>
          </div>
        </div>
        <div className={'otherBottom'}>
          <div className={'bottomItem'} style={{ justifyContent: "flex-start", alignItems: 'flex-start' }}>
            {/* <span className={'text'}>{item.ROYALTY_PRICE?业主累计分润<span></span` {item.ROYALTY_PRICE}`:''}</span> */}
            <span className={'text'}>业主累计分润<span className={'value'} style={{ marginLeft: '12px' }}>
                            {item.ROYALTY_PRICE || item.ROYALTY_PRICE === 0 ? `￥${numeral(item.ROYALTY_PRICE).format('0,0.00')}` : ''}</span></span>
          </div>
          <div className={'bottomItem'} style={{ justifyContent: item.COOPMERCHANTS_NAME ? '' : 'flex-start', alignItems: 'flex-start' }}>
            {/* <span className={'text'}>商家累计分润 {item.SUBROYALTY_PRICE}</span> */}
            {item.COOPMERCHANTS_ID === '-1286' ? '' :
              <span className={'text'}>商家累计分润<span className={'value'} style={{ marginLeft: '12px' }}>
                              {item.SUBROYALTY_PRICE || item.SUBROYALTY_PRICE === 0 ? `￥${numeral(item.SUBROYALTY_PRICE).format('0,0.00')}` : ''}</span>
                            </span>
            }
          </div>
          <div className={'bottomItem'} style={{ width: '26%' }}>
            {/* <span className={'text'} style={{ display: "inline-block",paddingLeft:'30px' }}>项目累计营收 {item.REVENUE_AMOUNT}</span> */}
            <span className={'text'}>项目累计营收<span className={'value'} style={{ marginLeft: '12px' }}>
                            {item.REVENUE_AMOUNT || item.REVENUE_AMOUNT === 0 ? `￥${numeral(item.REVENUE_AMOUNT).format('0,0.00')}` : ''}</span></span>
          </div>
        </div>
        <div className={'otherBottom'}>
          {item.COOPMERCHANTS_ID === '-1286' ?
            <>
              <div className={'bottomItem'} style={{ justifyContent: "flex-start", alignItems: 'flex-start' }}>
                              <span className={'text'}>业主日均分润<span className={'value'} style={{ marginLeft: '12px' }}>
                                {item.BUSINESSDAYS ? `￥${numeral(item.REVENUE_AMOUNT / item.BUSINESSDAYS).format('0,0.00')}` : ''}</span></span>
              </div>
              <div className={'bottomItem'} style={{ justifyContent: item.COOPMERCHANTS_NAME ? '' : 'flex-start', alignItems: 'flex-start' }}></div>
              <div className={'bottomItem'} style={{ width: '26%' }}>
                <span className={'text'}>实际营业天数<span className={'value'} style={{ marginLeft: '12px' }}>{item.BUSINESSDAYS}</span></span>
              </div>
            </> : <>
              <div className={'bottomItem'} style={{ justifyContent: "flex-start", alignItems: 'flex-start' }}>
                              <span className={'text'}>业主日均分润<span className={'value'} style={{ marginLeft: '12px' }}>
                                {item.BUSINESSDAYS ? `￥${numeral(item.ROYALTY_PRICE / moment().diff(moment(item.PROJECT_STARTDATE), 'day')).format('0,0.00')}` : ''}</span></span>
              </div>
              <div className={'bottomItem'} style={{ justifyContent: item.COOPMERCHANTS_NAME ? '' : 'flex-start', alignItems: 'flex-start' }}>
                              <span className={'text'}>商家日均分润<span className={'value'} style={{ marginLeft: '12px' }}>
                                {item.BUSINESSDAYS ? `￥${numeral(item.SUBROYALTY_PRICE / item.BUSINESSDAYS).format('0,0.00')}` : ''}</span></span>
              </div>
              <div className={'bottomItem'} style={{ width: '26%' }}>
                              <span className={'text'}>实际营业天数<span className={'value'} style={{ marginLeft: '12px', whiteSpace: 'nowrap' }}>
                                {`${item.BUSINESSDAYS}/${item.PROJECT_DAYS}`}</span>
                              </span>
              </div>
            </>
          }
        </div>
        <div className={'otherBottom'}>
          {
            type==='merchantInfo'?
              <div className={'bottomItem'} style={{ justifyContent: "flex-start", alignItems: 'flex-start' }}>
                <img className={'bottomItemIcon'} src={map} style={{ marginTop: '4px' }} />
                <span className={'text'}>{item.SERVERPARTSHOP_NAME}</span>
              </div>:
              <div className={'bottomItem'} style={{ cursor: item.BUSINESSPROJECT_ID !== -1 && item.COOPMERCHANTS_ID !== '-1' ? 'pointer' : '', justifyContent: item.COOPMERCHANTS_NAME ? '' : 'flex-start', alignItems: 'flex-start' }} onClick={() => {
                if (item.BUSINESSPROJECT_ID && item.BUSINESSPROJECT_ID !== -1 && item.COOPMERCHANTS_ID && item.COOPMERCHANTS_ID !== '-1') {
                  openShopDetail(item)
                }
              }}>
                <img className={'bottomItemIcon'} src={shopIcon} style={{ marginTop: '3px' }} />
                <span className={'text'} style={{ color: item.COOPMERCHANTS_NAME === '待补充' ? 'red' : '#1890FF' }}>{item.COOPMERCHANTS_NAME}</span>
              </div>
          }
          {
            type==='merchantInfo'?
              <div className={'bottomItem'} style={{ justifyContent: item.COOPMERCHANTS_NAME ? '' : 'flex-start', alignItems: 'flex-start' }} >
              </div>:
              <div className={'bottomItem'} style={{ justifyContent: "flex-start", alignItems: 'flex-start' }}>
                <img className={'bottomItemIcon'} src={map} style={{ marginTop: '4px' }} />
                <span className={'text'}>{item.SERVERPARTSHOP_NAME}</span>
              </div>
          }
          <div className={'bottomItem'} style={{ "width": '26%' }}>
            <img className={'bottomItemIcon'} src={date} style={{ marginTop: '2.5px' }} />
            <span className={'text'} style={{ 'display': "inline-block", width: '180px' }}>{item.PROJECT_STARTDATE} - {item.PROJECT_ENDDATE}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ProjectListItem
