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 './listItem.less'


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;
  var fuhao = ''; //如果数字小于零则值为-
  if (s < 0) {
    s = Math.abs(s);
    fuhao = '-'
  }
  s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
  var l = s.split(".")[0].split("").reverse(),
    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
  } else {
    return fuhao + [...t].reverse().join("") + "." + r;
  }
}
const ListItem = ({item,settlementList,openProject,openShopDetail}: any)=>{

  // 拿到模式的值
  const getModeLabel = (value: string) => {
    let text: string = ''
    settlementList?.forEach((item: any) => {
      if (item.value === value) {
        text = item.label
      }
    })
    return text
  }

  return (
    <div className={'listItem'}>
      <div className={'other'}>
        <div className={'otherTop'}>
          <div className={'otherTopLeft'}>
                          <span className={'otherTopLeftTitle'} onClick={(e) => {
                            e.nativeEvent.stopImmediatePropagation()
                            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 ? */}
            {/*     <div className={'otherBox'}> */}
            {/*       <img className={'textIcon'}  src={`https://eshangtech.com/ShopICO/business/modes/${item.SETTLEMENT_MODES}.svg`}/> */}
            {/*       <span className={'text'} style={{ marginRight: '4px' }}>{getModeLabel(item.SETTLEMENT_MODES)}</span> */}
            {/*     </div> */}
            {/*     : '' */}
            {/* } */}
            {/* { */}
            {/*   item.SETTLEMENT_MODES && item.BUSINESS_TRADE ? */}
            {/*   <div className={'otherBox'}> */}
            {/*     <span className={'text'}>/ </span> */}
            {/*   </div>:'' */}
            {/* } */}
            {
              item.BUSINESS_TRADE ?
                <div className={'otherBox'}>
                  <img className={'textIcon'}  src={`https://eshangtech.com/ShopICO/business/trade/${item.BUSINESS_TRADE}.png`}/>
                  <span className={'text'}> {businessType[item.BUSINESS_TRADE]}</span>
                </div>
                : ''
            }
          </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'}>
            {/* <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?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.BUSINESSDAYS:''}${item.PROJECT_DAYS && item.BUSINESSDAYS?'/':''}${item.PROJECT_DAYS?item.PROJECT_DAYS:''}`}</span>
                              </span>
              </div>
            </>
          }
        </div>
        <div className={'otherBottom'}>
          <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>

          <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 ListItem
