<template>
  <div class="app-container">
    <div class="title">近期直播</div>
    <div class="live-container">
      <div class="live-card" v-for="live in displayLives" :key="live.liveId">
        <!-- 直播状态 -->
        <div class="status" :class="getStatusClass(live.status)">
          {{ getStatusText(live.status) }}
        </div>
        <!-- 直播信息 -->
        <div class="content">
          <img :src="live.liveImgUrl" alt="直播封面" class="cover-image" />
          <div class="info">
            <h3 class="live-title">{{ live.liveName }}</h3>
            <p class="time">开播时间: {{ live.startTime }}</p>
          </div>
        </div>

        <!-- 直播数据 -->
        <div class="stats">
          <div class="stat-item">
            <p class="label">直播间浏览量</p>
            <p class="value">{{ live.pageViews }}</p>
          </div>
          <div class="stat-item">
            <p class="label">直播间访客数</p>
            <p class="value">{{ live.uniqueVisitors }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 直播趋势统计 -->
    <div class="trend-section">
      <div class="trend-header">
        <h3>直播趋势</h3>
        <div class="filter-container">
        <!-- 时间范围选择（下拉框） -->
          <span class="filter-label">时间筛选：</span>
          <el-select v-model="selectedTimeRange" placeholder="选择时间范围" @change="changeTimeRange" style="width: 180px">
            <el-option label="自然天" value="day"></el-option>
            <el-option label="自然周" value="week"></el-option>
            <el-option label="自然月" value="month"></el-option>
          </el-select>

          <!-- 日期选择器 -->
          <!-- 选择日期 -->
          <el-date-picker
            ref="datePickerRef"
            v-model="selectedDate"
            :type="datePickerType"
            :format="selectedTimeRange === 'week' ? weekRange : dateFormat"
            :value-format="valueFormat"
            placeholder="选择日期"
            style="width: 280px"
            @change="changeDate"
            @blur="setDefaultDate"
          />
        </div>
      </div>

      <div class="trend-cards">
        <div class="trend-card"
             :class="{ 'active': selectedMetric === 'page_views' }"
             @click="changeMetric('page_views')">
          <p class="trend-title">
            浏览量
            <el-tooltip class="item" effect="dark" content="观看页面的总浏览量" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </p>
          <p class="trend-value">{{ trendData.views || 0 }}</p>
          <p class="trend-tip">{{ changeLabel }}: {{ trendData.viewsChange }}%</p>

        </div>

        <div class="trend-card"
             :class="{ 'active': selectedMetric === 'unique_visitors' }"
             @click="changeMetric('unique_visitors')">
          <p class="trend-title">
            访客数
            <el-tooltip class="item" effect="dark" content="进入直播间的访客数" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </p>
          <p class="trend-value">{{ trendData.visitors|| 0 }}</p>
          <p class="trend-tip">{{ changeLabel }}: {{ trendData.visitorsChange }}%</p>

        </div>

        <div class="trend-card"
             :class="{ 'active': selectedMetric === 'streams' }"
             @click="changeMetric('streams')">
          <p class="trend-title">
            创建直播数
            <el-tooltip class="item" effect="dark" content="创建的直播间数量" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </p>
          <p class="trend-value">{{ trendData.streams|| 0 }}</p>
          <p class="trend-tip">{{ changeLabel }}: {{ trendData.streamsChange }}%</p>

        </div>

        <div class="trend-card"
             :class="{ 'active': selectedMetric === 'total_views' }"
             @click="changeMetric('total_views')">
          <p class="trend-title">
            累计观看人次
            <el-tooltip class="item" effect="dark" content="直播间被观看的总人次" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </p>
          <p class="trend-value">{{ trendData.pv|| 0 }}</p>
          <p class="trend-tip">{{ changeLabel }}: {{ trendData.pvChange }}%</p>

        </div>

        <div class="trend-card"
             :class="{ 'active': selectedMetric === 'unique_viewers' }"
             @click="changeMetric('unique_viewers')">
          <p class="trend-title">
            累计观看人数
            <el-tooltip class="item" effect="dark" content="去重后的观看人数" placement="top">
              <i class="el-icon-info"></i>
            </el-tooltip>
          </p>
          <p class="trend-value">{{ trendData.uv|| 0 }}</p>
          <p class="trend-tip">{{ changeLabel }}: {{ trendData.uvChange }}%</p>

        </div>
      </div>


      <!-- 直播趋势折线图 -->
      <div id="liveChart" class="chart"></div>
    </div>
    <!-- 直播TOP10排行榜 -->
    <div class="top10-section">
      <h3>直播TOP10排行榜</h3>
      <div class="ranking-container">
          <!-- 红榜 -->
          <div class="ranking-section red-rank">
            <span class="rank-title">红榜</span>
            <div class="rank-filters">
              <button
                v-for="item in redRankTypes"
                :key="item.value"
                :class="{ active: selectedRank === item.value }"
                @click="selectRank(item.value)"
              >
                {{ item.label }}
              </button>
            </div>
          </div>

          <!-- 黑榜 -->
          <div class="ranking-section black-rank">
            <div class="rank-filters">
              <button
                v-for="item in blackRankTypes"
                :key="item.value"
                :class="{ active: selectedRank === item.value }"
                @click="selectRank(item.value)"
              >
                {{ item.label }}
              </button>
            </div>
            <span class="rank-title">黑榜</span>
          </div>
      </div>
      <el-table :data="top10List" border style="width: 100%">
        <el-table-column prop="rank" label="排名" width="80"></el-table-column>
        <el-table-column prop="liveName" label="直播名称">
          <template #default="scope">
            <div class="live-name">
              <img :src="scope.row.liveImgUrl" class="live-cover" alt="封面">
              <span class="live-title">{{ scope.row.liveName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pageViews" label="直播间浏览量(PV)"></el-table-column>
        <el-table-column prop="uniqueVisitors" label="直播间访客数(UV)"></el-table-column>
        <el-table-column prop="totalViews" label="累计观看人次(PV)"></el-table-column>
        <el-table-column prop="uniqueViewers" label="累计观看人数(UV)"></el-table-column>
        <!--<el-table-column prop="avgTime" label="人均观看时长"></el-table-column>-->
        <el-table-column prop="peakConcurrentViewers" label="最高在线人数"></el-table-column>
      </el-table>

    </div>
    <div class="student-section">
      <h3>直播间学员</h3>
        <el-form :inline="true" v-show="showAdvancedSearch" label-width="100px">
          <!-- 直播列表弹框 -->
          <el-dialog title="选择直播" :visible.sync="dialogVisible" width="70%">
            <el-row :gutter="20">
              <el-col :span="8" :sm="12" :md="8">
                <el-form-item label="直播名称:">
                  <el-input v-model="liveFiltersParam.liveName" placeholder="请输入直播名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :sm="12" :md="8">
                <el-form-item label="直播状态:">
                  <el-select v-model="liveFiltersParam.status" placeholder="请选择直播状态" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已结束" value="3"></el-option>
                    <el-option label="进行中" value="2"></el-option>
                    <el-option label="未开始" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" :sm="12" :md="8">
                <el-form-item label="直播时间:">
                  <el-date-picker
                    v-model="liveDateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    style="width: 250px"
                    @change="handleLiveDateChange"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <!-- 查询 & 重置 按钮 -->
              <el-col :span="4" class="button-group">
                <el-button type="primary" @click="getLive">查询</el-button>
                <el-button @click="resetLiveFilters">重置</el-button>
              </el-col>
            </el-row>

            <!-- 直播列表 -->
            <el-table :data="liveList" border @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50" align="center" />
              <!-- 直播信息列 -->
              <el-table-column label="直播名称" min-width="250">
                <template slot-scope="{ row }">
                  <div class="live-info">
                    <!-- 直播封面图 -->
                    <img :src="row.liveImgUrl" class="live-cover" />
                    <!-- 直播名称 + 时间 -->
                    <div class="live-text">
                      <div type="text"class="live-name">{{ row.liveName }}</div>
                      <div class="live-time">{{ row.startTime }}-{{row.finishTime}}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <!-- 直播状态 -->
              <el-table-column label="直播状态" min-width="120">
                <template slot-scope="{ row }">
                  <div class="status-container">
                    <span :class="['status-dot', getStatusClass(row.status)]"></span>
                    <span>{{ getStatusText(row.status) }}</span>
                  </div>
                </template>
              </el-table-column>

              <!-- 讲师 -->
              <el-table-column label="讲师" prop="teacher" min-width="120"></el-table-column>
            </el-table>
            <pagination
              v-show="liveTotal>0"
              :total="liveTotal"
              :page.sync="liveFiltersParam.pageNum"
              :limit.sync="liveFiltersParam.pageSize"
              @pagination="getLive"
            />
            <!-- 确认按钮 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="confirmSelection">确认</el-button>
            </span>
          </el-dialog>
          <!-- 基础筛选项：始终显示 -->
          <el-row :gutter="20">
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="直播名称:" class="el-form-item-ellipsis">
                <el-input
                  v-model="filters.liveName"
                  placeholder="请选择直播"
                  @focus="openDialog"
                  type="text"
                  readonly
                >
                  <template slot="prepend">
                    <div v-if="filters.liveNames.length > 0" class="selected-lives">
                      <el-tag
                        v-for="(name, index) in filters.liveNames"
                        :key="index"
                        closable
                        @close="removeLive(index)"
                        class="live-name-tag"
                      >
                        {{ name }}
                      </el-tag>
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="用户名:" class="el-form-item-ellipsis">
                <el-input v-model="filters.userName" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="手机号:" class="el-form-item-ellipsis">
                <el-input v-model="filters.userPhone" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 高级筛选项 -->
          <el-row :gutter="24" v-show="showAllFilters">
            <el-col :span="8" :sm="12" :md="8" >
              <el-form-item label="用户创建时间:">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="handleDateChange"
                  class="full-width-picker"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="分享次数:" class="el-form-item-ellipsis">
                <el-input v-model="filters.shareCount" placeholder="请输入分享次数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="所属部门:" prop="deptId">
                <treeselect style="width:220px" v-model="filters.deptId" :options="deptOptions" :show-count="true" placeholder="请选择所属部门" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-show="showAllFilters">
            <el-col :span="8" :sm="12" :md="8"> <!-- 每列 span 总和控制在 24 内 -->
              <el-form-item label="跟进人:" class="el-form-item-ellipsis">
                <el-input v-model="filters.companyUserName" placeholder="请输入跟进人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="购买商品数:" class="el-form-item-ellipsis">
                <el-input v-model="filters.goodsCount" placeholder="请输入购买商品数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :sm="12" :md="8">
              <el-form-item label="提问数:" class="flex-container">
                <el-row>
                  <el-col :span="8" :sm="12" :md="8">
                    <el-input-number v-model="filters.minQuestionCount" placeholder="最小提问数" :min="0" style="width: 100%"></el-input-number>
                  </el-col>
                  <el-col :span="2" class="text-center">至</el-col>
                  <el-col :span="8" :sm="12" :md="8">
                    <el-input-number v-model="filters.maxQuestionCount" placeholder="最大提问数" :min="0" style="width: 100%"></el-input-number>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 按钮组：始终显示 -->
          <el-row>
            <el-col :span="24" class="button-group">
              <el-button type="primary" @click="getStudentData" class="custom-button">查询</el-button>
              <el-button @click="resetFilters" class="custom-button">重置</el-button>
              <el-button type="text" @click="toggleAllFilters" class="custom-button toggle-button">
                {{ showAllFilters ? '收起' : '展开' }}
                <i :class="showAllFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      <!--<div class="column-button-container">
        <el-button
          type="primary"
          @click="showColumnSettings = true"
          class="custom-column-button"
        >
          自定义列
        </el-button>
      </div>-->
      <!-- 自定义列弹窗 -->
      <el-drawer
        title="自定义列设置"
        :visible.sync="showColumnSettings"
        :before-close="handleClose"
        size="25%"
      >
        <!-- 抽屉内容区域 -->
        <!--<div style="display: flex; flex-direction: column; height: 100%;">
          &lt;!&ndash; 可拖拽的列设置区域 &ndash;&gt;
          <draggable
            v-model="columnOrder"
            group="columns"
            style="flex: 1; overflow-y: auto;"
          >
            <div v-for="col in columnOrder" :key="col.dataIndex" class="column-item">
              <el-checkbox v-model="col.status" true-label="ENABLE" false-label="DISABLE">
                {{ col.title }}
              </el-checkbox>
              <i class="el-icon-rank drag-handle"></i>
            </div>
          </draggable>

          &lt;!&ndash; 底部按钮区域 &ndash;&gt;
          <div style="padding: 12px; text-align: right; border-top: 2px solid;">
            <el-button @click="showColumnSettings = false" style="color: black;">取消</el-button>
            <el-button
              type="primary"
              @click="saveColumnsConfig"
              style="color: black; background-color: #409EFF; border-color: #409EFF;"
            >
              确定
            </el-button>
          </div>
        </div>-->
      </el-drawer>


      <div style="overflow-x: auto; white-space: nowrap;">
        <el-table :data="liveStudentList" border style="min-width: 1200px;">
          <!-- 固定列，内容不换行 -->
          <el-table-column prop="userName" label="客户名" fixed :style="{whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden',textAlign: 'center'}"></el-table-column>
          <el-table-column prop="liveName" label="直播间" fixed :show-overflow-tooltip="true" width=151px :min-width="'直播间'.length * 12 + 30":style="{whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden',textAlign: 'center'}"></el-table-column>
          <el-table-column prop="companyUserName" label="跟进人" fixed class="no-wrap-column"></el-table-column>
          <el-table-column prop="deptName" label="归属部门" width="150" show-overflow-tooltip/>
          <el-table-column prop="userCreateTime" label="客户创建时间" width="150" show-overflow-tooltip/>
          <el-table-column prop="userPhone" label="联系方式" width="150" show-overflow-tooltip/>
          <el-table-column prop="goodsCount" label="去下单实物商品" width="150" show-overflow-tooltip/>
          <el-table-column prop="shareCount" label="分享直播间次数" width="150" show-overflow-tooltip/>
          <el-table-column prop="questionCount" label="答题次数" width="150" show-overflow-tooltip/>

          <!-- 动态列 -->
          <!--<el-table-column
            v-for="col in filteredColumns"
            :key="col.dataIndex"
            :prop="col.dataIndex"
            :label="col.title"
            :width="col.width"
            :min-width="col.title.length * 12 + 30"
            :show-overflow-tooltip="true">
          </el-table-column>-->

        </el-table>
        <pagination
          v-show="liveStudentTotal>0"
          :total="liveStudentTotal"
          :page.sync="filters.pageNum"
          :limit.sync="filters.pageSize"
          @pagination="getStudentData"
        />
      </div>
    </div>
  </div>
</template>


<script>
  import * as echarts from "echarts";
  import Editor from '@/components/Editor/wang';
  import {recentLive,liveTop,getTrendData,columns,updateColumns,queryStudentData} from "@/api/live/liveData";
  import {selectLiveToStudent} from "@/api/live/live";
  import { treeselect } from "@/api/company/companyDept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import draggable from "vuedraggable";
  export default {

    name: "LiveData",
    components: { Editor,draggable,Treeselect },
    data() {
      return {
        // 部门树选项
        deptOptions: [],
        liveDateRange:"",
        liveFiltersParam:{
          liveName:"",
          status:"",
          startTime:"",
          finishTime:"",
          pageNum: 1,
          pageSize: 10,
        },
        liveList: [],
        dialogVisible: false,
        span:8,
        showAllFilters: true, // 默认收起
        showAdvancedSearch: true, // 控制表单的显示
        // 直播间总条数
        liveTotal: 0,
        //学员数据总条数
        liveStudentTotal:0,
        dateRange: [],//存选择的日期范围
        filters: {
          minQuestionCount: 0,  // 大于提问数
          maxQuestionCount: 0,  // 小于提问数
          liveNames: [],  // 存放已选的直播名称
          liveIds: [],
          liveName: '',
          userName: '',
          userPhone: '',
          userCreateTime: '',
          startTime: '', // 开始时间
          finishTime: '',
          shareCount: '',
          deptName: '',
          deptId:null,
          companyUserName: '',
          goodsCount: '',
          questionCount: '',
          pageNum: 1,
          pageSize: 2
        },
        selectedLives: [], // 临时存储选中的直播数据
        showColumnSettings: false, // 控制自定义列弹窗
        columnOrder: [],
        tempOrderedColumns : [],  // 用于渲染表格的列顺序
        selectedColumns: [],  // 用于控制哪些列被选中
        liveStudentList:[],
        top10List: [],
        selectedRank: 'highFlow',
        redRankTypes: [
          { label: '高流量', value: 'highFlow' },
          { label: '高观看', value: 'highView' },
          /*{ label: '高时长', value: 'highTime' },*/
        ],
        blackRankTypes: [
          { label: '低观看', value: 'lowView' },
          { label: '低流量', value: 'lowFlow' },
        ],
        selectedTimeRange: 'day',  // 默认选择自然天
        selectedDate: null,  // 用户选择的日期
        datePickerType: 'date',  // 默认日期选择类型
        weekRange: 'yyyy-ww',  // 周选择的日期格式
        queryParams: {
          type: 'day',  // 用来存储时间筛选方式（如 day, week, month）
          date: new Date().toISOString().split("T")[0],  // 用来存储用户选择的日期默认今天
          category:"page_views"
        },
        chart: null,
        trendData: {}, // 直播趋势数据
        selectedMetric: "page_views", // 默认选中浏览量
        lives: [],
      };
    },
    computed: {

      filteredColumns() {
        return this.columnOrder.filter(col => col.status === "ENABLE");
      },
      changeLabel() {
        switch (this.selectedTimeRange) {
          case 'day': return '比前一天';
          case 'week': return '比上周';
          case 'month': return '比上月';
          default: return '变化';
        }
      },
      displayLives() {
        return this.lives.slice(0, 4); // 最多只显示前 4 条数据
      },

      dateFormat() {
        return this.selectedTimeRange === "day"
          ? "yyyy-MM-dd"
          : this.selectedTimeRange === "week"
            ? "yyyy-MM-dd 至 yyyy-MM-dd"
            : "yyyy-MM-dd";
      },
      valueFormat() {
        return this.selectedTimeRange === "day"
          ? "yyyy-MM-dd"
          : this.selectedTimeRange === "week"
            ? "yyyy-MM-dd"
            : "yyyy-MM-dd";
      },
    },
    created() {
      this.getRecentLive();
      this.getLiveTop();
      this.getTrendData();
      //this.getColumns();
      this.getTreeselect();

    },
    mounted() {
      this.selectedColumns = this.columnOrder.map((col) => col.prop); // 默认全选
      this.selectedMetric = this.trendData[0]; // 默认选中第一个
      this.initChart(); // 初始化折线图
      if (!this.selectedMetric) {
        this.selectedMetric = "page_views";
      };
      this.updateChart();
    },
    watch: {
      // 如果 columnOrder 更新，确保 orderedColumns 跟随更新
      columnOrder(newOrder) {
        this.tempOrderedColumns = [...newOrder];
      },
    },

    methods: {
      handleLiveDateChange(value) {
        if (value) {
          this.liveFiltersParam.startTime = value[0];
          this.liveFiltersParam.finishTime = value[1];
        } else {
          this.liveFiltersParam.startTime = null;
          this.liveFiltersParam.finishTime = null;
        }
        console.log("直播时间范围:", this.liveFiltersParam.startTime, this.liveFiltersParam.finishTime);
      },
      handleDateChange(value) {
        if (value) {
          this.filters.startTime = value[0];
          this.filters.finishTime = value[1];
        } else {
          this.filters.startTime = '';
          this.filters.finishTime = '';
        }
        console.log("用户创建时间范围:", this.filters.startTime, this.filters.finishTime);
      },
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
          console.log(this.deptOptions)
        });
      },
      getLive(){
        selectLiveToStudent(this.liveFiltersParam).then(response => {
          this.liveList = response.rows;
          this.liveTotal = response.total;
        });
      },
      resetLiveFilters(){
        this.liveDateRange="",
        this.liveFiltersParam = {
          liveName:"",
          status:"",
          startTime:"",
          finishTime:""
        }
      },
      // 确认选择
      confirmSelection() {
        this.filters.liveNames = this.selectedLives.map(item => item.liveName);
        this.filters.liveIds = this.selectedLives.map(item => item.liveId);
        console.log(this.filters.liveIds)
        this.dialogVisible = false; // 关闭弹框
      },
      // 移除已选直播
      removeLive(index) {
        this.filters.liveNames.splice(index, 1);
        this.filters.liveIds.splice(index, 1);
      },
      // 处理表格选中
      handleSelectionChange(selectedRows) {
        this.selectedLives = selectedRows; // 存储选中的直播数据
      },

      openDialog() {
        this.getLive();
        this.dialogVisible = true;
      },
      toggleAllFilters() {
        this.showAllFilters = !this.showAllFilters;
      },
      getStudentData() {
        console.log("查询条件：", this.filters);
        queryStudentData(this.filters).then(response => {
          console.log(response)
          this.liveStudentList = response.rows;
          this.liveStudentTotal = response.total;
          console.log(response.total)
        });
      },
      resetFilters() {
        this.filters = {
          liveName: "",
          liveNames:[],
          liveIds:[],
          phoneNumber: "",
          wechatNickname: "",
          customerId: "",
          visitTime: [],
          isWinner: "",
          department: "",
          customerTag: "",
        };
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      saveColumnsConfig() {
        this.tempOrderedColumns = [...this.columnOrder];  // 更新 orderedColumns
        console.log(this.tempOrderedColumns)
        updateColumns(this.tempOrderedColumns).then(response=>{
          //this.getColumns()
          location.reload()
          this.showColumnSettings = false;
        })
      },
      /*getColumns(){
        this.loading = true;
        columns().then(response => {
          this.columnOrder = response.data;
          this.selectedColumns = response.data.map((col) => col.prop);
          console.log(this.columnOrder)
          this.loading = false;
        });
      },*/
      getTrendData(){
        getTrendData(this.queryParams).then(response=>{
          this.trendData = response.data
          this.updateChart()
        })
      },
      // 更新折线图
      getMetricTitle(metricKey) {
        const titles = {
          page_views: "浏览量",
          unique_visitors: "访客数",
          streams: "创建直播数",
          total_views: "累计观看人次",
          unique_viewers: "累计观看人数"
        };
        return titles [metricKey] || "未知指标";
      },

      // 点击卡片切换指标
      changeMetric(metric) {
        this.selectedMetric = metric;
        // 更新 queryParams 中的 category
        this.queryParams.category = metric;  // 默认值为 prevViews
        this.updateChart();  // 更新图表
        this.getTrendData();  // 重新请求数据
      },
      getLiveTop() {

        liveTop({ rankType: this.selectedRank })
          .then(response => {

            if (response.data) {
              // 遍历数据并添加排名字段
              this.top10List = response.data.map((item, index) => ({
                ...item,
                rank: index + 1 // 排名从 1 开始
              }));
            } else {
              this.top10List = [];
            }
          })
          .catch(error => {
          });
      },
      getStatusText(status) {
        if (status === 1) return "待直播";
        if (status === 2) return "直播中";
        return "已结束";
      },
      getStatusClass(status) {
        if (status === 1) return "status-upcoming";
        if (status === 2) return "status-live";
        return "status-ended";
      },
      getRecentLive(){
        this.loading = true;
        recentLive().then(response => {
          this.lives = response.data;
          this.loading = false;
        });
      },

      getWeekRange(selectedWeek) {
        let date = new Date(selectedWeek);

        if (isNaN(date.getTime())) {
          return "日期错误";
        }

        let dayOfWeek = date.getDay(); // 0（星期天）- 6（星期六）

        // 计算周一
        let startDate = new Date(date); // 创建一个新的 Date 实例
        startDate.setDate(date.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));

        // 计算周日（确保 `endDate` 是新实例）
        let endDate = new Date(startDate.getTime()); // 复制 `startDate`
        endDate.setDate(startDate.getDate() + 6);


        return `${this.formatDate(startDate)} 至 ${this.formatDate(endDate)}`;
      },
      changeDate(value) {
        if (this.selectedTimeRange === 'week' && value) {
          this.weekRange = this.getWeekRange(value);
          console.log("周"+this.weekRange)
        } else {
          this.weekRange = '';  // 非周选择时清空周范围
        }

        // 更新 queryParams.date
        if (value) {
          this.queryParams.date = this.formatDate(value);
        }
        this.getTrendData();
      },
      formatDate(date) {
        let date_ = new Date(date);
        console.log(date_)
        const year = date_.getFullYear();
        const month = String(date_.getMonth() + 1).padStart(2, '0');
        const day = String(date_.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },

      // 获取一周的起始日期（周一）
      getStartOfWeek(date) {
        let parsedDate = new Date(date);
        if (isNaN(parsedDate.getTime())) {
          console.error("无效的日期:", date);
          return null;
        }

        const day = parsedDate.getDay();
        const diff = parsedDate.getDate() - day + (day === 0 ? -6 : 1); // 调整到周一
        return new Date(parsedDate.setDate(diff));
      },

      getEndOfWeek(date) {
        const startOfWeek = this.getStartOfWeek(date);
        if (!startOfWeek) return null;

        let endOfWeek = new Date(startOfWeek);
        endOfWeek.setDate(startOfWeek.getDate() + 6); // 调整到周日
        return endOfWeek;
      },
      computedChange(item) {
        switch (this.selectedTimeRange) {
          case 'day': return item.dailyChange;
          case 'week': return item.weeklyChange;
          case 'month': return item.monthlyChange;
          default: return 0;
        }
      },
      selectRank(type) {
        this.selectedRank = type; // 只允许一个按钮被选中
        this.getLiveTop();  // 重新获取排行榜数据
      },
      // 切换时间范围
      changeTimeRange() {
        // 根据选中的时间范围修改 datePicker 类型
        if (this.selectedTimeRange === 'day') {
          this.datePickerType = 'date';  // 自然天
          this.weekRange = '';  // 清空周范围
        } else if (this.selectedTimeRange === 'month') {
          this.datePickerType = 'month';  // 自然月
          this.weekRange = '';  // 清空周范围
        } else if (this.selectedTimeRange === 'week') {
          this.datePickerType = 'week';  // 自然周
        }
        // 立即弹出日期选择器
        this.$nextTick(() => {
          this.$refs.datePickerRef.focus();
        });
        // 重置已选日期
        this.queryParams.type = this.selectedTimeRange;
        this.selectedDate = null;
        this.queryParams.date = '';  // 清空 queryParams 中的日期
      },
      setDefaultDate() {
        // 如果用户没有选择日期，则使用当前日期
        if (!this.selectedDate) {
          this.selectedDate = this.formatDate(new Date());
          this.queryParams.date = this.selectedDate;
        }
      },
      // 切换日期时更新数据
      updateTrendData() {
        // 这里可以加接口请求，获取新的数据
        this.getTrendData()
        this.updateChart();
      },
      initChart() {
        let chartDom = document.getElementById("liveChart");
        if (!chartDom) return;
        this.chart = echarts.init(chartDom);
        this.updateChart();
      },
      // 更新折线图
      updateChart() {
        if (!this.chart) return;

        // 获取当前选中的指标对应的数据
        let metricKey = this.selectedMetric;
        let metricTitle = this.getMetricTitle(metricKey); // 获取指标标题
        let chartData = this.trendData.data || [];
        let dates = this.trendData.dates || []; // 确保 dates 不是 null
        let options = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.7)",
            textStyle: { color: "#fff" },
            formatter: function (params) {
              let date = params[0].name; // x 轴的日期
              let value = params[0].value; // 对应的数值
              return `${date}<br/>${params[0].seriesName}: ${value}`;
            }
          },
          grid: {
            left: "5%", right: "5%", bottom: "10%", top: "10%", containLabel: true
          },
          xAxis: {
            type: "category",
            data: this.trendData.dates || [],
            axisLine: {lineStyle: {color: "#ddd"}}
          },
          yAxis: {
            type: "value",
            splitLine: {lineStyle: {type: "dashed", color: "#ddd"}}
          },
          series: [
            {
              name: metricTitle,
              data: chartData,
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                color: "#007BFF",
                borderColor: "#fff",
                borderWidth: 2
              },
              lineStyle: {
                width: 3,
                color: "#007BFF"
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: "rgba(0, 123, 255, 0.5)"},
                  {offset: 1, color: "rgba(0, 123, 255, 0)"}
                ])
              },
              emphasis: {
                focus: "series",
                label: {
                  show: true,
                  formatter: "{c}",
                  fontSize: 14,
                  color: "#333",
                  backgroundColor: "#fff",
                  padding: [4, 6]
                }
              },
              animationDuration: 1200,
              animationEasing: "quadraticOut"
            }
          ]
        };

        this.chart.setOption(options);
      },
    }
  };
</script>

<style scoped>
  .app-container {
    padding: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .live-container {
    display: flex;
    gap: 15px; /* 控制卡片之间的间距 */
    overflow-x: auto; /* 允许横向滚动 */
    padding-bottom: 10px;
  }

  /* 卡片样式 */
  .live-card {
    width: 380px;
    height: 225px;
    background: rgb(250,250,250);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 直播状态 */
  .status {
    background: #d3d3d3;
    color: #333;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block;
  }

  /* 不同状态颜色 */
  .status-upcoming {
    background: #FFC107; /* 黄色 */
    color: #333;
  }

  .status-live {
    background: #28A745; /* 绿色 */
    color: white;
  }

  .status-ended {
    background: #D3D3D3; /* 灰色 */
    color: #333;
  }
  /* 直播信息部分 */
  .content {
    background: rgb(250,250,250);
    display: flex;
    gap: 10px;
    align-items: center;
    width: 90%;
    margin-top: 0px;
  }

  /* 直播封面图片 */
  .cover-image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
  }

  /* 直播文本信息 */
  .info {
    flex: 1;
  }

  .live-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* 防止标题过长 */
  }

  .time {
    font-size: 14px;
    color: #666;
  }

  /* 直播数据部分 */
  .stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    margin-top: 10px;
  }

  .stat-item {
    text-align: center;
    flex: 1;
  }

  .label {
    font-size: 14px;
    color: #888;
  }

  .value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  /* 直播趋势 */
  .trend-section {
    margin-top: 30px;
  }
  .trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .trend-cards {
    display: flex;
    gap: 15px;
  }
  .trend-card {
    width: 280px;
    hight: 100px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s;
    position: relative;
  }

  .trend-card.active {
    border-color: #007bff; /* 选中时边框变蓝 */
    box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.3);
  }

  .trend-card.active::after {
    content: "✔";
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: white;
    background: #007bff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
  }
  .trend-value {
    font-size: 24px;
    font-weight: bold;
  }

  /* 折线图 */
  .chart {
    width: 100%;
    height: 300px;
    margin-top: 20px;
  }
  .top10-section {
    margin-top: 20px;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .live-name {
    display: flex;
    align-items: center;
  }

  .live-cover {
    width: 80px;  /* 直播封面宽度 */
    height: 45px; /* 直播封面高度 */
    border-radius: 4px;
    margin-right: 10px;
    object-fit: cover;
  }

  .live-title {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ranking-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  .ranking-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .ranking-section {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 10px 15px;
  }

  .red-rank {
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    justify-content: flex-start;
  }

  .black-rank {
    background: linear-gradient(90deg, #4a4a4a, #6b6b6b);
    justify-content: flex-end;
  }

  .rank-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin: 0 15px;
  }

  .rank-filters {
    display: flex;
  }

  button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 14px;
    padding: 5px 12px;
    margin: 0 5px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  button.active {
    background: white;
    color: #ff4d4f;
  }
  .filter-container {
    display: flex;
    align-items: center;
    gap: 8px; /* 控制两个组件的间距 */
  }

  .filter-label {
    font-weight: bold;
    white-space: nowrap; /* 防止换行 */
  }


  .student-section {
    margin-top: 20px;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
   .column-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px;
     border: 1px solid #ddd;
     background: #f9f9f9;
     margin-bottom: 5px;
     cursor: grab;
   }

  .drag-handle {
    cursor: grab;
  }
  /* 自定义列按钮的样式 */
  .column-button-container {
    text-align: right; /* 使按钮右对齐 */
    margin-bottom: 10px; /* 为按钮和表格之间增加间距 */
  }

  .custom-column-button {
    background-color: #409EFF;
    color: black;
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 10px; /* 如果有多个按钮，确保按钮之间有间距 */
  }

  /* 表格区域的样式 */
  .student-section {
    padding: 20px;
  }

  .el-table {
    margin-top: 20px; /* 为表格添加顶部间距 */
  }

  .el-table-column {
    /* 让列文本超出时显示省略号 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .el-table-column:hover {
    cursor: pointer;
  }
  .no-wrap-column .cell {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center; /* 使列内容居中 */
  }
  .advanced-search {
    margin-bottom: 10px;
    padding: 15px;
  }
  .button-group {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  /* 让按钮默认显示 */
  .el-button {
    opacity: 1; /* 确保默认状态可见 */
    color: #606266; /* 默认文字颜色 */
    border-color: #dcdfe6; /* 默认边框颜色 */
    background-color: #f5f7fa; /* 默认背景色 */
    transition: all 0.3s; /* 添加动画过渡 */
  }

  /* 鼠标悬停时高亮 */
  .el-button:hover {
    color: #409eff !important; /* 文字变蓝 */
    border-color: #409eff !important; /* 边框变蓝 */
    background-color: #ecf5ff !important; /* 背景变浅蓝 */
  }

  /* “展开/收起” 按钮特殊处理 */
  .el-button[type="text"] {
    background: none;
    border: none;
    color: #606266;
  }

  /* 鼠标悬停时高亮 */
  .el-button[type="text"]:hover {
    color: #409eff !important;
  }
  .el-form-item-ellipsis .el-input__inner,
  .el-form-item-ellipsis .el-select .el-input__inner {
    text-align: center; /* 输入框内容居中对齐 */
  }

  /* 控制 label 长度过长时显示省略号 */
  .el-form-item-ellipsis .el-form-item__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* 确保标签可以适配宽度 */
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 10px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }

  /* 直播信息整体布局 */
  .live-info {
    display: flex;
    align-items: center;
  }

  /* 直播封面图 */
  .live-cover {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 10px;
  }

  /* 直播名称 + 时间 */
  .live-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  /* 直播时间 */
  .live-time {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
  }

  /* 直播状态 */
  .status-container {
    display: flex;
    align-items: center;
  }

  /* 状态圆点 */
  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
  }
  .live-name-input .el-input__inner {
    white-space: normal;  /* 允许文本换行 */
    word-wrap: break-word; /* 长文本自动换行 */
    padding-left: 10px;
  }

  .live-name-tag {
    margin-right: 5px;
    display: inline-block; /* 确保标签显示为块级元素 */
  }
  .flex-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 调整 label 与输入框间距 */
    width: 90%;
  }

  .ellipsis-label .el-form-item__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px; /* 你可以调整这个值 */
    display: block;
    padding: 0 10px 0 0;
  }

  .full-width-picker {
    flex: 1; /* 让日期选择器填充剩余空间 */
  }

</style>

