type Props = {
    title: string; //标题
    content: string; //内容
    topImg: string; //顶部图片
    wxUrl: string; //公众号文章连接
    gs1: string; //分公司
    gs2: string; //主公司
    mpImg: string; //公众号图片
    mpName: string; //公众号名称
    mpAppId: string; //公众号ID
    isLock?: string; //是否是预览
    pitchLinkType?:1|2,//1小程序 2快应用
    fastAppUrl:string ,//快应用地址
    expand:any,//自定义JSON字段
  };
  function createhtml(props: Props) {
    let { title, content, topImg, wxUrl, gs1, gs2, mpImg, mpName, mpAppId, isLock,pitchLinkType,fastAppUrl,expand } = props;
    let code =pitchLinkType === 1 ? wxUrl.replace('https://mp.weixin.qq.com/s/', '')?.replace(/\s/gi, '') : '';
    let isDev = process.env.NODE_ENV === 'development' || window.location.origin?.includes('test');
    let api = isDev ? 'http://test.report.zanxiangwl.com' : 'https://report.zanxiangwl.com';
    let callApi = api + '/api/share/page/wending/user/call';
    let linkApi = api + '/api/mini/app/get/link';
    return `<!DOCTYPE html>
      <html lang="en" data-dpr="1" style="font-size: 39px;">
      <head>
          <meta charset="utf-8">
          <meta content="yes" name="apple-mobile-web-app-capable">
          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
          <meta content="black" name="apple-mobile-web-app-status-bar-style">
          <meta name="format-detection" content="telephone=no">
          <meta name="full-screen" content="yes">
          <meta name="x5-fullscreen" content="true">
          <meta name="wap-font-scale" content="no">
          <title id='title'>${title}</title>
          <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
          <style>
              .head-title {
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 1.5;
                  overflow: hidden;
                  font-size: .48rem;
                  padding: 0.13333rem 0.26667rem;
                  text-align: center;
                  font-weight: 700;
      
              }
      
              body {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  margin: 0;
                  color: #333;
                  font: 12px/1.5 Arial, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
              }
      
              blockquote,
              body,
              button,
              code,
              dd,
              div,
              dl,
              dt,
              fieldset,
              form,
              h1,
              h2,
              h3,
              h4,
              h5,
              h6,
              input,
              legend,
              li,
              ol,
              p,
              pre,
              td,
              textarea,
              th,
              ul {
                  margin: 0;
                  padding: 0;
              }
      
              .content {
                  padding: 0 0.26667rem;
              }
      
              .btn {
                  margin: 0.26667rem auto;
                  width: 5.2rem;
                  border: none;
                  font-weight: 500;
                  color: #fff;
                  line-height: .96rem;
                  background: #ec3737;
                  -webkit-box-shadow: 0 2px 7px 0 rgb(44 27 27 / 30%);
                  box-shadow: 0 2px 7px 0 rgb(44 27 27 / 30%);
                  border-radius: 0.48rem;
                  font-size: .53333rem;
                  letter-spacing: 0;
                  text-align: center;
              }
      
              a {
                  color: #fff;
                  text-decoration: none;
                  width: 100%;
                  height: 100%;
                  display: inline-block;
              }
      
              .img-section {
                  padding: 0 .26667rem
              }
      
              #landingPageApp .img-section img {
                  width: 100%;
                  border-radius: 0.26667rem;
                  display: block;
              }
      
              li {
                  list-style: none outside none;
                  margin-top: 25px;
              }
              // text-indent: 1.3rem;
              #landingPageApp .bottom-section {
                  padding: 0.26667rem;
              }
      
              #landingPageApp .bottom-section img {
                  width: 100%;
                  display: block;
                  -webkit-box-shadow: 0 3px 9px 0 rgb(99 92 83 / 25%);
                  box-shadow: 0 3px 9px 0 rgb(99 92 83 / 25%);
              }
              #footer{
                  display: flex;
                  justify-content: center;
                  flex-flow: column;
                  align-items: center;
              }
               #suspension{
            font-size: 20px;
            display: flex;
            align-items: center;
            color: #999;
            font-weight: 600;
            background-color:rgb(247, 217, 184) ;
            margin-top: 10px;
            padding: 5px 0;
          }
          #suspension img{
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin:0 8px 0 5px;
              object-fit: cover;
          }
          #root{
              max-width: 750px;
              margin: 0 auto;
          }
          </style>
           <script>
              window.onload = () => {
                  // ajax请求
                  function ajax(url, method, data,token) {
                      if(method === 'GET'){
                          url+='?'
                          Object.keys(data).forEach(key=>{
                              url+=key+'='+data[key]+'&'
                          })
                          data = null
                      }
                      return new Promise(resolve => {
                          let request = null
                          if (window.XMLHttpRequest) {// code for all new browsers
                              request = new XMLHttpRequest();
                          }
                          else if (window.ActiveXObject) {// code for IE5 and IE6
                              request = new ActiveXObject("Microsoft.XMLHTTP");
                          }
                          request.open(method, url, true)
                          request.setRequestHeader('Content-type', 'application/json');
                          token && request.setRequestHeader('User-time',token);
                          request.send(data)
                          request.onreadystatechange = function () {
                              if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                                  let body = JSON.parse(request.responseText)
                                  resolve(body)
                              }
                          }
                      })
                  }
                 
                  let btn = document.getElementById('btna')
                  btn.addEventListener('click',()=>{
                      //上报
                      ajax("${callApi}", 'POST',JSON.stringify({"url":${isLock ?'window.location.href+"&adid=1730525942474755&clickid=EIvYzcD3vIkDGLy9spOHAyCIz6DN7Y2cBTAMOMG4AkIiMjAyMjA0MTkxNjUyMDIwMTAyMDgxMDUxNDAwN0ZBREMxMEjBuAKQAQA&creativeid=1730525942475787&creativetype=5"':'window.location.href'} })).then(res=>{
                         ${
                          pitchLinkType===1 ? `if(res.data){
                              // 生成小程序
                              let code = '${code}'
                              let mpAppId ='${mpAppId}'
                              let url = '${isLock}'
                              ajax("${linkApi}",'POST',JSON.stringify({"url":url|| window.location.origin+window.location.pathname,code,mpAppId}),res.data).then(res=>{
                                  if(res.data){
                                      window.location.href  = res.data
                                  }
                              })
                          }`:''
                         } 
                      })
                  })
              }
          </script>
      </head>
      
      <body style="font-size:12px">
          <section id="root">
              <div data-reactroot="" class="" id="landingPageApp" style="background: rgb(244, 203, 157);">
                  <div class="head-title" id='body-title'></div>
                  <div class="img-section"><img
                          src="${topImg}" alt="" id='topImg' />
                  </div>
                  <div class="content" id='content'>
                      ${content}
                  </div>
                  ${
                    expand?.guideImg ? `<img src="${expand?.guideImg}" style="width:100%;margin-top:20px"/>`:''
                  }
                  ${
                      pitchLinkType === 1 ?   ` <div class="btn" id='btna'>${expand.btnText ? expand.btnText :'继续阅读下一章'}</div>` : ` <div class="btn" id='btna'><a href='${fastAppUrl}'>${expand.btnText ? expand.btnText :'继续阅读下一章'}</a></div>`
                  }
                  <div class="bottom-section"><img src="" alt=""></div>
                  <div id='footer'>
                      <span>${gs1}</span>
                      <span>${gs2}</span>
                  </div>
                  <div id='suspension'>
                      ${mpImg && `<img src="${mpImg}" />`}
                      <span>${mpName}</span>
                  </div>
              </div>
          </section>
      </body>
      
      </html>`;
  }
  export default createhtml;
  