const url = window.location.href;

/**
 * 判断是否文章和问答页
 * @param {*} url 
 * @returns 
 */
function isNewsOrAsk(url = window.location.href) {
  // 创建正则表达式模式
  const pattern = /\/(news|ask)\//;
  // 判断链接是否匹配正则表达式
  if (pattern.test(url)) {
    return true
  } else {
    return false
  }
}

/**
 * 判断是否包含指定ClassName,插入对应html
 */
function isClass() {
  const gptRightHtml = `<div class="chatgpt-rigth" id="chatgpt-rigth" style="background-image: url('/static/chatgpt/images/chatgpt/gpt-bg3.jpg');background-repeat: no-repeat;background-size: cover;">
                        <div class="lCard-body">
                            <p class="title">chatGPT，一个应用广泛的超级生产工具</p>
                            <div class="list-unstyled mt-4">
                                <li class="media align-items-center py-4 border-top border-white-400">
                                    <div class="media-body font-14 star-lh-24 pr-4">
                                        <p class=" text-ell-1 ">扫码优先体验</p>
                                        <p class=" text-ell-1 ">chatGPT小程序版</p>
                                    </div>
                                    <a class="d-flex" href="#">
                                        <img class="rounded boxsize-80" src="http://www.400122.cn/static/chatgpt/images/chatgpt/gpt-xcx.png" alt="酷音公众号">
                                    </a>
                                </li>
                                <li class="media align-items-center py-4 border-top border-white-400">
                                    <div class="media-body font-14 star-lh-24 pr-4">
                                        <p class=" text-ell-1 ">关注公众号</p>
                                        <p class=" text-ell-1 ">了解相关最新动态</p>
                                    </div>
                                    <a class="d-flex" href="#">
                                        <img class="rounded boxsize-80" src="http://www.400122.cn/static/chatgpt/images/chatgpt/gpt-gzh.png" alt="酷音公众号">
                                    </a>
                                </li>
                                <li class="media align-items-center py-4 border-top border-white-400">
                                    <div class="media-body font-14 star-lh-24 pr-4">
                                        <p class=" text-ell-1 ">商务合作</p>
                                        <p class=" text-ell-1 ">GPT程序应用集成开发</p>
                                    </div>
                                    <a class="d-flex" href="#">
                                        <img class="rounded boxsize-80" src="http://www.400122.cn/static/chatgpt/images/chatgpt/gpt-swhz.png" alt="酷音公众号">
                                    </a>
                                </li>
                            </div>
                        </div>
                    </div>` 
  const gptTopHtml = `<div class="chatgpt-top p-4 p-lg-5" id="chatgpt-top" style="background-image: url('/static/chatgpt/images/chatgpt/gpt-bg0.png');background-repeat: no-repeat;background-size: cover;">
                            <div class="row align-items-center">
                                <div class="col-8 col-lg-6">
                                    <div class="media align-items-center">
                                        <a class="boxsize-48 boxsize-lg-64 d-flex align-items-center justify-content-center rounded-circle overflow-hidden" href="https://www.kupian.tv/" rel="nofollow" rel="nofollow" target="_blank" rel="nofollow">
                                            <img class="w-100 h-100 object-cover" src="http://www.400122.cn/static/chatgpt/images/chatgpt/gpt-logo.jpg" alt="chatGPT">
                                        </a>
                                        <div class="media-body text-white text-ell-1 pl-4">
                                            <div class="font-14 font-lg-16 font-weight-bold text-ell-1">chatGPT在线试用</div>
                                            <p class="font-12 font-lg-14 text-white text-ell-1">新一代对话式人工智能，历史上增长最快的消费者应用程序</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 col-lg-6 text-right">
                                    <a href="https://www.kupian.tv/" rel="nofollow" rel="nofollow" class="btn btn-warning font-12-important font-lg-14-important rounded-pill star-h-32 star-h-lg-40 d-inline-flex align-items-center justify-content-center text-white px-4 px-lg-6" target="_blank" rel="nofollow">立即进入</a>
                                </div>
                            </div>
                        </div>`
  const gptBottomHtml = `<div class="chatgpt-bottom p-8" id="chatgpt-bottom" style="background-image: url('/static/chatgpt/images/chatgpt/gpt-bg1.png');background-repeat: no-repeat;background-size: cover;">
                            <div class="row align-items-center">
                                <div class="col-12 col-lg-6">
                                    <div class="text-white">
                                        <p class="font-20 font-weight-bold star-lh-36">新一代对话式人工智能<br>一个超级内容生产力工具</p>
                                        <p class="font-14 star-lh-24 mt-4">基于OpenAI开放平台，使用最新的CHATGPT数据模型，欢迎前往体验</p>
                                        <div class="d-flex justify-content-lg-start mt-5">
                                            <li class="list-none list-inline d-flex flex-column align-items-center justify-content-center">
                                                <img class="rounded boxsize-112 boxsize-lg-112" src="http://data.kuyin.cn/image/2022/0127/52132e958e37d8f8.jpg" alt="酷音公众号">
                                                <span class="font-12 text-white-600 mt-2">扫码关注公众号</span>
                                            </li>
                                            <li class="list-none list-inline d-flex flex-column align-items-center justify-content-center ml-4 ml-lg-5">
                                                <img class="rounded boxsize-112 boxsize-lg-112" src="http://data.kuyin.cn/image/2022/0127/52132e958e37d8f8.jpg" alt="酷音公众号">
                                                <span class="font-12 text-white-600 mt-2">扫码体验小程序版</span>
                                            </li>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6 text-right d-none d-lg-block">
                                    <div class="">
                                        <img src="http://www.400122.cn/static/chatgpt/images/chatgpt/gpt-right.png" alt="chatGPT">
                                    </div>
                                </div>
                            </div>
                        </div>`

  // 定义需要插入位置的className和对应参数
  const classGpt = [
    {
      classNmae: 'summary',
      html: gptTopHtml,
      htmlId: '#chatgpt-top',
      position: 'before'
    },
    {
      classNmae: 'statement',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    },
    {
      classNmae: 'shopUrl-skin1',
      html: gptRightHtml,
      htmlId: '#chatgpt-rigth',
      position: 'before'
    },
    {
      classNmae: 'askA-skin1',
      html: gptTopHtml,
      htmlId: '#chatgpt-top',
      position: 'before'
    },
    {
      classNmae: 'askA-skin1',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    },
    {
      classNmae: 'askA-skin2',
      html: gptTopHtml,
      htmlId: '#chatgpt-top',
      position: 'before'
    },
    {
      classNmae: 'askA-skin2',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    },
    {
      classNmae: 'newsDetail-skin1',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    },
    {
      classNmae: 'newsDetail-skin2',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    },
    {
      classNmae: 'newsDetail-skin3',
      html: gptBottomHtml,
      htmlId: '#chatgpt-bottom',
      position: 'after'
    }
  ]

  // 遍历插入
  classGpt.map(item => {
    const demoMain = $('.' + item.classNmae)
    if (demoMain.hasClass(item.classNmae)) {
      // 避免重复插入
      if ($(item.htmlId).length === 0) {
        item.position === 'before' ? demoMain.before(item.html) :demoMain.after(item.html);
      }
    }
  })

}

/**
 * 插入样式
 */
function appStyle() {
  const styleContent = `.media {
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: flex-start;
            -moz-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        }
        .text-white{
          color: #fff
        }
        .text-white p{color:#FFF;}
        .media-body {
        -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        }
        .chatgpt-top{
            margin-bottom: 20px;
        }
        .chatgpt-top .row{
            display: flex;
            align-items: center;
        }
        .chatgpt-bottom{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .chatgpt-bottom .row{
            display: flex;
            align-items: center;
            justify-content: baseline;
        }
        .chatgpt-bottom .boxsize-112{
            width: 112px;
            height: 112px;
        }
        .chatgpt-rigth{
            width: 100%;
            margin-bottom: 20px;
            padding: 20px;
        }
        .chatgpt-rigth .title{
            font-size: 14px;
            color: #333;
            text-align: center;
        }
        .list-unstyled .media{
            display: flex;
            padding: 16px 0;
            border-top: 1px solid #f0f0f0 !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
        }
        .list-unstyled .media .media-body{
            flex: 1;
        }
        .list-unstyled .media .boxsize-80{
            width: 80px;
            height: 80px;
        }
        .d-none{
          display:none;
        }
        @media (min-width: 992px){
          .d-lg-none {
            display: none !important;
          }
          .d-lg-inline-block {
            display: inline-block !important;
          }
          .d-lg-block {
            display: block !important;
          }
        }
        `
  if ($('#gptclass').length === 0) {
    $('head').append(`<style id='gptclass'>${styleContent}</style>`);
  }
}

// 关闭
// if(isNewsOrAsk(url)){
//   appStyle()
//   isClass()
// }