<script setup lang="ts" name="DataModel">
import { computed, onMounted } from "vue";
import moment from "moment";
import { getWeekday } from "@/until/index";

import saishiyuce from "@/assets/images/ic_saishiyuce.png";
import niuniufenxi from "@/assets/images/ic_niuniufenxi.png";
import haiwaiyuce from "@/assets/images/ic_haiwaiyuce.png";

import saishiyuce_bg from "@/assets/images/bg_saishiyuce.png";
import niuniufenxi_bg from "@/assets/images/bg_niuniufenxi.png";
import haiwaiyuce_bg from "@/assets/images/bg_haiwaiyuce.png";
import ic_lock from "@/assets/images/ic_lock.png";
import ic_mingzhong from "@/assets/images/ic_mingzhong.png";

interface DataModelProps {
  yiqiu_id: string,
  game_predict_list: any;
  nnjq_data_list: any;
  user_info: any;
  hwyc_predict_list: any;
  ssyc_detail: any;
  nnjq_detail: any;
  hwyc_detail: any;
  is_look: any;
}

// $props
const props = withDefaults(defineProps<DataModelProps>(), {});
// $props

// $data
// $data

// $computed
const ssyc_hit = computed(() => {
  const source = props.ssyc_detail;
  if (!source|| moment().isBefore(source?.match_time)) return false;
  if (
    source?.predict_items?.is_hit ||
    source?.ailuo_items?.is_hit ||
    source?.balls_items?.is_hit
  ) {
    return true;
  } else {
    return false;
  }
});

const nnjq_hit = computed(() => {
  const source = props.nnjq_detail;
  if (!source?.score || moment().isBefore(source?.match_time) || ![4, 10, 12].includes(source?.status)) return false;
  try {
    const score = JSON.parse(source.score);
    const scoreTxt = score.join(":");
    const allScore = score?.reduce((acc: number, num: number) => {
      acc += num;
      return acc;
    }, 0);
    const scoreResult = source?.prediction_7202?.includes(scoreTxt);
    if (scoreResult) return scoreResult;
    const ballResult = source?.prediction_7203?.some((item: any) =>
      item.includes(allScore)
    );
    if (ballResult) return ballResult;
    source?.prediction_7203?.forEach((item: any) => {
      if (item === "胜" && score[0] > score[1]) {
        return true;
      } else if (item === "平" && score[0] == score[1]) {
        return true;
      } else if (item === "负" && score[0] < score[1]) {
        return true;
      }
    });
  } catch (error) {
    console.log("nnjq_hit ===== err", error);
    return false;
  }
});

const hwyc_hit = computed(() => {
  const source = props.hwyc_detail;
  if (!source?.score || moment().isBefore(source?.match_time) || ![4, 10, 12].includes(source?.status)) return false;
  try {
    const score = JSON.parse(source.score);
    if (
      score[0] > score[1] &&
      source?.macao_prediction?.p === source?.host_name
    ) {
      return true;
    } else if (
      score[0] < score[1] &&
      source?.macao_prediction?.p === source?.away_name
    ) {
      return true;
    }
    if (
      source[0] == source?.oversea_info_0?.predict_result?.home &&
      source[0] == source?.oversea_info_0?.predict_result?.guest
    ) {
      return true;
    }
    if (
      source[0] == source?.predictz_info?.predict_result?.home &&
      source[0] == source?.predictz_info?.predict_result?.guest
    ) {
      return true;
    }
    return false;
  } catch (error) {
    console.log("hwyc_hit ===== err", error);
    return false;
  }
});
// $computed

// $watch
// $watch

// $methods
const link_to = (path: string) => {
  if (!path) return;
  // window.location.replace(path);
  localStorage.setItem('propsal_back', 'true');
  // 创建一个 <a> 标签并模拟点击
  let link = document.createElement('a');
  link.href = path;
  link.click();
}
// $methods

// $lifecycle
onMounted(() => {});
// $lifecycle
</script>

<template>
  <div class="data-model-component">
    <!-- 赛事预测 -->
    <section class="model-item">
      <header class="info-conent acce-render">
        <div
          :style="`background-image: url(${saishiyuce});`"
          class="logo"
        ></div>
        <div class="message">
          <div class="main">
            <span class="title">赛事预测</span>
            <span v-if="game_predict_list?.predict_hit_count" class="small-tag">近期红{{ game_predict_list?.predict_hit_count }}场</span>
            <span v-else class="small-tag">近期连红</span>
            <span v-if="!is_look.zq_ssyc" class="tip"
              >{{ 1500 + Math.ceil(Math.random() * 10) }}人已开通</span
            >
          </div>
          <div class="intro">海量数据分析，唯一结合多家计算法</div>
        </div>
      </header>
      <div
        v-if="is_look.zq_ssyc && ssyc_detail?.balls_items && ssyc_detail?.ailuo_items && ssyc_detail?.predict_items"
        class="data-content acce-render"
      >
        <header class="data-title">
          <div class="left">
            <span>{{ getWeekday(ssyc_detail?.match_time) }}</span>
            <span v-if="ssyc_detail?.is_jingcai">{{ ssyc_detail?.sporttery_number }}</span>
            <span style="margin: 0 4px">{{
              moment(ssyc_detail?.match_time).format("MM/DD HH:mm")
            }}</span
            ><span>开赛</span>
          </div>
          <div class="right">
            <div class="tit-text">{{ ssyc_detail?.home_name }}</div>
            <div class="tit-text">VS</div>
            <div class="tit-text">{{ ssyc_detail?.away_name }}</div>
          </div>
        </header>
        <main class="data-table">
          <div class="data-table-row header">
            <div class="data-table-col">马斯克预测</div>
            <div class="data-table-col">爱因预测</div>
            <div class="data-table-col">牛顿进球</div>
          </div>
          <div class="data-table-row">
            <div
              v-if="ssyc_detail?.predict_items?.values"
              class="data-table-col"
            >
              {{ ssyc_detail?.predict_items?.values.join("") }}(<span
                style="color: #227aff"
                >{{ ssyc_detail?.predict_items?.rate }}可能</span
              >)
            </div>
            <div v-if="ssyc_detail?.ailuo_items?.values" class="data-table-col">
              {{ ssyc_detail?.ailuo_items?.values.join("") }}
            </div>
            <div v-if="ssyc_detail?.balls_items?.values" class="data-table-col">
              {{ ssyc_detail?.balls_items?.values.join("、") }}球
            </div>
          </div>
        </main>
        <div class="link-tag" @click="link_to('/model/predict?zq&from_vue')">
          <span>查看其他场次</span>
          <svg-icon className="right-icon" iconName="in" />
        </div>
        <img v-if="ssyc_hit" class="flag" :src="ic_mingzhong" alt="link" />
      </div>
      <!-- !is_look.zq_ssyc && ssyc_detail?.balls_items && ssyc_detail?.ailuo_items && ssyc_detail?.predict_items -->
      <div
        v-if="!is_look.zq_ssyc"
        class="desc-content acce-render"
      >
        <div
          v-lazy="{ style: `backgroundImage: url(${saishiyuce_bg});` }"
          class="desc-box"
          @click="link_to('/model/predict?zq&from_vue')"
        >
          通过等级数据分析，结合多家机构计算方案，依托海量的联赛数据，建立回归分析组合序列，得出稳健型赛事赛果，内容包含赛事胜平负和进球数推荐。
        </div>
        <div
          class="tool"
          @click="link_to(user_info?.user_id
              ? '/user/vip_zq?zq&vip_name=ZQ_SSYC&from=/game'
              : '/login?return_url=/game/predict?yiqiuid=' + yiqiu_id)"
        >
          <img class="lock" :src="ic_lock" alt="lock" />
          <span>已对本场做出预测，开通查看</span>
          <span class="tag">98/月</span>
        </div>
        <img v-if="ssyc_hit" class="hit-icon" :src="ic_mingzhong" alt="link" />
      </div>
      <div v-if="is_look.zq_ssyc && (!ssyc_detail?.balls_items || !ssyc_detail?.ailuo_items || !ssyc_detail?.predict_items)" class="tip-content acce-render">
        <div class="content-box">
          <p class="desc">暂未对本场比赛进行预测</p>
          <div class="link-box" v-on:click="link_to('/model/predict?zq&from_vue')">
            <span>查看其他场次</span>
            <svg-icon className="right-icon" iconName="in" />
          </div>
        </div>
      </div>
    </section>

    <!-- 牛牛分析 -->
    <section class="model-item">
      <header class="info-conent acce-render">
        <div
          :style="`background-image: url(${niuniufenxi});`"
          class="logo"
        ></div>
        <div class="message">
          <div class="main">
            <span class="title">牛牛分析</span>
            <span class="small-tag">连续场次红</span>
            <span v-if="!is_look.zq_nnjq" class="tip"
              >{{ 1510 + Math.ceil(Math.random() * 10) }}人已开通</span
            >
          </div>
          <div class="intro">通过大趋势和赛果分布结合，筛选出来的比赛</div>
        </div>
      </header>
      <div v-if="is_look.zq_nnjq && nnjq_detail && nnjq_data_list && nnjq_data_list?.matchs?.length" class="data-content acce-render">
        <header class="data-title">
          <div class="left">
            <span>{{ getWeekday(nnjq_detail?.match_time) }}</span>
            <span v-if="nnjq_detail?.is_jingcai">{{ nnjq_detail?.sporttery_number }}</span>
            <span style="margin: 0 4px">{{
              moment(nnjq_detail?.match_time).format("MM/DD HH:mm")
            }}</span
            ><span>开赛</span>
          </div>
          <div class="right">
            <div class="tit-text">{{ nnjq_detail?.host_name }}</div>
            <div class="tit-text">VS</div>
            <div class="tit-text">{{ nnjq_detail?.away_name }}</div>
          </div>
        </header>
        <main class="data-table">
          <div class="data-table-row header">
            <div class="data-table-col">胜平负</div>
            <div class="data-table-col">比分</div>
            <div class="data-table-col">总进球数</div>
          </div>
          <div class="data-table-row">
            <div class="data-table-col">
              {{ nnjq_detail?.prediction_7206?.join("、") }}
            </div>
            <div class="data-table-col">
              {{ nnjq_detail?.prediction_7202?.join("、") }}
            </div>
            <div class="data-table-col">
              {{ nnjq_detail?.prediction_7203?.join("、") }}
            </div>
          </div>
        </main>
        <div class="link-tag" @click="link_to('/model/jie_qiu?zq&from_vue')">
          <span>查看其他场次</span>
          <svg-icon className="right-icon" iconName="in" />
        </div>
        <img v-if="nnjq_hit" class="flag" :src="ic_mingzhong" alt="link" />
      </div>
      <!-- !is_look.zq_nnjq && nnjq_detail && nnjq_data_list && nnjq_data_list?.matchs && nnjq_data_list?.matchs.length > 0 -->
      <div v-if="!is_look.zq_nnjq" class="desc-content acce-render">
        <div
          :style="`background-image: url(${niuniufenxi_bg});`"
          class="desc-box"
          @click="link_to('/model/jie_qiu?zq&from_vue')"
        >
          结合主客队双方的实力、攻防系数、进球/失球态势、历史对阵、近期成绩等多重数据进行分析，给出进球数、比分及胜平负方面的辅助分析。
      </div>
        <div
          class="tool"
          @click="link_to(user_info?.user_id
              ? '/user/vip_zq?zq&vip_name=ZQ_NNJQ&from=/game'
              : '/login?return_url=/game/predict?yiqiuid=' + yiqiu_id)"
        >
          <img class="lock" :src="ic_lock" alt="lock" />
          <span>已对本场做出预测，开通查看</span>
          <span class="tag">168/月</span>
        </div>
        <img v-if="nnjq_hit" class="hit-icon" :src="ic_mingzhong" alt="link" />
      </div>
      <div v-if="is_look.zq_nnjq && (!nnjq_detail || !nnjq_data_list || !nnjq_data_list?.matchs?.length)" class="tip-content acce-render">
        <div class="content-box">
          <p class="desc">暂未对本场比赛进行预测</p>
          <div class="link-box" @click="link_to('/model/jie_qiu?zq&from_vue')">
            <span>查看其他场次</span>
            <svg-icon className="right-icon" iconName="in" />
          </div>
        </div>
      </div>
    </section>

    <!-- 海外预测 -->
    <section class="model-item acce-render">
      <header class="info-conent acce-render">
        <div
          :style="`background-image: url(${haiwaiyuce});`"
          class="logo"
        ></div>
        <div class="message">
          <div class="main">
            <span class="title">海外预测</span>
            <span class="small-tag">比分正确率高</span>
            <span v-if="!is_look.zq_hwyc" class="tip"
              >{{ 1420 + Math.ceil(Math.random() * 10) }}人已开通</span
            >
          </div>
          <div class="intro">合作机构海量分析，稳定型推荐</div>
        </div>
      </header>
      <div v-if="is_look.zq_hwyc && hwyc_detail && hwyc_detail?.predictz_info && hwyc_predict_list?.matchs?.length" class="data-content acce-render">
        <header class="data-title">
          <div class="left">
            <span>{{ getWeekday(hwyc_detail?.match_time) }}</span>
            <span v-if="hwyc_detail?.is_jingcai">{{ hwyc_detail?.sporttery_number }}</span>
            <span style="margin: 0 4px">{{
              moment(hwyc_detail?.match_time).format("MM/DD HH:mm")
            }}</span
            ><span>开赛</span>
          </div>
          <div class="right">
            <div class="tit-text">{{ hwyc_detail?.host_name }}</div>
            <div class="tit-text">VS</div>
            <div class="tit-text">{{ hwyc_detail?.away_name }}</div>
          </div>
        </header>
        <main class="data-table">
          <div class="data-table-row header">
            <div class="data-table-col">澳门</div>
            <div class="data-table-col">欧洲</div>
            <div class="data-table-col">美国</div>
          </div>
          <div class="data-table-row">
            <div v-if="hwyc_detail?.macao_prediction" class="data-table-col">
              {{
                hwyc_detail?.macao_prediction?.p?.length > 4
                  ? hwyc_detail?.macao_prediction?.p.substr(0, 4)
                  : hwyc_detail?.macao_prediction?.p
              }}
            </div>
            <div v-if="hwyc_detail?.predictz_info" class="data-table-col">
              {{
                hwyc_detail?.predictz_info?.predict_result?.result == "Home"
                  ? "主胜"
                  : hwyc_detail?.predictz_info?.predict_result?.result == "Away"
                  ? "客胜"
                  : "平"
              }}<br />{{ hwyc_detail?.predictz_info?.predict_result?.home }} -
              {{ hwyc_detail?.predictz_info?.predict_result?.guest }}
            </div>
            <div v-if="hwyc_detail?.oversea_info_0" class="data-table-col">
              {{
                hwyc_detail?.oversea_info_0?.predict_result?.home >
                hwyc_detail?.oversea_info_0?.predict_result?.guest
                  ? "主胜"
                  : hwyc_detail?.oversea_info_0?.predict_result?.guest >
                    hwyc_detail?.oversea_info_0?.predict_result?.home
                  ? "客胜"
                  : "平"
              }}<br />{{ hwyc_detail?.oversea_info_0?.predict_result?.home }} -
              {{ hwyc_detail?.oversea_info_0?.predict_result?.guest }}
            </div>
          </div>
        </main>
        <div class="link-tag" @click="link_to('/model/hwyc?zq&from_vue')">
          <span>查看其他场次</span>
          <svg-icon className="right-icon" iconName="in" />
        </div>
        <img v-if="hwyc_hit" class="flag" :src="ic_mingzhong" alt="link" />
      </div>
      <!-- !is_look.zq_hwyc && hwyc_detail && hwyc_detail?.predictz_info && hwyc_predict_list && hwyc_predict_list?.matchs && hwyc_predict_list?.matchs.length > 0 -->
      <div v-if="!is_look.zq_hwyc" class="desc-content acce-render">
        <div
          :style="`background-image: url(${haiwaiyuce_bg});`"
          class="desc-box"
          @click="link_to('/model/hwyc?zq&from_vue')"
        >
          专供海外资讯站情报专家观点，战局分布型足球赛事分析，根据现有统计对阵冷热方案，分析指数异向波动及调整。分析以胜平负为主，比分为辅。
        </div>
        <div
          class="tool"
          @click="link_to(user_info?.user_id
              ? '/user/vip_zq?zq&vip_name=ZQ_HWYC&from=/game'
              : '/login?return_url=/game/predict?yiqiuid=' + yiqiu_id)"
        >
          <img class="lock" :src="ic_lock" alt="lock" />
          <span>已对本场做出预测，开通查看</span>
          <span class="tag">88/月</span>
        </div>
        <img v-if="hwyc_hit" class="hit-icon" :src="ic_mingzhong" alt="link" />
      </div>
      <div v-if="is_look.zq_hwyc && (!hwyc_detail || !hwyc_detail?.predictz_info || !hwyc_predict_list?.matchs?.length)" class="tip-content acce-render">
        <div class="content-box">
          <p class="desc">暂未对本场比赛进行预测</p>
          <div class="link-box" @click="link_to('/model/hwyc?zq&from_vue')">
            <span>查看其他场次</span>
            <svg-icon className="right-icon" iconName="in" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.data-model-component {
  background-color: #f6f6f6;

  .model-item {
    position: relative;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;

    .info-conent {
      display: flex;
      align-items: center;

      .logo {
        width: 28px;
        height: 28px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        border-radius: 50%;
      }
    }

    .message {
      flex: 1;
      padding-left: 10px;

      .title {
        font-size: 14px;
        margin-right: 8px;
      }

      .small-tag {
        padding: 0 8px;
        color: #fc4644;
        font-size: 12px;
        border: 1px solid #fc4644;
        border-radius: 12px;
      }
      .tip {
        font-size: 12px;
        color: #ccc;
        float: right;
      }
      .intro {
        font-size: 12px;
        color: #ccc;
      }
    }

    .desc-content {
      position: relative;
      padding-top: 10px;
      font-size: 12px;

      .desc-box {
        padding: 10px 14px;
        height: 120px;
        color: #fff;
        border-radius: 8px;

        background-size: contain;
        background-repeat: no-repeat;

        &:nth-child(1) {
          background-color: #55393e;
        }

        &:nth-child(2) {
          background-color: #2c294b;
        }

        &:nth-child(3) {
          background-color: #3d2949;
        }
      }

      .tool {
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 72%;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background-color: #ac9fa1;

        .tag {
          margin: 0 4px;
          color: #482a32;
          border-radius: 9px;
          padding: 0 6px;
          background-color: #fff6d7;
        }

        .lock {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }

      .tool::before {
        content: "";
        position: absolute;
        bottom: 0px; /* 将伪元素定位到顶部 */
        left: -5px;
        right: -5px;
        height: 80%;
        z-index: -1;
        background-color: #ac9fa1;
        clip-path: polygon(
          2% 0%,
          98% 0%,
          100% 100%,
          0% 100%
        ); /* 使用clip-path实现梯形 */
      }
    }

    .data-content {
      position: relative;
      padding-top: 10px;
      font-size: 12px;

      .data-title {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .left {
        color: #666666;
        margin-right: 12px;
      }

      .right {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }

      .tit-text {
        font-size: 14px;
        font-weight: 500;
      }

      .data-table-row {
        display: flex;
        gap: 1px;
        text-align: center;
        background-color: #fff;

        .data-table-col {
          flex: 1;
          padding: 8px;

          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .data-table-row.header {
        color: #777777;
      }

      .data-table-row:not(.header) .data-table-col {
        background-color: #fff3db;
      }

      .link-tag {
        padding-top: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        color: #aaaaaa;
      }

      .flag {
        position: absolute;
        width: 52px;
        height: 52px;
        right: 10px;
        bottom: 5px;
      }
    }

    .hit-icon {
      position: absolute;
      width: 52px;
      height: 52px;
      right: 10px;
      bottom: 5px;
    }

    .tip-content {
      position: relative;
      padding-top: 10px;
      font-size: 12px;

      .content-box {
        padding: 10px 14px;
        height: 120px;
        color: #fff;
        border-radius: 8px;
        background-color: #f5f5f5;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .desc {
          text-align: center;
          color: #aaaaaa;
        }

        .link-box {
          width: 120px;
          display: flex;
          padding-left: 4px;
          height: 21px;
          line-height: 21px;
          align-items: center;
          justify-content: center;
          background-color: #fff3d0;
          border-radius: 10px;

          color: #424242;
          margin: 12px;
        }
      }
    }
  }

  .right-icon {
    width: 14px;
    height: 14px;
    margin-left: 2px;
  }
}
</style>