<template>
  <view class="background" style="overflow: hidden" >
    <view class="transition">
      <!-- NBA图片过渡界面 -->
      <image v-show="showNBA" src="@/static/transition/nba.png" class="transition_nba"></image>
      <!-- Logo图片过渡界面 -->
      <image v-show="showLogo" src="@/static/transition/logo.png" class="transition_logo"></image>
      <!-- 签名 -->
      <view v-show="showSignature" class="transition_signature">
        <view class="transition_text">体育直播可视化系统</view>
        <text class="transition_text">102201435 龚嘉伟</text>
      </view>
    </view>
    <!-- 内容 -->
    <!-- 如果要显示过渡动画 在下面添加如下部分 v-show="!showNBA && !showLogo && !showSignature"   -->
    <view class="content" :style="{ minHeight: '100vh' }"  v-show="!showNBA && !showLogo && !showSignature" >
      <!-- 顶部Logo部分     -->
      <view class="top_logo">
        <image src="@/static/transition/nba.png" class="top_logo_nba"></image>
        <text class="top_logo_signature">体育直播可视化系统</text>
        <image src="@/static/transition/logo.png" class="top_logo_all_sport"></image>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line1"></image>
      <!-- 篮球比赛部分 -->
      <view class="basketball_match">
        <image src="@/static/content/court/basketball_court.png" class="image"></image>
        
        <!-- 比赛事件显示屏 -->
        <view class="event_screen">
          <text class="event_title">比赛事件</text>
          <view class="event_content">
            <text class="event_text">{{currentEvent}}</text>
          </view>
<!--          &lt;!&ndash; 添加按钮容器 &ndash;&gt;
          <view class="event_buttons">
            <button
              class="event_btn send_btn"
              @click="simulate_the_flow_of_the_competition"
              hover-class="button-hover"
            >模拟比赛流程</button>
            <button
              class="event_btn retry_btn"
              @click="retryConnection"
              hover-class="button-hover"
            >重试</button>
          </view>-->
        </view>

        <!--     湖人队进攻动画部分   -->
        <view class="laker_attack" v-if="is_laker_attack">
          <image class="arrow_laker_attack"  src="@//static/content/court/arrow_back.png"></image>
          <text class="laker_word_area">湖人队进攻</text>
        </view>
        <!--     森林狼队进攻动画部分   -->
        <view class="wolf_attack" v-if="is_wolf_attack">
          <image class="arrow_wolf_attack" src="@/static/content/court/arrow.png"></image>
          <text class="wolf_word_area">森林狼队进攻</text>
        </view>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line2"></image>
    </view>



    <!-- 比分部分 -->
    <view class="score"  >
      <text class="now_time1">剩余时间</text>
      <text class="now_time2">第{{now_class}}节 {{now_minute}}:{{now_seconds}}</text>
      <image class="wolf_score_text" src="@/static/content/score/wole_score_text.png"></image>
      <image class="vs" src="@/static/content/score/vs.png"></image>
      <image class="laker_score_text" src="@/static/content/score/laker_score_text.png"></image>
      <text class="wolf_score">{{wolf_score}}</text>
      <text class="laker_score">{{laker_score}}</text>
    </view>

    <!-- 球队数据部分 -->
    <view class="team_statics" >
      <image class="cut_off_line" src="@/static/content/team_statics/cut_off_line.png"></image>
      <text class="statistics1">各队技术统计</text>
      <text class="statistics2">各队技术统计</text>

      <text class="three_point_wolf">三分球得分    {{three_point_shot_wolf}}</text>
      <text class="three_point_laker">三分球得分    {{three_point_shot_laker}}</text>


      <text class="two_point_wolf">两分球得分    {{two_point_shot_wolf}}</text>
      <text class="two_point_laker">两分球得分    {{two_point_shot_laker}}</text>
      <!--   湖人队得分统计图   -->
      <view class="charts-box-score-wolf">
        <qiun-data-charts
            type="pie"
            :opts="opts_wolf_score"
            :chartData="chartData_wolf_score"
        />
      </view>
      <!--   湖人队得分统计图   -->
      <view class="charts-box-score-laker">
        <qiun-data-charts
            type="pie"
            :opts="opts_laker_score"
            :chartData="chartData_laker_score"
        />


      </view>
      <text class="foul_wolf">犯规数    {{foul_wolf}}</text>
      <text class="block_wolf">盖帽数   {{block_wolf}}</text>
      <text class="rebound_wolf">篮板数    {{rebound_wolf}}</text>
      <text class="steal_wolf">抢断    {{steal_wolf}}</text>
      <!--   森林狼队技术统计图   -->
      <view class="charts-box-tech-wolf">
        <qiun-data-charts
            type="pie"
            :opts="opts_wolf_tech"
            :chartData="chartData_wolf_tech"
        />
      </view>

      <text class="foul_laker">犯规数    {{foul_laker}}</text>
      <text class="block_laker">盖帽数   {{block_laker}}</text>
      <text class="rebound_laker">篮板数    {{rebound_laker}}</text>
      <text class="steal_laker">抢断    {{steal_laker}}</text>
      <!--   湖人队技术统计图   -->
      <view class="charts-box-tech-laker">
        <qiun-data-charts
            type="pie"
            :opts="opts_laker_tech"
            :chartData="chartData_laker_tech"
        />
      </view>
    </view>
    <!-- 过渡线 -->
    <image src="@/static/content/line/line.png" class="line3"  v-show="!showNBA && !showLogo && !showSignature" ></image>












    <!-- 球员数据部分 -->
    <view class="human_statics"   >
      <text class="tech">双方球员技术统计</text>
      <image class="laker_icon" src="@/static/content/players/laker.png"></image>
      <!-- 湖人队数据表格 -->
      <view class="player_table laker_table">
        <view class="table_header">
          <text class="header_cell">球员</text>
          <text class="header_cell">位置</text>
          <text class="header_cell">时间</text>
          <text class="header_cell">投篮</text>
          <text class="header_cell">三分</text>
          <text class="header_cell">罚球</text>
          <text class="header_cell">进攻</text>
          <text class="header_cell">防守</text>
          <text class="header_cell">总计</text>
          <text class="header_cell">助攻</text>
          <text class="header_cell">犯规</text>
          <text class="header_cell">抢断</text>
          <text class="header_cell">失误</text>
          <text class="header_cell">盖帽</text>
          <text class="header_cell">得分</text>
        </view>
        <view class="table_content">
          <view class="table_row" v-for="(player, index) in lakerPlayers" :key="index">
            <text class="cell">{{player.name}}</text>
            <text class="cell">{{player.position}}</text>
            <text class="cell">{{player.time}}</text>
            <text class="cell">{{player.fieldGoals}}</text>
            <text class="cell">{{player.threePoints}}</text>
            <text class="cell">{{player.freeThrows}}</text>
            <text class="cell">{{player.offenseRebounds}}</text>
            <text class="cell">{{player.defenseRebounds}}</text>
            <text class="cell">{{player.totalRebounds}}</text>
            <text class="cell">{{player.assists}}</text>
            <text class="cell">{{player.fouls}}</text>
            <text class="cell">{{player.steals}}</text>
            <text class="cell">{{player.turnovers}}</text>
            <text class="cell">{{player.blocks}}</text>
            <text class="cell">{{player.points}}</text>
          </view>
        </view>
      </view>




      <image class="wolf_icon" src="@/static/content/players/wolf.png"></image>
      <!-- 森林狼队数据表格 -->
      <view class="player_table wolf_table">
        <view class="table_header">
          <text class="header_cell">球员</text>
          <text class="header_cell">位置</text>
          <text class="header_cell">时间</text>
          <text class="header_cell">投篮</text>
          <text class="header_cell">三分</text>
          <text class="header_cell">罚球</text>
          <text class="header_cell">进攻</text>
          <text class="header_cell">防守</text>
          <text class="header_cell">总计</text>
          <text class="header_cell">助攻</text>
          <text class="header_cell">犯规</text>
          <text class="header_cell">抢断</text>
          <text class="header_cell">失误</text>
          <text class="header_cell">盖帽</text>
          <text class="header_cell">得分</text>
        </view>
        <view class="table_content">
          <view class="table_row" v-for="(player, index) in wolfPlayers" :key="index">
            <text class="cell">{{player.name}}</text>
            <text class="cell">{{player.position}}</text>
            <text class="cell">{{player.time}}</text>
            <text class="cell">{{player.fieldGoals}}</text>
            <text class="cell">{{player.threePoints}}</text>
            <text class="cell">{{player.freeThrows}}</text>
            <text class="cell">{{player.offenseRebounds}}</text>
            <text class="cell">{{player.defenseRebounds}}</text>
            <text class="cell">{{player.totalRebounds}}</text>
            <text class="cell">{{player.assists}}</text>
            <text class="cell">{{player.fouls}}</text>
            <text class="cell">{{player.steals}}</text>
            <text class="cell">{{player.turnovers}}</text>
            <text class="cell">{{player.blocks}}</text>
            <text class="cell">{{player.points}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      chartData_wolf_score: {},
      chartData_wolf_tech: {},
      chartData_laker_score: {},
      chartData_laker_tech: {},
      opts_laker_score: {
        color: ["#a983d5", "#1d55cd"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          },

        }
      },
      opts_wolf_score: {
        color: ["#a983d5", "#1d55cd"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      opts_wolf_tech: {
        color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        width: 200,
        height: 200,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      opts_laker_tech: {
        color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        width: 200,
        height: 200,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      nbaDuration: 2000, // NBA 图片显示时长（毫秒）
      logoDuration: 2000, // Logo 图片显示时长（毫秒）
      signatureDuration: 2000, // 签名显示时长（毫秒）
      is_wolf_attack: false,
      is_laker_attack: false,
      showNBA: true, // 是否显示NBA图片  后期要改true
      showLogo: false, // 是否显示Logo图片
      showSignature: false, // 是否显示签名
      left_time: "",
      now_class: "4", //当前节数
      now_minute: "8", //当前分钟
      now_seconds: "23", //当前秒数
      laker_score: 34, // 湖人队得分
      wolf_score: 53, // 森林狼队得分
      three_point_shot_laker: 12, // 湖人队三分球得分
      two_point_shot_laker: 21, // 湖人队2分球得分


      three_point_shot_wolf: 38, // 森林狼队三分球得分
      two_point_shot_wolf: 20, // 森林狼队2分球得分
      foul_laker: 1, // 湖人队犯规数
      block_laker: 2, // 湖人队盖帽数
      rebound_laker: 3, // 湖人队篮板数
      steal_laker: 4, // 湖人队抢断数


      foul_wolf: 5, // 森林狼队犯规数
      block_wolf: 6, // 森林狼队盖帽数
      rebound_wolf: 7, // 森林狼队篮板数
      steal_wolf: 8, // 森林狼队抢断数

      lakerPlayers: [
        {
          name: '奥斯汀·里维斯',
          position: '后卫',
          time: '36',
          fieldGoals: '6-14',
          threePoints: '0-5',
          freeThrows: '0-1',
          offenseRebounds: '4',
          defenseRebounds: '5',
          totalRebounds: '9',
          assists: '4',
          fouls: '4',
          steals: '1',
          turnovers: '0',
          blocks: '1',
          points: '12'
        },
        {
          name: '德安杰洛·拉塞尔',
          position: '后卫',
          time: '34',
          fieldGoals: '4-12',
          threePoints: '1-7',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '1',
          totalRebounds: '1',
          assists: '5',
          fouls: '2',
          steals: '2',
          turnovers: '1',
          blocks: '0',
          points: '9'
        },
        {
          name: '勒布朗·詹姆斯',
          position: '前锋',
          time: '35',
          fieldGoals: '7-16',
          threePoints: '1-4',
          freeThrows: '1-1',
          offenseRebounds: '0',
          defenseRebounds: '5',
          totalRebounds: '5',
          assists: '4',
          fouls: '3',
          steals: '0',
          turnovers: '2',
          blocks: '2',
          points: '16'
        },
        {
          name: '八村塁',
          position: '前锋',
          time: '35',
          fieldGoals: '7-14',
          threePoints: '1-4',
          freeThrows: '3-4',
          offenseRebounds: '3',
          defenseRebounds: '2',
          totalRebounds: '5',
          assists: '1',
          fouls: '2',
          steals: '2',
          turnovers: '0',
          blocks: '1',
          points: '18'
        },
        {
          name: '安东尼·戴维斯',
          position: '中锋',
          time: '38',
          fieldGoals: '11-23',
          threePoints: '1-3',
          freeThrows: '13-15',
          offenseRebounds: '3',
          defenseRebounds: '13',
          totalRebounds: '16',
          assists: '4',
          fouls: '1',
          steals: '1',
          turnovers: '1',
          blocks: '3',
          points: '36'
        },
        {
          name: '盖布·文森特',
          position: '后卫',
          time: '17',
          fieldGoals: '1-2',
          threePoints: '0-0',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '2',
          totalRebounds: '2',
          assists: '2',
          fouls: '1',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '2'
        },
        {
          name: '道尔顿·克里克特',
          position: '后卫',
          time: '16',
          fieldGoals: '2-4',
          threePoints: '1-3',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '1',
          totalRebounds: '1',
          assists: '2',
          fouls: '1',
          steals: '1',
          turnovers: '1',
          blocks: '0',
          points: '5'
        },
        {
          name: '贾克森·海耶斯',
          position: '中锋',
          time: '15',
          fieldGoals: '4-5',
          threePoints: '0-0',
          freeThrows: '2-2',
          offenseRebounds: '3',
          defenseRebounds: '1',
          totalRebounds: '4',
          assists: '0',
          fouls: '3',
          steals: '0',
          turnovers: '0',
          blocks: '1',
          points: '10'
        },
        {
          name: '马克斯·克里斯蒂',
          position: '前锋',
          time: '11',
          fieldGoals: '0-3',
          threePoints: '0-3',
          freeThrows: '2-2',
          offenseRebounds: '1',
          defenseRebounds: '1',
          totalRebounds: '2',
          assists: '0',
          fouls: '5',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '2'
        },
        {
          name: '布朗尼·詹姆斯',
          position: '前锋',
          time: '3',
          fieldGoals: '0-2',
          threePoints: '0-1',
          freeThrows: '0-0',
          offenseRebounds: '1',
          defenseRebounds: '0',
          totalRebounds: '1',
          assists: '0',
          fouls: '0',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '0'
        }
      ],
      wolfPlayers: [
        {
          name: '安东尼·爱德华兹',
          position: '后卫',
          time: '41',
          fieldGoals: '10-25',
          threePoints: '5-13',
          freeThrows: '2-3',
          offenseRebounds: '0',
          defenseRebounds: '6',
          totalRebounds: '6',
          assists: '3',
          fouls: '3',
          steals: '0',
          turnovers: '4',
          blocks: '0',
          points: '27'
        },
        {
          name: '迈克·康利',
          position: '后卫',
          time: '20',
          fieldGoals: '1-7',
          threePoints: '0-5',
          freeThrows: '3-3',
          offenseRebounds: '2',
          defenseRebounds: '2',
          totalRebounds: '4',
          assists: '2',
          fouls: '1',
          steals: '1',
          turnovers: '3',
          blocks: '0',
          points: '5'
        },
        {
          name: '朱利叶斯·兰德尔',
          position: '前锋',
          time: '34',
          fieldGoals: '5-10',
          threePoints: '1-3',
          freeThrows: '5-7',
          offenseRebounds: '3',
          defenseRebounds: '6',
          totalRebounds: '9',
          assists: '4',
          fouls: '3',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '16'
        },
        {
          name: '杰登·麦克丹尼尔斯',
          position: '前锋',
          time: '16',
          fieldGoals: '3-8',
          threePoints: '0-3',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '2',
          totalRebounds: '2',
          assists: '1',
          fouls: '5',
          steals: '1',
          turnovers: '1',
          blocks: '0',
          points: '6'
        },
        {
          name: '戈贝尔',
          position: '中锋',
          time: '12',
          fieldGoals: '1-3',
          threePoints: '0-0',
          freeThrows: '1-2',
          offenseRebounds: '1',
          defenseRebounds: '4',
          totalRebounds: '5',
          assists: '0',
          fouls: '1',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '3'
        },
        {
          name: '拿斯列特',
          position: '前锋',
          time: '10',
          fieldGoals: '1-1',
          threePoints: '1-1',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '3',
          totalRebounds: '3',
          assists: '0',
          fouls: '1',
          steals: '0',
          turnovers: '1',
          blocks: '0',
          points: '3'
        },
        {
          name: '迪温琴佐',
          position: '后卫',
          time: '8',
          fieldGoals: '1-3',
          threePoints: '0-1',
          freeThrows: '0-2',
          offenseRebounds: '1',
          defenseRebounds: '0',
          totalRebounds: '1',
          assists: '3',
          fouls: '1',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '2'
        },
        {
          name: '尼基尔-亚历山大-沃克',
          position: '后卫',
          time: '6',
          fieldGoals: '1-1',
          threePoints: '1-1',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '0',
          totalRebounds: '0',
          assists: '0',
          fouls: '0',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '3'
        }
      ],
      currentEvent: "欢迎进入体育直播可视化系统！", // 当前显示的比赛事件
    };
  },
  onReady() {
    this.getServerData_wolf_score();
    this.getServerData_laker_score();
    this.getServerData_laker_tech();
    this.getServerData_wolf_tech();
    uni.connectSocket({
      url: 'ws://localhost:9090/exercise',
      success: () => {
        console.log('WebSocket连接成功');
      },
      fail: (err) => {
        console.error('WebSocket连接失败', err);
      }});
    uni.onSocketOpen(() => {
      console.log('WebSocket连接已打开');
      uni.sendSocketMessage({
        data: '可以发送消息！！！',
      })
    });
    uni.onSocketMessage((res) => {
      console.log('收到服务器消息：', res.data);

      // 尝试解析 JSON 数据
      try {
        const data = JSON.parse(res.data);
        console.log('解析后的数据：', data); // 输出解析后的数据

        this.currentEvent = data.action;
        this.now_minute = data.leftMinute;
        this.now_seconds = data.leftSecond;
        this.laker_score = data.lakerScore;
        this.wolf_score = data.wolfScore;
        this.now_class=data.classNumber;

        // 输出每个字段的值
        console.log('当前事件:', this.currentEvent);
        console.log('剩余分钟:', this.now_minute);
        console.log('剩余秒数:', this.now_seconds);
        console.log('湖人得分:', this.laker_score);
        console.log('森林狼得分:', this.wolf_score);
      } catch (e) {
        console.error('解析数据时出错:', e);
      }
    });
    uni.onSocketError((err) => {
      console.error('WebSocket连接错误', err);
    });
    uni.onSocketClose(() => {
      console.log('WebSocket连接已关闭');
    });
  },
  onLoad() {
    this.transition();
  },

  methods: {
    transition() {
      // 显示NBA图片
      setTimeout(() => {
        this.showNBA = false; // 隐藏NBA图片
        this.showLogo = true; // 显示Logo图片
        // 显示Logo图片后隐藏并显示签名
        setTimeout(() => {
          this.showLogo = false; // 隐藏Logo图片
          this.showSignature = true; // 显示签名
          // 签名显示后隐藏并显示内容
          setTimeout(() => {
            this.showSignature = false; // 隐藏签名
          }, this.signatureDuration);
        }, this.logoDuration);
      }, this.nbaDuration);
    },
    getServerData_wolf_score() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "三分球", "value": this.three_point_shot_wolf},
                {"name": "两分球", "value": this.two_point_shot_wolf}]
            }
          ]
        };
        this.chartData_wolf_score = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_laker_score() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "三分球", "value": this.three_point_shot_laker},
                {"name": "两分球", "value": this.two_point_shot_laker}]
            }
          ]
        };
        this.chartData_laker_score = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_wolf_tech() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          series: [
            {
              data: [
                {"name": "犯规数", "value": this.foul_wolf},
                {"name": "盖帽数", "value": this.block_wolf},
                {"name": "篮板数", "value": this.rebound_wolf},
                {"name": "抢断", "value": this.steal_wolf}
              ]
            }
          ]
        };
        this.chartData_wolf_tech = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_laker_tech() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          series: [
            {
              data: [
                {"name": "犯规数", "value": this.foul_laker},
                {"name": "盖帽数", "value": this.block_laker},
                {"name": "篮板数", "value": this.rebound_laker},
                {"name": "抢断", "value": this.steal_laker}
              ]
            }
          ]
        };
        this.chartData_laker_tech = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    simulate_the_flow_of_the_competition(){
      uni.sendSocketMessage({
        data: '可以开始发送消息'
      })
    },
    retryConnection(){
      uni.closeSocket();//关闭所有socket连接
      this.connectSocket();//重新连接websocket
    }
  }

};
</script>
<style>
@import '@/static/css/index.scss';
</style>