import closeIcon from "@/assets/brand/closeIcon.png";
import defaultImg from "@/assets/brand/defaultIcon.png";
import effective from "@/assets/brand/effective.png";
import wrong from "@/assets/brand/wrong.png";
import format from "@/assets/brand/format.png";
import brandType from "@/assets/brand/brandType.png";
import brandDesc from "@/assets/brand/brandDesc.png";
import post from "@/assets/brand/post.png";
import serviceIcon from "@/assets/brand/serviceIcon.png";
import {Empty, Upload} from "antd";
import React, {useEffect, useState} from "react";
import type {UploadFile} from "antd/es/upload/interface";
import OnlineProjectItem from "@/pages/basicManage/Brand/components/OnlineProjectItem";
import {getBrandDetail} from "@/pages/basicManage/Brand/service";


// detailMessage 点击的品牌的详细信息  从index文件传入
// licenseList 拿到该品牌的文件信息  从index文件传入
// brandTypeList 品牌类型的选择列表  从index文件传入
// accountReceivablesList 更换组件之后已无用  从index文件传入
// settlementList 结算模式的数组  从index文件传入
// closeDetailDrawer 关闭品牌详情抽屉  从index文件传入
// openCarFlow 详情抽屉里面点击断面流量触发的方法  从index文件传入
// openProject  详情抽屉里面点击项目名称弹出的抽屉  从index文件传入
// openShopDetail 详情抽屉里面点击商家出现的抽屉  从index文件传入
// getTableListLength 文件列表长度  从index文件传入
const BrandDetail = ({ detailMessage,licenseList, brandTypeList, accountReceivablesList,
                       settlementList, closeDetailDrawer, openCarFlow, openProject, openShopDetail,getTableListLength }: any) => {
  useEffect(async () => {
    if (detailMessage && detailMessage.BRAND_ID){
      const res = await getBrandDetail(detailMessage.BRAND_ID)
      setDetail(res)
    }
  }, []);
  const [Detail,setDetail] = useState<any>()
  const showList = true
  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 getModeLabel = (value: string) => {
    let text: string = ''
    settlementList?.forEach((item: any) => {
      if (item.value === value) {
        text = item.label
      }
    })
    return text
  }

  const [list1001,setList1001] = useState<any>()// 1001的附件列表
  const [list1002,setList1002] = useState<any>()// 1002的附件列表
  const [list1003,setList1003] = useState<any>()// 1003的附件列表
  const [list1004,setList1004] = useState<any>()// 1004的附件列表
  const [list1005,setList1005] = useState<any>()// 1005的附件列表
  useEffect(()=>{
    const type1001: UploadFile[] = []
    const type1002: UploadFile[] = []
    const type1003: UploadFile[] = []
    const type1004: UploadFile[] = []
    const type1005: UploadFile[] = []
    licenseList.forEach((item: any)=>{
      if (item.ImageType === 1001){
        type1001.push(item)
      }else if(item.ImageType === 1002){
        type1002.push(item)
      }else if(item.ImageType === 1003){
        type1003.push(item)
      }else if(item.ImageType === 1004){
        type1004.push(item)
      }else if(item.ImageType === 1005){
        type1005.push(item)
      }
    })
    setList1001(type1001)
    setList1002(type1002)
    setList1003(type1003)
    setList1004(type1004)
    setList1005(type1005)
  },[licenseList])




  useEffect(()=>{
  },[])
  return (
    <div className={'drawer'} style={{padding: '0px'}}>
      <div className={'drawerTop'}>
        <span className={'drawerTitle'}>品牌详情</span>
        <img className={'closeIcon'} src={closeIcon} onClick={() => { closeDetailDrawer(false) }}></img>
      </div>

      <div></div>

      <div className={'drawerDetail'}>
        <div className={'drawerDetailTop'}>
          <div className={'left'}>
            <div className={'bandLogo'}>
              <img style={{ width: '100%', height: '100%' }} src={detailMessage.BRAND_INTRO || defaultImg} />
            </div>
            <div className={'message'}>
              <div className={'title'}>
                <span className={'name'}>{detailMessage.BRAND_NAME}</span>
                <span style={{display:'inline-block',padding:'0 4px',background:'#E1F3FF',color:'#0075A1',marginRight:'6px'}}>{detailMessage.MANAGE_TYPE===1000?'直营':'加盟' }</span>
                <div className={'state'}>
                  <>
                    <img className={'stateIcon'} src={detailMessage.BRAND_STATE === 1 ? effective : wrong} />
                    <span className={'stateText'} style={{ color: detailMessage.BRAND_STATE === 1 ? '' : '#ccc' }}>{detailMessage.BRAND_STATE === 1 ? '有效' : '无效'}</span>
                  </>
                </div>
              </div>
              {/* <div className={'labelList'}> */}
              {/*   <div className={'labelItem'}>这是标签1</div> */}
              {/* </div> */}
              <div className={'detail'}>
                <div className={'detailLeftBox'}>
                  <div className={'detailItems'}>
                    <div style={{display:'flex',alignItems:'flex-start',flex:1}}>
                      <div className={'detailLeft'} >
                        <img className={'detailIcon'} src={format} />
                        <span className={'detailName'}>经营业态</span>
                      </div>
                      <div style={{display:'flex',flexFlow:'wrap'}}>
                        {
                          detailMessage.BUSINESSTRADE_NAME ? detailMessage.BUSINESSTRADE_NAME.toString().split(',').map((tradeName: any) => {
                            return <div className={'detailType'} style={{ background: 'rgba(200, 227, 207, 0.4)', color: '#005F10', marginRight: 6,marginBottom:'8px' }}>
                              {tradeName}</div>
                          }) : '-'
                        }
                      </div>
                    </div>
                  </div>
                  <div className={'detailItems'}>
                    <div className={'detailLeft'}>
                      <img className={'detailIcon'} src={brandType} />
                      <span className={'detailName'}>品牌类型</span>
                    </div>
                    {
                      detailMessage.BRAND_TYPENAME ? detailMessage.BRAND_TYPENAME.toString().split(',').map((typeName: any) => {
                        return <div className={'detailType'} style={{ background: 'rgba(251, 237, 200, 0.4)', color: '#571519', marginRight: 6 }}>
                          {typeName}</div>
                      }) : '-'
                    }
                  </div>
                  <div className={'detailItems'} style={{ alignItems: 'flex-start' }}>
                    <div className={'detailLeft'}>
                      <img className={'detailIcon'} src={brandDesc} />

                      <span className={'detailName'}>品牌简介</span>
                    </div>
                    <div className={'detailType'} style={{ flex: 1 }}>{detailMessage.BRAND_DESC}</div>
                  </div>
                  <div className={'detailItems'}>
                    <div className={'detailLeft'}>
                      <img className={'detailIcon'} src={post} />
                      <span className={'detailName'}>建议提成</span>
                    </div>
                    <div className={'detailType'}>{detailMessage.COMMISSION_RATIO || '-'}</div>
                  </div>
                  <div className={'detailItems'} style={{display:'flex',alignItems:'center'}}>
                    <div className={'detailLeft'}>
                      <img className={'detailIcon'} src={post} />
                      <span className={'detailName'}>经营商家</span>
                    </div>
                    <div className={'detailType'} style={{cursor:'pointer',color:'#1890FF'}} onClick={()=>{
                      openShopDetail(Detail)
                    }}>{detailMessage.MerchantName || '-'}</div>
                  </div>
                </div>
                <div className={'detailRightBox'}>
                    {
                      detailMessage.type2000 || detailMessage.type3000 ?
                        <div style={{ display: 'flex',marginBottom:'12px' }}>
                          <div className={'detailType'}>
                            <span className={'type'} style={{ marginRight: '8px' }}>{`运营中  ${detailMessage.type1000}个`}</span>
                            <span className={'type'} style={{ marginRight: '8px' }}>{detailMessage.type2000 ? `暂停中  ${detailMessage.type2000}个` : ''}</span>
                            <span className={'type'}>{detailMessage.type3000 ? `已停业  ${detailMessage.type3000}个` : ''}</span>
                            {/* {`运营中  ${detailMessage.type1000}个,暂停中  ${detailMessage.type2000}个,已停业  ${detailMessage.type3000}个`} */}
                          </div>
                        </div> : ''
                    }
                    {
                      list1001 && list1001.length>0 || list1002 && list1002.length>0 || list1003 && list1003.length>0 || list1004 && list1004.length>0 || list1005 && list1005.length>0?
                        <>
                          <div className={'detailItem'}>
                            <div className={'detailLeft'} >
                              <img className={'detailIcon'} src={format} />
                              <span className={'detailName'}>营业执照</span>
                            </div>
                            <div className={'detailImgList'}>
                              {
                                list1001 && list1001.length>0?
                                  <Upload
                                    defaultFileList={list1001 || []}
                                    showUploadList={{
                                      showDownloadIcon: false,
                                      showRemoveIcon: false,
                                    }}
                                  />:<span style={{color: 'rgba(0,0,0,0.45)'}}>未添加</span>
                              }
                            </div>
                          </div>

                          <div className={'detailItem'}>
                            <div className={'detailLeft'} >
                              <img className={'detailIcon'} src={format} />
                              <span className={'detailName'}>商标注册证</span>
                            </div>
                            <div className={'detailImgList'}>
                              {
                                list1004 && list1004.length>0?
                                  <Upload
                                    defaultFileList={list1004 || []}
                                    showUploadList={{
                                      showDownloadIcon: false,
                                      showRemoveIcon: false,
                                    }}
                                  />:<span style={{color: 'rgba(0,0,0,0.45)'}}>未添加</span>
                              }
                            </div>
                          </div>

                          <div className={'detailItem'}>
                            <div className={'detailLeft'} >
                              <img className={'detailIcon'} src={format} />
                              <span className={'detailName'}>信用记录</span>
                            </div>
                            <div className={'detailImgList'}>
                              {
                                list1005 && list1005.length>0?
                                  <Upload
                                    defaultFileList={list1005 || []}
                                    showUploadList={{
                                      showDownloadIcon: false,
                                      showRemoveIcon: false,
                                    }}
                                  />:<span style={{color: 'rgba(0,0,0,0.45)'}}>未添加</span>
                              }
                            </div>
                          </div>

                          <div className={'detailItem'}>
                            <div className={'detailLeft'} >
                              <img className={'detailIcon'} src={format} />
                              <span className={'detailName'}>合作授权书</span>
                            </div>
                            <div className={'detailImgList'}>
                              {
                                list1002 && list1002.length>0?
                                  <Upload
                                    defaultFileList={list1002 || []}
                                    showUploadList={{
                                      showDownloadIcon: false,
                                      showRemoveIcon: false,
                                    }}
                                  />:<span style={{color: 'rgba(0,0,0,0.45)'}}>未添加</span>
                              }
                            </div>
                          </div>

                          <div className={'detailItem'}>
                            <div className={'detailLeft'} >
                              <img className={'detailIcon'} src={format} />
                              <span className={'detailName'}>经营许可证</span>
                            </div>
                            <div className={'detailImgList'}>
                              {
                                list1003 && list1003.length>0?
                                  <Upload
                                    defaultFileList={list1003 || []}
                                    showUploadList={{
                                      showDownloadIcon: false,
                                      showRemoveIcon: false,
                                    }}
                                  />:<span style={{color: 'rgba(0,0,0,0.45)'}}>未添加</span>
                              }
                            </div>
                          </div>
                        </>:
                        <>
                          <div className={'detailItem'}>
                            <div>
                              <div className={'detailLeft'}  style={{marginBottom:'12px'}}>
                                <img className={'detailIcon'} src={format} />
                                <span className={'detailName'}>营业执照</span>
                              </div>
                              <div className={'detailLeft'}   style={{marginBottom:'12px'}}>
                                <img className={'detailIcon'} src={format} />
                                <span className={'detailName'}>商标注册证</span>
                              </div>
                              <div className={'detailLeft'}   style={{marginBottom:'12px'}}>
                                <img className={'detailIcon'} src={format} />
                                <span className={'detailName'}>信用记录</span>
                              </div>
                              <div className={'detailLeft'}   style={{marginBottom:'12px'}}>
                                <img className={'detailIcon'} src={format} />
                                <span className={'detailName'}>合作授权书</span>
                              </div>
                              <div className={'detailLeft'}   style={{marginBottom:'12px'}}>
                                <img className={'detailIcon'} src={format} />
                                <span className={'detailName'}>经营许可证</span>
                              </div>
                            </div>
                            <div>
                              <Empty description="暂未上传相关附件" />
                            </div>
                          </div>
                        </>
                    }

                </div>
              </div>
            </div>
          </div>
          <div className={'right'}>
            {
              detailMessage.ServerpartList && detailMessage.ServerpartList.length > 0 ?
                <div className={'service'}>
                  <img className={'serviceIcon'} width={16} height={16} src={serviceIcon}></img>
                  <span className={'serviceNumber'}>{`${detailMessage.ServerpartList.length}个服务区`}</span>
                </div>
                : ''
            }
          </div>
        </div>

        <div className={'drawerList'}>
          {/* <div className={'listTitle'}> */}
          {/*   经营项目 */}
          {/*   { */}
          {/*     detailMessage.ServerpartList && detailMessage.ServerpartList.length > 0 ? */}
          {/*       <span className={'count'}>({detailMessage.type1000})</span> */}
          {/*       : '' */}
          {/*   } */}
          {/* </div> */}
          {/* serverpartId={serverpartId} giveProjectServiceInfo={giveProjectServiceInfo} */}
          <OnlineProjectItem getModeLabel={getModeLabel} fmoney={fmoney} openProject={openProject} BRANDID={detailMessage.WECHATAPPSIGN_NAME} showList={showList}
                             openShopDetail={openShopDetail} openCarFlow={openCarFlow} canShowStore={true} getTableListLength={getTableListLength}/>
          {/* { */}
          {/*   accountReceivablesList && accountReceivablesList.length > 0 ? */}
          {/*     accountReceivablesList.map((item: any) => { */}
          {/*       // moment().diff(moment(item.PROJECT_ENDDATE), 'day')<0?'disable': */}
          {/*       return <div className={'serviceTypeList'}> */}
          {/*         <ProjectListItem type={'detail'} item={item} fmoney={fmoney} noDecimal={noDecimal} openCarFlow={openCarFlow} openProject={openProject} getModeLabel={getModeLabel} openShopDetail={openShopDetail}/> */}
          {/*       </div> */}
          {/*     }) : <Empty /> */}
          {/* } */}
        </div>
      </div>
    </div>
  )
}


export default BrandDetail;
