<template>
  <div class="app-container">
    <div class="title">
      <div>
        <div>{{ detail.title }}</div>
        <div>主播：{{ detail.advisorBasic.name }}</div>
        <div>
          {{ detail.startTime }} -
          {{ detail.endTime ? detail.endTime.slice(10) : "" }}
        </div>
      </div>
      <!-- <div class="txonlineNum" v-show="detail.liveStatus === 1">
        并发连接数：{{ txonlineNum }}
      </div> -->
      <div
        v-if="detail.playType === 1 && [1, 4].includes(type)"
        class="time-button"
      >
        <div
          v-if="detail.liveStatus === 2 && nowDate.isBefore(detail.startTime)"
        >
          <CountDown :detail-data="detail.startTime" />
        </div>
        <el-button
          v-if="detail.liveStatus === 3"
          type="primary"
          @click="controlLive(3)"
          >开始直播</el-button
        >
        <el-button
          v-if="detail.liveStatus === 1 || detail.liveStatus === 3"
          type="danger"
          @click="controlLive(2)"
          >结束并生成回放</el-button
        >
      </div>
      <overUniteLive
        v-if="[5].includes(type) && detail.liveStatus === 1"
        :live-status="detail.liveStatus"
        :advisor-name="detail.advisorBasic.name"
      />
    </div>
    <div class="content">
      <div ref="videoBox" class="video-box">
        <div class="video-box-top">
          <!-- :class="{ 'sticky': isSticky }" :style="{'width': isSticky ? `${divWidth}px`:'100%'}" -->
          <div
            v-if="
              (renderPlayer && renderStatus == 'living-player') ||
                renderStatus == 'back-player'
            "
            ref="videoPlayer"
            class="w-full h-full"
          />
          <div v-else-if="renderStatus == 'before-img' || pullBuffer">
            <img style="height:600px;width:100%;" :src="beforeImgUrl" />
          </div>
          <div
            v-else-if="renderStatus == 'suspend-player' || !renderStatus"
            class="suspend"
          >
            <img src="@/assets/logo/wait.png" class="user-avatar" />
            <p>主播离开一会儿，请耐心等待~</p>
          </div>
          <div v-if="![5].includes(type)" class="video-box-bottom">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <!-- <el-tab-pane label="聊天" name="1"></el-tab-pane>
            <el-tab-pane v-if="detail.liveStatus !== 4 " label="互动设置" name="2"></el-tab-pane> -->
              <el-tab-pane
                v-if="[1, 2, 4].includes(type)"
                label="购物车"
                name="3"
              />
              <!-- <el-tab-pane
                v-if="[1, 2, 4].includes(type)"
                label="发优惠券"
                name="4"
              /> -->
              <el-tab-pane
                v-if="[1, 2, 4].includes(type)"
                label="问卷"
                name="5"
              />
              <!-- <el-tab-pane
                v-if="[1, 2, 4].includes(type)"
                label="营销二维码"
                name="6"
              /> -->
              <!-- <el-tab-pane
                v-if="[1, 2, 4].includes(type) && detail.playType === 1"
                label="转播设置"
                name="7"
              /> -->
              <el-tab-pane
                v-if="[1, 2, 4].includes(type)"
                label="嘉宾设置"
                name="8"
              />
            </el-tabs>

            <!-- 互动设置 -->
            <div v-if="activeName === '2'" class="interaction-box">
              <div class="interaction-box_switch">
                开放观众发言
                <el-switch
                  v-model="isSpeak"
                  :inactive-value="2"
                  :active-value="1"
                  @change="setUp()"
                />
                <el-checkbox
                  v-model="isSendMessage"
                  :true-label="1"
                  :false-label="2"
                  >在聊天框中发送禁言/开启发言通知</el-checkbox
                >
              </div>
              <div class="interaction-box_switch">
                开启审核
                <el-switch
                  v-model="messageAudit"
                  :inactive-value="2"
                  :active-value="1"
                  @change="setUpTwo()"
                />
              </div>
              <!-- <el-button type="success" @click="" :disabled="isSpeak === detail.isSpeak && messageAudit === detail.messageAudit">保存设置</el-button> -->
            </div>
            <!-- 购物车 -->
            <div v-if="activeName === '3'" class="shopping-box">
              <div class="shop-header">
                <p>
                  产品列表 （说明：产品列表中仅展示申请上架直播时{{
                    settingToC ? "配置" : "选择"
                  }}的产品）
                </p>
                <div v-if="[1, 2, 4].includes(type)">
                  <el-button
                    type="success"
                    size="mini"
                    @click="cancelPushProduct"
                    >取消推送产品</el-button
                  >
                </div>
              </div>
              <el-table
                key="cartVOList"
                :data="detail.cartVOList"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="productType"
                  label="产品类型"
                  width="180"
                >
                  <template slot-scope="scope">
                    {{ productTypeList[scope.row.productType] }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="productName"
                  label="产品名称"
                  width="180"
                />
                <el-table-column prop="address" label="投顾名称">
                  <template slot-scope="scope">
                    {{
                      scope.row.advisorBasic
                        ? scope.row.advisorBasic.showName
                        : ""
                    }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="subCount" label="产品订阅数">
              </el-table-column> -->
                <el-table-column prop="saleLimit" label="可销售数量">
                  <template slot-scope="scope">
                    {{
                      scope.row.saleLimit === null ? "" : scope.row.saleLimit
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="[1, 2, 4].includes(type)"
                  label="操作"
                  fixed="right"
                  width="160px"
                >
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.status === 1"
                      type="text"
                      @click="updateStatus(scope.row, 4)"
                      >下架产品</el-button
                    >
                    <el-button
                      v-if="scope.row.status === 1 && !settingToC"
                      type="text"
                      @click="updateStatus(scope.row, 9)"
                      >修改可销售数量</el-button
                    >
                    <el-button
                      v-if="scope.row.status === 1 && !scope.row.weight"
                      type="text"
                      @click="updateStatus(scope.row, 10)"
                      >推荐</el-button
                    >
                    <el-button
                      v-if="scope.row.status === 1 && scope.row.weight"
                      type="text"
                      @click="updateStatus(scope.row, 11)"
                      >取消推荐</el-button
                    >
                    <el-button
                      v-if="scope.row.status === 2"
                      type="text"
                      @click="updateStatus(scope.row, 3)"
                      >上架产品</el-button
                    >
                    <el-button
                      v-if="scope.row.coverImgUrl"
                      type="text"
                      @click="setCartPush(scope.row)"
                      >推送产品</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <p
                v-if="[1, 2, 4].includes(type)"
                style="line-height:40px;text-align: right;"
              >
                （此处的上下架产品仅控制是否在购物车列表展示）
              </p>
            </div>
            <!-- 发优惠券  && detail.liveStatus !== 4 -->
            <div v-if="activeName === '4'" class="preferential-box">
              <el-button
                v-if="
                  [1, 2, 4].includes(type) &&
                    detail.liveStatus !== 4 &&
                    detail.playType === 1
                "
                type="primary"
                @click="toOpenCoupon()"
                >添加优惠券</el-button
              >
              <createCoupon ref="coupon" @child-event="queryListPreferential" />
              <div class="table-box">
                <p>发放记录</p>
                <el-table
                  key="preferentialData"
                  :data="preferentialData"
                  border
                  style="width: 100%"
                >
                  <el-table-column type="index" label="序号" width="100" />
                  <el-table-column
                    prop="couponId"
                    label="优惠券ID"
                    width="180"
                  />
                  <el-table-column prop="name" label="优惠券名称" />
                  <el-table-column prop="couponType" label="优惠券类型">
                    <template slot-scope="scope">
                      {{ couponTypeList[scope.row.couponType] }}
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="uTime" label="用券时间">
                </el-table-column> -->
                  <el-table-column label="领取要求">
                    <template slot-scope="scope">
                      {{ receiveRequirementList[scope.row.receiveRequirement] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="sendTotalNumber" label="发放数量" />
                  <el-table-column prop="sendGottenNumber" label="已领取数量" />
                  <el-table-column prop="sendUsedNumber" label="已用数量" />
                  <el-table-column prop="cTime" label="发放时间" />
                  <el-table-column prop="state" label="状态">
                    <template slot-scope="scope">
                      {{ stateList[scope.row.state] }}
                    </template>
                  </el-table-column>

                  <el-table-column
                    v-if="detail.liveStatus !== 4"
                    label="操作"
                    fixed="right"
                  >
                    <template slot-scope="scope">
                      <el-button
                        v-if="[1].includes(scope.row.state)"
                        type="text"
                        @click="sendcoupon(scope.row, 1)"
                        >发放</el-button
                      >
                      <el-button
                        v-if="[1].includes(scope.row.state)"
                        type="text"
                        @click="sendcoupon(scope.row, 2)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页组件-->
                <el-pagination
                  :total="queryParamsPreferential.total"
                  :current-page="queryParamsPreferential.current"
                  :page-size="queryParamsPreferential.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChangePreferential"
                  @current-change="handleCurrentChangePreferential"
                />
              </div>
            </div>
            <!-- 问卷 -->
            <div v-if="activeName === '5'" class="questionnaire-box">
              <el-button
                v-if="detail.liveStatus !== 4 && detail.playType === 1"
                type="primary"
                style="margin-bottom:10px;"
                @click="createQuestionnaire"
                >创建问卷</el-button
              >
              <el-table
                key="questionnaireList"
                :data="questionnaireList"
                fit
                highlight-current-row
                border
                style="width: 100%;"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column type="index" label="序号" />
                <el-table-column prop="title" label="问卷名称">
                  <template slot-scope="scope">
                    <span
                      class="button-text"
                      type="text"
                      @click="openView(scope.row)"
                      >{{ scope.row.title }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                  <template slot-scope="scope">
                    {{ scope.row.createTime }}
                  </template>
                </el-table-column>
                <el-table-column prop="startTime" label="发起时间" />
                <el-table-column prop="writeNum" label="填写人数" />
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    {{ questionnaireStatusList[scope.row.status] }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      v-if="[1].includes(scope.row.status) && operate !== 1"
                      type="text"
                      @click="question(scope.row, -1)"
                      >发起问卷</el-button
                    >
                    <el-button
                      v-if="[1].includes(scope.row.status)"
                      type="text"
                      @click="updateQuestion(scope.row, 1)"
                      >编辑</el-button
                    >
                    <el-button
                      v-if="[1, 2].includes(scope.row.status)"
                      type="text"
                      @click="updateQuestion(scope.row, 2)"
                      >复制</el-button
                    >
                    <el-button
                      v-if="[1, 2, 3].includes(scope.row.status)"
                      type="text"
                      @click="question(scope.row, -2)"
                      >删除</el-button
                    >
                    <el-button
                      v-if="[2].includes(scope.row.status) && operate !== 1"
                      type="text"
                      @click="question(scope.row, -3)"
                      >重发至互动区</el-button
                    >
                    <el-button
                      v-if="
                        [2, 3].includes(scope.row.status) && scope.row.writeNum
                      "
                      type="text"
                      @click="toExport(scope.row)"
                      >导出数据</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!--分页组件-->
              <el-pagination
                style="margin-top:10px;"
                :total="queryParamsQuestionnaire.total"
                :current-page="queryParamsQuestionnaire.current"
                :page-size="queryParamsQuestionnaire.size"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChangeQuestionnaire"
                @current-change="handleCurrentChangeQuestionnaire"
              />
            </div>
            <div v-if="activeName === '6'">
              <div class="marketing-code">
                <label>展示营销二维码</label>
                <el-switch
                  v-model="detail.openQw"
                  :active-value="1"
                  :inactive-value="2"
                  @change="changeOpenQw"
                />
              </div>
            </div>
            <div v-if="activeName === '7'">
              <rebroadcast
                :push-list="detail.pushList"
                :live-status="detail.liveStatus"
                :type="type"
                @addPush="addPush"
              />
            </div>
            <div v-if="activeName === '8'">
              <guestList :live-status="detail.liveStatus" />
            </div>
          </div>
        </div>
      </div>
      <div class="audience">
        <div class="audience-border">
          <div class="box-tab">
            <div class="tab-box">
              <div
                v-for="(item, index) in tabList"
                :key="item.index"
                class="tab-box_item"
                :class="{ 'active-tab': curTabIndex === index }"
                @click="tabChange(index, item)"
              >
                {{ item.name
                }}{{
                  index === 0
                    ? `(${messageCount ? messageCount : 0})`
                    : `(${onLineNum})`
                }}
              </div>
            </div>
          </div>
          <div v-if="curTabIndex === 0" class="audience-interaction">
            <div class="audience-button">
              <el-button
                v-for="(item, index) in buttonText"
                :class="{ selected: selectedButton === index }"
                size="small"
                plain
                @click="selected(index)"
                >{{ item }}</el-button
              >
            </div>

            <div
              v-if="
                detail.playType === 1 &&
                  detail.liveStatus !== 4 &&
                  [1, 2, 4].includes(type)
              "
              class="audience-box"
            >
              <div class="interaction-box">
                <div class="interaction-box_switch">
                  开放观众发言
                  <el-switch
                    v-model="isSpeak"
                    :inactive-value="2"
                    :active-value="1"
                    @change="setUp()"
                  />
                </div>
                <div class="interaction-box_switch">
                  开启审核
                  <el-switch
                    v-model="messageAudit"
                    :inactive-value="2"
                    :active-value="1"
                    @change="setUpTwo()"
                  />
                </div>
                <div class="interaction-box_switch">
                  隐藏用户昵称
                  <el-switch
                    v-model="detail.showNickname"
                    :inactive-value="1"
                    :active-value="2"
                    @change="changeShowNickname"
                  />
                </div>
                <div class="interaction-box_switch">
                  互动区仅展示投顾消息
                  <el-switch
                    v-model="interactType"
                    :inactive-value="1"
                    :active-value="2"
                    @change="setUpThree()"
                  />
                </div>
              </div>
              <el-checkbox
                v-model="isSendMessage"
                :true-label="1"
                :false-label="2"
                style="padding-bottom: 20px;"
                >在聊天框中发送禁言/开启发言通知</el-checkbox
              >
            </div>
            <div class="audience-chat-box">
              <!-- 聊天 -->
              <div class="chat-box">
                <!-- <div class="button-box" v-if="false" >
                  <el-button :class="{ 'selected': isAutofocus }" plain @click="changeFocus(1)">聊天室 </el-button>
                  <el-button :class="{ 'selected': !isAutofocus }" plain @click="changeFocus(2)">已删除列表</el-button>
                </div> -->
                <div
                  ref="discussArea"
                  class="content-box"
                  @scroll="handleScroll"
                >
                  <div
                    v-for="(item, index) in msgList"
                    v-if="item.type !== 3 && item.type !== 5 && item.type !== 4"
                    :key="item.id"
                    :class="[
                      'content-box_item',
                      item.type === 11
                        ? 'question-item'
                        : item.isOpen === 2
                        ? 'no-open-item'
                        : ''
                    ]"
                  >
                    <div class="content-box_item--title">
                      <img
                        :class="[item.userId ? 'pointer' : '']"
                        :src="
                          item.advisorId && item.imgUrl
                            ? item.imgUrl
                            : !item.advisorId && !item.userId
                            ? defaultImg
                            : item.imgUrl
                        "
                        alt=""
                      />
                      <span
                        style="margin-right: 5px;"
                        :class="!item.userId ? 'anchor' : ''"
                        >{{
                          !item.userId
                            ? !item.advisorId
                              ? "助教"
                              : "主播"
                            : ""
                        }}</span
                      >
                      <span class="name-time">
                        <span>
                          {{
                            !item.userId
                              ? item.advisorBasic
                                ? item.advisorBasic.name
                                : item.createUserVO
                                ? item.createUserVO.name
                                : ""
                              : item.userName
                          }}</span
                        >
                        <span class="time"
                          >{{
                            dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                          }}
                        </span></span
                      >
                      <i
                        v-if="
                          item.status === 1 &&
                            item.type === 1 &&
                            item.isForbid === 2 &&
                            [1, 2, 3].includes(detail.liveStatus) &&
                            [1, 4].includes(type) &&
                            !item.replyId &&
                            item.userId
                        "
                        class="el-icon-chat-dot-round"
                        @click="toReply(item)"
                      />
                      <i
                        v-if="
                          item.status === 1 &&
                            (item.type === 1 || item.type === 2) &&
                            [1, 2, 4].includes(type)
                        "
                        class="el-icon-delete"
                        @click="toDeleted(item)"
                      />
                      <el-button
                        v-if="item.status !== 1 && item.type === 1"
                        type="text"
                        style="color:#F56C6C ;"
                        >已删除</el-button
                      >
                      <el-button
                        v-if="
                          item.isForbid === 2 &&
                            item.type === 1 &&
                            item.userId &&
                            [1, 2, 4].includes(type) &&
                            item.status === 1
                        "
                        type="text"
                        style="color:#F56C6C ;"
                        @click="prohibition(item)"
                        >禁言</el-button
                      >
                      <el-button
                        v-if="
                          item.isOpen === 2 &&
                            item.type === 1 &&
                            item.userId &&
                            [1, 2, 4].includes(type) &&
                            item.status === 1
                        "
                        type="text"
                        @click="open(item)"
                        >公开</el-button
                      >
                      <el-button
                        v-if="
                          item.isOpen === 1 &&
                            item.type === 1 &&
                            item.userId &&
                            [1, 2, 4].includes(type) &&
                            item.status === 1
                        "
                        type="text"
                        @click="open(item)"
                        >取消公开</el-button
                      >
                      <el-button
                        v-if="
                          item.isForbid === 1 &&
                            item.type === 1 &&
                            item.userId &&
                            [1, 2, 4].includes(type) &&
                            item.status === 1
                        "
                        type="text"
                        @click="prohibition(item)"
                        >解除禁言</el-button
                      >
                    </div>
                    <div
                      v-if="
                        !item.productBasic && !item.content.startsWith('upImg-')
                      "
                      class="content-box_item--reply"
                      :class="{
                        'fw-600': !item.userId,
                        'questionnaire-color':
                          item.questionId && item.type === 11
                      }"
                      @click="
                        toQuestionnaire(
                          item.questionId && item.type === 11,
                          item.questionId
                        )
                      "
                    >
                      {{ item.content }}
                    </div>
                    <img
                      v-if="
                        item.type === 1 && item.content.startsWith('upImg-')
                      "
                      :src="item.content.replace('upImg-', '')"
                      class="content-img"
                    />
                    <div
                      v-if="item.productBasic"
                      class="content-box_item--product"
                      :class="{ 'fw-600': !item.userId }"
                    >
                      <div class="product-title">
                        <span>{{
                          settingToC ? "自定义" : item.productBasic.typeLabel
                        }}</span>
                        {{ item.productBasic.name }}
                      </div>
                      <div class="product-content">
                        {{ item.productBasic.content }}
                      </div>
                    </div>
                    <div v-if="item.replyId" class="reply-box">
                      <div class="userName">
                        {{ item.replyBasic.userName }}
                        {{
                          dayjs(item.replyBasic.replyTime).format(
                            "YYYY-MM-DD HH:mm:ss"
                          )
                        }}
                      </div>
                      <div>{{ item.replyBasic.content }}</div>
                    </div>
                    <div
                      v-if="item.status === -1"
                      class="reply-delete"
                      style="margin-top: 10px"
                    >
                      <span style="margin-right: 10px"
                        >操作人:{{ item.userAdminVO.name }}</span
                      >时间:{{ item.deleteTime }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="selectedButton === 0 && [1, 4].includes(type)"
                  class="send-box"
                >
                  <el-select
                    v-model="sendForm.productType"
                    style="width: 100%;margin-bottom: 20px;"
                    :disabled="
                      [4].includes(detail.liveStatus) || detail.playType === 2
                    "
                    clearable
                    placeholder="请选择产品类型"
                  >
                    <el-option
                      v-for="(item, index) in productListType"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-if="sendForm.productType && !settingToC"
                    v-model="sendForm.productListId"
                    style="width: 100%;margin-bottom: 20px;"
                    :disabled="
                      [4].includes(detail.liveStatus) || detail.playType === 2
                    "
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择产品"
                    :remote-method="remoteMethodProduct"
                    :loading="loadingProduct"
                    @change="changeItem"
                  >
                    <el-option
                      v-for="item in productList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-if="sendForm.productType && settingToC"
                    v-model="sendForm.productListId"
                    style="width: 100%;margin-bottom: 20px;"
                    :disabled="
                      [4].includes(detail.liveStatus) || detail.playType === 2
                    "
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择产品"
                    @change="changeItemToc"
                  >
                    <el-option
                      v-for="item in productList"
                      :key="item.productId"
                      :label="item.productName"
                      :value="item.productId"
                    />
                  </el-select>
                  <el-input
                    v-if="!sendForm.productType"
                    v-model="input"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    style="margin-bottom: 20px;"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                    :disabled="
                      [4].includes(detail.liveStatus) || detail.playType === 2
                    "
                    :placeholder="placeholderList[detail.liveStatus]"
                  />
                  <div class="send-box_btn">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-upload
                      class="avatar-uploader"
                      :show-file-list="false"
                      :on-success="handleSuccessSend"
                      :on-error="handleError"
                      :headers="headers"
                      list-type="picture"
                      action="/admin/common/file/upload"
                      :before-upload="beforeUploadSend"
                    >
                      <el-button type="primary" icon="el-icon-picture-outline"
                        >上传图片</el-button
                      >
                      <el-button
                        v-if="imageUrl"
                        type="text"
                        @click.stop="deleteImage"
                        >删除图片</el-button
                      >
                    </el-upload>
                    <el-button
                      v-if="!imageUrl"
                      type="success"
                      style="width: 80px;height: 38px;"
                      @click="send()"
                      >发 送</el-button
                    >
                    <el-button
                      v-if="imageUrl"
                      type="success"
                      style="width: 120px;height: 38px;"
                      @click="sendPhono()"
                      >发 送 图 片</el-button
                    >
                  </div>
                </div>
                <!-- 已删除列表 -->
                <!-- <div v-if="!isAutofocus" class="table-box">
              <el-table :data="deletedData" border style="width: 100%;margin-bottom:20px">
                <el-table-column type="index" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="userName" label="用户名称" width="180">
                  <template slot-scope="scope">
                    <span v-if="scope.row.productBasic"> {{ scope.row.userAdminVO.name }}</span>
                    <span v-else>{{ scope.row.userName ? scope.row.userName : scope.row.createUserVO ? scope.row.createUserVO.name :'' }} </span>

                </template>
                </el-table-column>
                <el-table-column prop="content" label="内容">
                </el-table-column>
                <el-table-column prop="createTime" label="发言时间">
                </el-table-column>
                <el-table-column prop="address" label="操作人">
                  <template slot-scope="scope">
                    {{ scope.row.userAdminVO.name }}
                </template>
                </el-table-column>
                <el-table-column prop="deleteTime" label="操作时间">
                </el-table-column>
              </el-table>
              <el-pagination
              :total="queryParams.total"
              :current-page="queryParams.current"
              :page-size="queryParams.size"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              />
            </div> -->
              </div>
            </div>
          </div>
          <div v-if="curTabIndex === 1" class="audience-title">
            <div
              v-for="(item, index) in audienceList"
              :key="index"
              class="audience-title_user"
              :class="{
                'audience-title_user_active-text': item.isOnline === 1
              }"
            >
              <img
                :src="item.img ? item.img : defaultImg"
                alt=""
                :class="{ 'audience-title_user_active': item.isOnline !== 1 }"
              />
              {{ item.userName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 禁言弹窗 -->
    <el-dialog
      title="禁言"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
    >
      <el-form :model="formProhibition">
        <el-form-item label="请选择禁言时效">
          <el-radio-group v-model="formProhibition.type">
            <el-radio :label="0">次日解禁</el-radio>
            <el-radio :label="1">一个月后解禁</el-radio>
            <el-radio :label="2">永久禁言</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelProhibition()">取 消</el-button>
        <el-button type="primary" @click="submitProhibition()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 回复弹窗 -->
    <el-dialog
      title="回复用户"
      :visible.sync="dialogFormVisibleReply"
      :modal-append-to-body="false"
      center
    >
      <el-form :model="formReply">
        <p>
          to： {{ clickItem.userName }}
          {{ dayjs(clickItem.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </p>
        <p>{{ clickItem.content }}</p>
        <el-form-item>
          <el-input
            v-model="formReply.context"
            type="textarea"
            placeholder="请输入回复内容"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 6 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelReply()">取 消</el-button>
        <el-button type="primary" @click="submitReply()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上架产品 -->
    <el-dialog
      :title="updateStatustitle[updateStatusType]"
      :visible.sync="dialogFormVisibleProduct"
      :modal-append-to-body="false"
    >
      <el-form v-loading="loading" :model="formProduct">
        <el-form-item
          v-if="updateStatusType === 3 && !settingToC"
          label="设置销售数量上限"
        >
          <el-switch v-model="formProduct.switch" @change="changeSwitch()" />
        </el-form-item>
        <el-form-item
          v-if="updateStatusType === 3 && !settingToC"
          label="输入可销售数量"
        >
          <el-input-number
            v-model="formProduct.num"
            :step="1"
            :precision="0"
            :min="0"
            :max="999999"
            :disabled="!formProduct.switch"
          />
        </el-form-item>
        <el-form-item v-if="updateStatusType === 9" label="输入可销售数量">
          <el-input-number
            v-model="formProduct.num"
            :step="1"
            :precision="0"
            :min="0"
            :max="999999"
          />
        </el-form-item>
        <el-form-item
          v-if="settingToC && [3, 4].includes(updateStatusType)"
          :label="
            updateStatusType === 3 ? '是否确定上架产品' : '是否确定下架产品'
          "
        />

        <el-form-item v-if="[3, 4].includes(updateStatusType)">
          <el-checkbox v-model="formProduct.isSendMessage"
            >在聊天框中发送{{
              updateStatusType === 4 ? "下架" : "上架"
            }}产品通知</el-checkbox
          >
        </el-form-item>
        <el-form-item v-if="updateStatusType === 10" label="推荐权重">
          <el-input-number
            v-model="formProduct.weight"
            :min="1"
            :max="10"
            :step="1"
            :precision="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="loading"
          @click="submitProduct()"
          >{{ submitProductText[updateStatusType] }}</el-button
        >
        <el-button @click="cancelProduct()">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="questionnaire-dialog"
      title="创建问卷"
      :visible.sync="dialogFormVisibleQuestionnaire"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancel()"
    >
      <div class="questionnaire-Title">
        <span>问卷标题</span>
        <el-input
          v-model="questionnaireTitle"
          size="small"
          placeholder="请输入问卷标题"
          maxlength="50"
          show-word-limit
        />
      </div>
      <div class="questionnaire-explain">
        <span
          ><el-button type="text" @click="isTip = !isTip">{{
            !isTip ? "添加问卷说明" : "取消问卷说明"
          }}</el-button></span
        >
        <el-input
          v-if="isTip"
          v-model="explain"
          size="small"
          placeholder="问卷说明"
          maxlength="100"
          show-word-limit
        />
      </div>

      <div class="questionnaire-container">
        <div class="questionnaire-preview">
          <div v-if="!titleQueryList.length" class="tips">
            请点击右侧题型进行添加
          </div>
          <draggable v-else v-model="titleQueryList">
            <transition-group>
              <!-- <div class="question-list"> -->
              <div
                v-for="(item, index) in titleQueryList"
                :key="index"
                class="quests"
              >
                <div class="quests-title">
                  <span>{{ index + 1 }} .</span>
                  <el-input
                    v-model="item.title"
                    size="small"
                    placeholder="请输入题目标题"
                    maxlength="200"
                    show-word-limit
                    clearable
                  />
                </div>
                <div class="quests-answer">
                  <!-- 单选题 or 多选题 -->
                  <div
                    v-if="item.type === 1 || item.type === 2"
                    class="answer-container-block"
                  >
                    <div
                      v-for="(v, k) in item.optionQueryList"
                      :key="k"
                      class="answer-container"
                    >
                      <input type="radio" disabled />
                      <el-input
                        v-model="item.optionQueryList[k].optionDesc"
                        class="optionQueryList"
                        size="small"
                        maxlength="200"
                        clearable
                      />
                      <i
                        class="el-icon-delete delete-item"
                        @click="deleteOptions(index, k)"
                      />
                    </div>
                    <div class="button-box">
                      <el-button
                        v-if="titleQueryList[index].type !== 5"
                        size="mini"
                        class="delBtn button-icon"
                        icon="el-icon-plus"
                        circle
                        @click="addOptions(index)"
                      />选项最多支持10个
                    </div>
                  </div>
                  <!-- 填空题 -->
                  <div v-if="item.type === 5" class="answer-container-block">
                    <div class="answer-container">
                      <el-input
                        disabled
                        type="textarea"
                        :rows="2"
                        resize="none"
                        maxlength="200"
                        clearable
                      />
                    </div>
                  </div>
                  <!-- 图片单选题 or 图片多选题 -->
                  <div
                    v-if="item.type === 3 || item.type === 4"
                    class="answer-container-block"
                  >
                    <div
                      v-for="(v, k) in item.optionQueryList"
                      :key="k"
                      class="answer-container"
                    >
                      <el-upload
                        :ref="`picUpload${index}${k}`"
                        action="/admin/common/file/upload"
                        list-type="picture-card"
                        :multiple="false"
                        :show-file-list="true"
                        :limit="1"
                        :file-list="v.fileList"
                        accept="image/png,image/jpg,image/jpeg"
                        :on-remove="
                          file => {
                            return handleRemove(file, index, k);
                          }
                        "
                        :on-success="
                          (response, file) => {
                            return handleSuccess(response, file, index, k);
                          }
                        "
                        :on-error="handleError"
                        :before-upload="beforeUpload"
                        :headers="headers"
                      >
                        <i class="el-icon-upload" />
                        <div slot="tip" class="el-upload__tip">
                          建议尺寸:800*450px,小于4M,支持jpg,gif,png,bmp
                        </div>
                      </el-upload>
                      <div class="picture-opts">
                        <input type="radio" disabled />
                        <el-input
                          v-model="
                            titleQueryList[index].optionQueryList[k].optionDesc
                          "
                          class="optionQueryList"
                          size="small"
                          maxlength="200"
                          clearable
                        />
                        <i
                          class="el-icon-delete delete-item"
                          @click="deleteOptions(index, k)"
                        />
                      </div>
                      <div
                        v-show="
                          titleQueryList[index].type !== 5 &&
                            k ===
                              titleQueryList[index].optionQueryList.length - 1
                        "
                        class="button-box"
                      >
                        <el-button
                          size="mini"
                          class="delBtn button-icon"
                          icon="el-icon-plus"
                          circle
                          @click="addOptions(index)"
                        />选项最多支持10个
                      </div>
                    </div>
                  </div>
                  <el-row class="questBtns">
                    <!-- <el-button v-if="titleQueryList[index].type !== 5 "  size="mini" class="delBtn" icon="el-icon-plus" circle @click="addOptions(index)"></el-button> -->
                    <el-button
                      size="mini"
                      class="delBtn"
                      icon="el-icon-document-copy"
                      circle
                      @click="copyQuest(item, index)"
                    />
                    <el-button
                      size="mini"
                      class="delBtn"
                      icon="el-icon-delete"
                      circle
                      @click="removeQuest(index)"
                    />
                  </el-row>
                </div>
              </div>
              <!-- </div> -->
            </transition-group>
          </draggable>
        </div>
        <div class="question-types-list">
          <div
            v-for="(item, index) in questionTypesList"
            :key="index"
            @click="addOpts(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-popover
          style="margin-right:10px"
          placement="bottom"
          width="200"
          title="微信扫一扫预览问卷"
          :disabled="!showQrCode"
          trigger="click"
        >
          <QrCode ref="QrCode" :is-show="0" @closePopover="closePopover" />
          <el-button slot="reference" type="text" @click="confirm(1)"
            >预览</el-button
          >
        </el-popover>
        <el-button type="primary" :loading="loadingButton" @click="confirm(2)"
          >确 定</el-button
        >
        <el-button @click="cancel()">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      width="450px"
      center
      :title="dialogVisibleTitle"
    >
      <iframe
        v-if="dialogVisible"
        :src="iframeUrl"
        width="100%"
        height="600px"
        frameborder="0"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  infoGet,
  uVideoControl,
  livePlayInfo,
  getPlayerSign,
  videoMessage,
  messageDelete,
  messageSend,
  addCommentBlack,
  cartUpdateStatus,
  updateSaleLimit,
  messageForbidden,
  cartRecommend,
  packageList,
  productMessage,
  removeCommentBlack,
  messageOpen,
  questionSave,
  questionList,
  questionUpdateStatus,
  questionDetails,
  questionExport,
  openMessAudit,
  messageCountApi,
  txonline,
  advisorMessageList,
  updateInteractType,
  updateQWParam,
  cartPush,
  cancelPush,
  showNickname
} from "@/api/videoLive";
import {
  getCouponList,
  couponStatusCheck,
  sendcoupon,
  sendcouponSend,
  sendcouponList,
  deleteCouponAndSend,
  liveSend
} from "@/api/coupon";
import { Client } from "@stomp/stompjs";
import dayjs from "dayjs";
import CountDown from "@/components/CountDown";
import createCoupon from "./components/createCoupon";
import { mapGetters, mapState } from "vuex";
import { getToken } from "@/utils/auth";
import draggable from "vuedraggable";
import QrCode from "@/components/QrCode";
import { timeFormat } from "@/utils/index";
import guestList from "./components/guestList.vue";
import rebroadcast from "./components/rebroadcast.vue";
import overUniteLive from "./components/overUniteLive.vue";
export default {
  components: {
    CountDown,
    draggable,
    QrCode,
    createCoupon,
    guestList,
    rebroadcast,
    overUniteLive
  },
  data() {
    return {
      placeholderList: {
        1: "请输入内容", // 直播中
        2: "请输入内容", // 未开始
        3: "请输入内容", // 已暂停
        4: "直播已结束，不支持发送消息" // 已结束
      },
      stateList: {
        0: "已失效", // 已失效'
        1: "未发放", // 直播中
        2: "待审核", // 未开始
        3: "已驳回", // 已暂停
        4: "已中止", // 已结束
        5: "已发放" // 发放中
      },
      loading: false,
      queryParams: {
        current: 1,
        size: 10,
        total: 1
      },
      queryParamsPreferential: {
        current: 1,
        size: 10,
        total: 1
      },
      queryParamsQuestionnaire: {
        current: 1,
        size: 10,
        total: 1
      },
      videoId: "live-video-player",
      value: "",
      questionnaireStatusList: {
        1: "未开始",
        2: "进行中",
        3: "已结束"
      },
      selectedButton: 0,
      detail: {
        advisorBasic: {
          name: ""
        },
        cartVOList: [{ id: 1 }]
      },
      id: null, // 视频id
      type: 1, // 1 投顾 2管理 3营销 4助教 5嘉宾
      stompClient: null,
      userId: null,
      editableTabs: {},
      audienceList: [],
      activeName: "3",
      curTabIndex: 0,
      isAutofocus: true,
      input: "",

      isSpeak: 1,
      messageAudit: 1,
      isSendMessage: 2,
      form: {},
      formProhibition: {
        type: 0
      },
      dialogFormVisible: false,
      clickItem: {},
      dialogFormVisibleReply: false,
      formReply: {
        context: ""
      },
      deletedData: [],
      productTypeList: {
        1: "观点包",
        2: "单篇观点",
        3: "单个视频",
        4: "视频课程",
        5: "图文直播间",
        6: "分期直播",
        7: "组合",
        8: "股票池",
        9: "交易圈",
        21: "自定义"
      },
      productListType: [],
      formProduct: {
        switch: false,
        num: 0,
        isSendMessage: false,
        weight: 0
      },
      dialogFormVisibleProduct: false,
      updateStatusType: null, // 3 购物车上架 5购物车下架 9 修改可销售数量
      updateStatustitle: {
        3: "上架产品",
        9: "修改可销售数量",
        4: "确定下架产品",
        10: "推荐"
      },
      submitProductText: {
        3: "确定上架",
        9: "确定",
        4: "确定下架",
        10: "确定推荐"
      },
      nowDate: dayjs(),
      formPreferential: {},
      couponList: [],
      preferentialData: [],
      couponTypeList: {
        1: "体验券",
        2: "折扣券",
        3: "满减券"
      },
      receiveRequirementList: {
        0: "无要求",
        1: "关注主播",
        2: "评论互动"
      },
      sendForm: {
        productType: "",
        productListId: null
      },
      loadingProduct: false,

      renderPlayer: false,
      pullBuffer: false,
      playCtx: null,
      stompClient: null,
      hasBack: false,
      backIndex: 0,
      libraryList: [],
      backArr: [],
      backPlayer: false,
      wsMessages: [],
      cacheTop: 0,
      current: 1,
      total: 9999,
      wsLoading: false,
      replyID: null,
      replyUserName: "",
      libraryList: [],
      backIndex: 0,
      questionnaireList: [
        {
          name: "直播问卷任务A",
          time: "2024-05-24 16:25:10",
          num: "280",
          status: "未开始"
        }
      ],
      dialogFormVisibleQuestionnaire: false,
      questionnaireTitle: "",
      explain: "",
      titleQueryList: [],
      questionTypesList: [
        { name: "单选题", type: 1 },
        { name: "多选题", type: 2 },
        { name: "图片单选题", type: 3 },
        { name: "图片多选题", type: 4 },
        { name: "填空题", type: 5 }
      ],
      headers: {
        Authorization: "Bearer " + getToken(),

        "X-File-Size": 0
      },
      questionId: null,
      showQrCode: false,
      loadingButton: false,
      isTip: false,
      operate: 0,
      tabList: [{ name: "互动区", id: 0 }, { name: "观众", id: 1 }],
      buttonText: [
        "全部消息",
        "投顾消息",
        "已删除列表"
        // "用户消息",
        // "直播消息",
      ],
      isShow: false,
      defaultImg: require("@/assets/images/defaultAvatar/assistant.png"),
      userDefault: require("@/assets/images/defaultAvatar/student.png"),
      messageCount: 0,
      dialogVisible: false,
      iframeUrl: "", // 你想在iframe中打开的网址
      dialogVisibleTitle: "",
      debounceTimer: false, // 用于存储防抖的定时器
      onLineNum: 0,
      intervalId: null, // 用来存储定时器的变量，以便稍后清除
      txonlineNum: 0, // 腾讯云最新在线人数
      imageUrl: "",
      showDeleteIcon: false,
      isGetNum: true,
      loadingList: false,
      interactType: "", // 互动类型 1 全部互动 2 主播内容
      currentIndex: 1, // 分页
      hisLastMessageId: "", // 通过历史接口获取的的数据条数
      hisHasNextPage: true
    };
  },
  created() {},
  async mounted() {
    // this.playLiveStream();
    // try {
    if (this.$route.query.id) {
      this.id = Number(this.$route.query.id);
      this.type = Number(this.$route.query.type);
      this.operate = this.$route.query.operate
        ? Number(this.$route.query.operate)
        : 0;
      const ret = await this.getDetail(this.id);
      if (!ret) return;
      this.getConnectConfig(this.id);
      this.getHistoryMessage(this.id);
      // this.getMessageCount()
      if ([1, 4, 5].includes(this.type)) {
        this.userId = this.$store.state.user.user.advisorInfo
          ? this.$store.state.user.user.advisorInfo.id
          : this.$store.state.user.user.user.id;
      } else {
        this.userId = this.$store.state.user.user.user.id;
      }

      if (this.type === 5) {
        this.timerGetUniteLiveUser();
      }
    }
    // } catch (error) {
    //   console.log('error',error)
    // }
  },
  computed: {
    ...mapGetters(["user"]),
    beforeImgUrl() {
      const { imgUrl } = this.detail;
      // 未开始或者已结束(已结束还需加一个无精彩回放的判断)
      // 有暖场且是图片
      return imgUrl;
    },
    renderStatus() {
      const { fileId, isGenerateRecord } = this.detail;
      if (this.detail.liveStatus == 2) return "before-img";

      if (this.detail.liveStatus == 1) {
        const element = document.getElementById("play-video");
        if (!element) {
          this.getDetail(this.id);
        }
        return "living-player";
      }

      if (this.detail.liveStatus == 3) {
        if (fileId) {
          const element = document.getElementById("play-video");
          if (element) {
            element.remove();
          }
          return "suspend-player";
        }
        return "before-img";
      }
      if (this.detail.liveStatus == 4) {
        if (fileId && isGenerateRecord == 1) return "back-player";
      }
    },
    ...mapState({
      settingToC: state => state.settings.settingToC
    }),
    msgList() {
      return this.wsMessages.slice(0, this.currentIndex * 10);
    }
  },
  watch: {
    backIndex: {
      async handler(newVal) {
        if (newVal) {
          if (newVal < this.libraryList.length) {
            if (!this.backArr[newVal]) {
              const { data } = await getPlayerSign({
                fileId: this.libraryList[newVal]
              });
              this.backArr[newVal] = {
                appID: data.appId,
                fileID: data.fileId,
                psign: data.psign
              };
            }
            this.playCtx && this.playCtx.loadVideoByID(this.backArr[newVal]);
          } else {
            this.backIndex = 0;
          }
        }
      }
    }
  },
  beforeDestroy() {
    this.stompClient && this.stompClient.deactivate();
    if (this.playCtx) {
      this.playCtx.dispose();
      this.playCtx = null;
    }
    if (this.stompClient) {
      this.stompClient.deactivate();
      this.stompClient = null;
    }
    // this.stopPolling();
  },
  methods: {
    dayjs,
    timeFormat,
    isValidImageUrl(url) {
      return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
    },
    handleSuccessSend(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      setTimeout(() => {
        this.imageUrl = response.data.url;
      }, 100);
      this.$notify({
        title: "图片上传成功",
        type: "success",
        duration: 2500
      });
    },
    beforeUploadSend(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传只支持jpeg格式和png格式!");
        return false;
      }
      const isLt = file.size / 1024 < 1024;
      if (!isLt) {
        this.$message.error("上传文件大小不能超过 1MB!");
      }
      this.headers["X-File-Size"] = file.size;
      return isLt;
    },
    deleteImage() {
      // 在这里实现删除图片的逻辑
      this.imageUrl = "";
    },
    getMessageCount() {
      const data = {
        videoId: this.id
      };
      messageCountApi(data).then(res => {
        if (res.code === 0) {
          this.messageCount = res.data;
        }
      });
    },
    // 互动判断
    isMessageAudit(val) {
      const time1 = dayjs(val.createTime).format("YYYY-MM-DD HH:mm:ss");
      if (
        this.detail.messageAudit === 2 &&
        this.detail.messageAuditTime &&
        dayjs(time1).isBefore(dayjs(this.detail.messageAuditTime))
      ) {
        return true;
      } else if (
        this.detail.messageAudit === 1 &&
        !this.detail.messageAuditTime
      ) {
        return true;
      } else {
        return false;
      }
    },
    open(val) {
      if (this.debounceTimer) return;
      this.$confirm(`您确定${val.isOpen === 1 ? "取消公开" : "公开"}评论?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.debounceTimer = true;
          const data = {
            isOpen: val.isOpen === 1 ? 2 : 1,
            messageId: val.id
          };
          messageOpen(data).then(res => {
            if (res.code === 0) {
              this.$message({
                message: "操作成功！",
                showClose: false,
                type: "success"
              });
              this.current = 1;
              this.currentIndex = 1;
              this.hisLastMessageId = "";
              this.hisHasNextPage = true;
              this.wsMessages = [];
              if (this.selectedButton === 1) {
                this.getAdvisorMessageList();
              } else {
                this.getHistoryMessage(this.id);
              }
              this.debounceTimer = false;
            }
          });
        })
        .catch(() => {
          this.debounceTimer = false;
        });
    },
    handleSizeChange(val) {
      this.$set(this.queryParams, "size", val);
      this.$set(this.queryParams, "current", 1);
      this.queryList();
    },
    handleCurrentChange(val) {
      this.$set(this.queryParams, "current", val || 1);
      this.queryList();
    },
    handleSizeChangePreferential(val) {
      this.$set(this.queryParamsPreferential, "size", val);
      this.$set(this.queryParamsPreferential, "current", 1);
      this.queryListPreferential();
    },
    handleCurrentChangePreferential(val) {
      this.$set(this.queryParamsPreferential, "current", val || 1);
      this.queryListPreferential();
    },
    handleSizeChangeQuestionnaire(val) {
      this.$set(this.queryParamsQuestionnaire, "size", val);
      this.$set(this.queryParamsQuestionnaire, "current", 1);
      this.getQuestionList();
    },
    handleCurrentChangeQuestionnaire(val) {
      this.$set(this.queryParamsQuestionnaire, "current", val || 1);
      this.getQuestionList();
    },
    queryList() {
      this.queryParams.videoId = this.id;
      this.queryParams.status = -1;
      this.queryParams.size = 999;
      videoMessage(this.queryParams).then(data => {
        this.wsMessages = data.data.list;
        this.queryParams.total = data.data.total;
      });
    },
    queryListPreferential() {
      this.queryParamsPreferential.liveId = this.id;
      sendcouponList(this.queryParamsPreferential).then(data => {
        this.preferentialData = data.data.list;
        this.queryParamsPreferential.total = data.data.total;
      });
    },
    handleScroll(event) {
      requestAnimationFrame(async () => {
        const { scrollTop, clientHeight, scrollHeight } = event.target;
        if (scrollTop + clientHeight + 10 >= scrollHeight) {
          console.log(
            "加载页",
            this.current,
            this.selectedButton,
            this.hisHasNextPage
          );
          // 滚动条到达底部，触发懒加载
          if (this.currentIndex * 10 < this.wsMessages.length) {
            this.currentIndex++;
          } else if (this.selectedButton === 1) {
            await this.getAdvisorMessageList();
          } else if (this.hisHasNextPage) {
            this.current++;
            await this.getHistoryMessage(this.id);
          } else {
            return; // 如果没有更多数据，直接返回
          }
        }
      });
    },
    onSubmit() {
      if (!this.formPreferential.couponId) {
        return this.$message({
          message: "请选择优惠券",
          showClose: false,
          type: "error"
        });
      }
      if (!this.formPreferential.sendTotalNumber) {
        return this.$message({
          message: "请填写发放数量",
          showClose: false,
          type: "error"
        });
      }
      if (
        !this.formPreferential.receiveRequirement &&
        this.formPreferential.receiveRequirement !== 0
      ) {
        return this.$message({
          message: "请选择领取要求",
          showClose: false,
          type: "error"
        });
      }
      this.formPreferential.sendCh = 3;
      this.formPreferential.liveId = this.id;
      sendcouponSend(this.formPreferential).then(res => {
        if (res.code === 0) {
          this.$message({
            message: "发放成功",
            showClose: false,
            type: "success"
          });
          this.formPreferential = {};
          this.queryListPreferential();
        } else {
          this.$message({
            message: "发放失败",
            showClose: false,
            type: "error"
          });
        }
      });
    },
    selected(index) {
      this.selectedButton = index;
      if (index === 1) {
        this.wsMessages = [];
        this.current = 1;
        this.hisLastMessageId = "";
        this.hisHasNextPage = true;
        this.currentIndex = 1;
        this.getAdvisorMessageList();
      } else {
        this.wsMessages = [];
        this.hisLastMessageId = "";
        this.hisHasNextPage = true;
        this.current = 1;
        this.currentIndex = 1;
        this.getHistoryMessage(this.id);
      }
    },
    // 获取主播消息
    getAdvisorMessageList() {
      const data = {
        advisorId: this.detail.advisorBasic.id,
        size: 20,
        type: 3,
        id: this.id,
        lastId:
          this.wsMessages.length > 0
            ? this.wsMessages[this.wsMessages.length - 1].id
            : null
      };
      advisorMessageList(data).then(res => {
        if (res && res.code === 0) {
          if (this.wsMessages.length > 0) {
            this.currentIndex++;
          } else {
            this.currentIndex = 1;
          }
          this.hisHasNextPage = res.data.hasNext;
          this.wsMessages = this.wsMessages.concat(res.data.list);
        }
      });
    },
    async getDetail(id) {
      const res = await infoGet({ id: this.id });
      if (res && res.code === 0) {
        this.detail = res.data;
        if (
          this.detail.advisorBasic.deptName !==
            this.$store.state.user.user.user.deptName &&
          this.$store.state.user.user.user.deptId !== "1"
        ) {
          // 不是一个部门的不让查看 总部的可以查看所有
          this.$alert("暂无查看权限！", "", {
            confirmButtonText: "确定",
            callback: action => {
              this.$router.go(-1);
            }
          });
          return false;
        }
        if (this.settingToC && !this.productListType.length) {
          this.productListType.push({ id: 21, name: "自定义" });
          this.productList = JSON.parse(JSON.stringify(this.detail.cartVOList));
        } else if (!this.settingToC && !this.productListType.length) {
          this.productListType.push({ id: 1, name: "观点包" });
          this.remoteMethodProduct("");
        }
        this.isSpeak = this.detail.isSpeak;
        this.messageAudit = this.detail.messageAudit;
        this.interactType = this.detail.interactType;
        if (this.detail.playType === 2) {
          this.detail.liveStatus = 1;
        }
        const { beforeLiveUrl, liveStatus, fileId, playType } = this.detail;
        if (this.renderStatus == "living-player" && playType === 2) {
          this.initPlayer((await getPlayerSign({ fileId })).data);
        }

        if (this.renderStatus == "living-player" && playType === 1) {
          this.initPlayer((await livePlayInfo({ id })).data);
        }

        if (this.renderStatus == "back-player") {
          this.libraryList = fileId.split(",");
          const { data } = await getPlayerSign({
            fileId: this.libraryList[0],
            audioVideoType:
              this.detail.transStatus === 2 ? "RawAdaptive" : "Original"
          });
          this.hasBack = true;
          this.backArr[0] = {
            appID: data.appId,
            fileID: data.fileId,
            psign: data.psign
          };
          this.initPlayer(data);
        }
        if (liveStatus == 4) this.pullBuffer = true;
        return true;
      }
      return false;
    },
    async getConnectConfig(id) {
      if (!this.stompClient) {
        this.connect({
          brokerUrl:
            process.env.NODE_ENV === "development"
              ? "ws://8.138.144.54:8080/tgim/chat"
              : `${location.protocol === "http:" ? "ws://" : "wss://"}${
                  location.host
                }/tgim/chat`,
          adminUserTopic: `/admin/user/topic/${id}`,
          chatSubscribeDest: `/sub/video/${id}`,
          notifySubscribeDest: `/sub/notify/${id}`,
          videoOnlineNotifyTopic: `/admin/audience/${id}`,
          id
        });
      }
    },
    playLiveStream() {
      const videoElement = this.$refs.videoElement;
      if (videoElement) {
        videoElement.src = "";
      }
    },
    // websock 链接
    connect(config) {
      const fromUser = this.userId;
      let {
        brokerUrl,
        adminUserTopic,
        chatSubscribeDest,
        notifySubscribeDest,
        videoOnlineNotifyTopic,
        id
      } = config;
      const sessionId = Math.random()
        .toString(36)
        .substring(2, 8);
      if (window.location.protocol === "http:") {
        console.log("当前URL是HTTP");
      } else if (window.location.protocol === "https:") {
        console.log("当前URL是HTTPS");
        brokerUrl = brokerUrl.replace("ws://", "wss://");
      }
      this.stompClient = new Client({
        brokerURL: brokerUrl,
        connectHeaders: {
          sessionId,
          productType: 3, // 视频ProductType=3
          Authorization: "Bearer " + this.$store.state.user.token,
          productId: id
        },
        debug: function(str) {
          console.log("debug: " + str);
        },
        reconnectDelay: 5000,
        heartbeatIncoming: 10000,
        heartbeatOutgoing: 10000,
        discardWebsocketOnCommFailure: true
      });
      this.stompClient.onConnect = async frame => {
        console.log("链接成功");
        console.log("Connected: ", frame);
        this.stompClient &&
          this.stompClient.subscribe(adminUserTopic, msg => {
            this.handleCommonMsg(msg);
          });
        this.stompClient &&
          this.stompClient.subscribe(chatSubscribeDest, msg => {
            this.handleHistory(msg);
          });
        this.stompClient &&
          this.stompClient.subscribe(notifySubscribeDest, msg => {
            this.notify(msg);
          });
        this.stompClient &&
          this.stompClient.subscribe(videoOnlineNotifyTopic, msg => {
            this.notify(msg);
          });
        // 查询在线人员列表
        this.stompClient &&
          this.stompClient.publish({
            destination: `/admin/chat/listMember/${this.id}`
          });
      };
      this.stompClient.onStompError = error => {
        console.log("onStompError", error);
      };
      this.stompClient.onDisconnect = error => {
        console.log("onDisconnect", error);
      };
      this.stompClient.onWebSocketClose = error => {
        console.log("onWebSocketClose", error);
      };
      this.stompClient.activate();
    },
    // 解析返回的值
    handleCommonMsg(msg) {
      try {
        const { code, message, type, data } = JSON.parse(msg.body);
        if (code) {
          this.$message.error(msg);
          return;
        }
        console.log(data, "第一次获取观众列表");
        if (data.list !== null && data.list.length) {
          this.audienceList = data.list;
          this.onLineNum = data.onLineTotal;
          // 使用sort方法将status为1的对象排在前面
          this.audienceList.sort((a, b) =>
            a.isOnline === 1 ? -1 : b.isOnline === 1 ? 1 : 0
          );
        } else {
          this.audienceList = [];
          this.onLineNum = 0;
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    handleMsgData(arr) {
      const arrR = arr.reverse();
      if (arr && this.selectedButton === 0) {
        this.wsMessages = arrR.concat(this.wsMessages);
      } else if (this.selectedButton === 1) {
        if ([2, 4].includes(this.type)) {
          const list = arrR.filter(
            item => ![10, 7, 6].includes(item.type) && !item.userId
          );
          this.wsMessages = list.concat(this.wsMessages);
        } else {
          const list = arrR.filter(item => !item.userId);
          this.wsMessages = arrR.concat(this.wsMessages);
        }
      }
      this.messageCount =
        arrR.length && arrR[arrR.length - 1].messageCount
          ? arrR[arrR.length - 1].messageCount
          : this.messageCount;
    },
    handleHistory(msg) {
      try {
        const { code, message, type, data } = JSON.parse(msg.body);
        if (code) {
          this.$message.error(msg);
          return;
        }
        let arr = [];
        if (Array.isArray(data)) {
          arr = data;
        } else {
          arr.push(data);
        }
        this.handleMsgData(arr);
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    notify(msg) {
      try {
        const { data } = JSON.parse(msg.body);
        console.log(data, "===notify");
        // 最新直播状态
        if (
          data &&
          data.type === 2 &&
          (data.data === "1" ||
            data.data === "2" ||
            data.data === "3" ||
            data.data === "4")
        ) {
          this.detail.liveStatus = Number(data.data);
        }
        // 用户进出
        if (data && data.type === 12) {
          console.log(data, "===用户进出");
          if (data.onlineUser.isOnline === 1) {
            let foundItem = null;
            for (let i = 0; i < this.audienceList.length; i++) {
              if (
                this.audienceList[i].userId === data.onlineUser.userId &&
                this.audienceList[i].sessionId === data.onlineUser.sessionId
              ) {
                foundItem = this.audienceList[i];
                break;
              }
            }
            if (foundItem === null) {
              this.audienceList.unshift(data.onlineUser);
            } else {
              for (let i = 0; i < this.audienceList.length; i++) {
                if (
                  this.audienceList[i].userId === data.onlineUser.userId &&
                  this.audienceList[i].sessionId === data.onlineUser.sessionId
                ) {
                  this.audienceList[i].isOnline = 1;
                  break; // 结束循环
                }
              }
            }
          } else {
            for (let i = 0; i < this.audienceList.length; i++) {
              if (
                this.audienceList[i].userId === data.onlineUser.userId &&
                this.audienceList[i].sessionId === data.onlineUser.sessionId
              ) {
                this.audienceList[i].isOnline = 2;
                break; // 结束循环
              }
            }
            console.log(this.audienceList, "0131");
          }
          let count = 0;
          for (let i = 0; i < this.audienceList.length; i++) {
            if (this.audienceList[i].isOnline === 1) {
              count++;
            }
          }
          this.onLineNum = count;
          this.audienceList.sort((a, b) =>
            a.isOnline === 1 ? -1 : b.isOnline === 1 ? 1 : 0
          );
        }
      } catch (error) {}
    },
    controlLive(option) {
      const label = {
        1: "暂停",
        2: "取消",
        3: "开始"
      };
      this.$confirm(`确定${label[option]}直播吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await uVideoControl({ id: this.detail.id, option });
        if (!res.code) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.getDetail(this.id);
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    },

    async initPlayer(sign) {
      if (this.playCtx) {
        this.playCtx.dispose();
        this.playCtx = null;
      }
      this.renderPlayer = true;

      const baseConfig = {
        autoplay: true,
        poster: this.detail.imgUrl,
        muted: true
      };

      const video = document.createElement("video");
      video.setAttribute("id", "play-video");
      video.setAttribute("playsinline", "true");
      video.setAttribute("webkit-playsinline", "true");

      await this.$nextTick(() => {
        this.$refs.videoPlayer.appendChild(video);
        console.log(sign, "录播获取数据");
        if (sign.appId) {
          if (this.renderStatus == "back-player") {
            baseConfig.autoplay = false;
          }
          const { appId: appID, fileId: fileID, psign } = sign;
          this.playCtx = window.TCPlayer("play-video", {
            ...baseConfig,
            appID,
            fileID,
            psign,
            loop: !this.hasBack
          });
        } else {
          const { playUrl } = sign;
          this.playCtx = window.TCPlayer("play-video", baseConfig);
          playUrl && this.playCtx.src(playUrl);
        }

        this.playCtx.on("ended", () => {
          if (this.hasBack && this.libraryList.length) {
            this.backIndex++;
          }
        });
      });
    },
    async getHistoryMessage(id) {
      if (this.wsLoading) return;
      this.wsLoading = true;
      const res = await videoMessage({
        videoId: id,
        current: 1,
        size: 10,
        messageId: this.hisLastMessageId,
        status: this.selectedButton === 2 ? -1 : 1
      });
      if (!res.code) {
        this.currentIndex++;
        if (!res.data.list || res.data.list.length < 10) {
          this.hisHasNextPage = false;
        }
        this.hisLastMessageId =
          res.data.list && res.data.list.length
            ? res.data.list[res.data.list.length - 1].id
            : "";
        this.wsMessages = this.wsMessages.concat(res.data.list);
        await this.$nextTick(() => {
          if (this.current == 1 && this.$refs.discussArea) {
            this.cacheTop = this.$refs.discussArea.scrollHeight;
            this.$refs.discussArea.scrollTop = 0;
          }
          if (this.isGetNum) {
            this.getMessageCount();
          }
          this.wsLoading = false;
        });
      }
    },
    replyTo(item) {
      this.replyUserName = `回复 ${item.userName || item.userId} `;
      this.replyID = item.id;
    },
    handleClick() {
      if (this.activeName === "4") {
        this.reqCouponList();
        this.queryListPreferential();
      }
      if (this.activeName === "1" && !this.settingToC) {
        this.remoteMethodProduct("");
      }
      if (this.activeName === "5") {
        this.getQuestionList();
      }
    },
    tabChange(index, item) {
      this.curTabIndex = index;
    },
    changeFocus(type) {
      // type == 1 聊天室 type == 2 已删除聊天
      this.isAutofocus = !this.isAutofocus;
      if (type == 2) {
        this.isAutofocus = false;
        this.queryList();
      } else {
        this.isAutofocus = true;
      }
    },
    prohibition(item) {
      if (item.isForbid === 1) {
        this.$confirm(`您确定${item.isForbid === 2 ? "禁言" : "取消禁言"}?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            removeCommentBlack({
              userPhone: item.userId,
              productId: item.videoId,
              productType: 3
            }).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消禁言成功",
                  showClose: false,
                  type: "success"
                });
                this.current = 1;
                this.hisLastMessageId = "";
                this.hisHasNextPage = true;
                this.wsMessages = [];
                this.currentIndex = 1;
                if (this.selectedButton === 1) {
                  this.getAdvisorMessageList();
                } else {
                  this.getHistoryMessage(this.id);
                }
              }
            });
          })
          .catch(() => {});
      } else {
        this.dialogFormVisible = true;
        this.clickItem = JSON.parse(JSON.stringify(item));
      }
    },
    // 删除评论
    toDeleted(item) {
      this.$confirm(`您确定删除评论?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const ids = [];
          ids.push(item.id);
          messageDelete({ id: this.id, ids }).then(async res => {
            if (res.code === 0) {
              this.$message({
                message: "删除成功",
                showClose: false,
                type: "success"
              });
              this.current = 1;
              this.currentIndex = 1;
              this.hisLastMessageId = "";
              this.hisHasNextPage = true;
              this.wsMessages = [];
              this.messageCount = res.data;
              this.isGetNum = false;
              if (this.selectedButton === 1) {
                await this.getAdvisorMessageList();
              } else {
                await this.getHistoryMessage(this.id);
              }
              this.isGetNum = true;
              // this.getMessageCount()
            }
          });
        })
        .catch(() => {});
    },
    toReply(item) {
      this.dialogFormVisibleReply = true;
      this.clickItem = JSON.parse(JSON.stringify(item));
    },
    send() {
      if (this.sendForm.productType) {
        if (!this.sendForm.productListId) {
          return this.$message({ type: "error", message: "请选择发送产品" });
        }
        const data = {
          id: this.sendForm.productListId,
          type: this.sendForm.productType,
          videoId: this.id,
          name: this.settingToC
            ? this.clickItem.productName
            : this.clickItem.name
        };
        productMessage(data).then(res => {
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "发送成功"
            });
            this.input = "";
            this.sendForm.productType = null;
            this.sendForm.productListId = null;
          }
        });
      } else {
        if (!this.input.trim()) {
          return this.$message({
            type: "error",
            message: "请填写发送内容"
          });
        }
        const data = {
          text: this.input,
          type: 1,
          groupId: this.id,
          from: this.userId
        };
        messageSend(data).then(res => {
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "发送成功"
            });
            this.input = "";
          }
        });
      }
    },
    sendPhono() {
      const data = {
        text: "upImg-" + this.imageUrl,
        type: 1,
        groupId: this.id,
        from: this.userId
      };
      messageSend(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "发送图片成功"
          });
          this.imageUrl = "";
        }
      });
    },
    changeItem(e) {
      let item = null;
      for (let index = 0; index < this.productList.length; index++) {
        if (this.productList[index].id === e) {
          item = this.productList[index];
        }
      }
      this.clickItem = item;
    },
    changeItemToc(e) {
      let item = null;
      for (let index = 0; index < this.productList.length; index++) {
        if (this.productList[index].productId === e) {
          item = this.productList[index];
        }
      }
      this.clickItem = item;
    },
    cancelProhibition() {
      this.dialogFormVisible = false;
      this.formProhibition.type = 0;
    },
    submitProhibition() {
      if (![0, 1, 2].includes(this.formProhibition.type)) return;
      const data = {
        productId: this.id,
        productType: 3, // 3 直播 41 交易圈
        type: this.formProhibition.type,
        userName: this.clickItem.userName,
        userPhone: this.clickItem.phone,
        scope: 2,
        content: "无"
      };
      addCommentBlack(data).then(res => {
        if (res.code === 0) {
          this.$message({
            message: "禁言成功",
            showClose: false,
            type: "success"
          });
          this.clickItem = {};
          this.formProhibition.type = 0;
          this.current = 1;
          this.currentIndex = 1;
          this.hisLastMessageId = "";
          this.hisHasNextPage = true;
          this.wsMessages = [];
          if (this.selectedButton === 1) {
            this.getAdvisorMessageList();
          } else {
            this.getHistoryMessage(this.id);
          }
          this.dialogFormVisible = false;
        }
      });
    },
    cancelReply() {
      this.dialogFormVisibleReply = false;
      this.formReply.context = "";
    },
    submitReply() {
      if (!this.formReply.context) return;
      const data = {
        text: this.formReply.context,
        type: 6,
        groupId: this.id,
        from: this.userId,
        reply: this.clickItem.id,
        replyUserId: this.clickItem.userId
      };
      messageSend(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "发送成功"
          });
          this.formReply.context = "";
          if (this.clickItem.isOpen === 2) {
            const data = {
              isOpen: 1,
              messageId: this.clickItem.id
            };
            messageOpen(data).then(res => {
              if (res.code === 0) {
                this.current = 1;
                this.currentIndex = 1;
                this.hisLastMessageId = "";
                this.hisHasNextPage = true;
                this.wsMessages = [];
                if (this.selectedButton === 1) {
                  this.getAdvisorMessageList();
                } else {
                  this.getHistoryMessage(this.id);
                }
              }
            });
          }
          this.dialogFormVisibleReply = false;
        }
      });
    },
    updateStatus(val, type) {
      this.clickItem = val;
      // type 3 购物车上架 5购物车下架 9 修改可销售数量
      if (type === 11) {
        this.$confirm(`您确定取消推荐?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            const data = {
              videoId: this.id,
              productId: this.clickItem.productId,
              productType: this.clickItem.productType,
              weight: 0
            };
            cartRecommend(data).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消推荐成功",
                  showClose: false,
                  type: "success"
                });
                this.getDetail(this.id);
              }
            });
          })
          .catch(() => {});
      } else {
        this.updateStatusType = type;
        this.dialogFormVisibleProduct = true;
        if (type === 9) {
          this.formProduct.num = JSON.parse(JSON.stringify(val.saleLimit));
        }
        // 推荐
        if (type === 10) {
          this.formProduct.weight = JSON.parse(JSON.stringify(val.weight));
        }
      }
    },
    setCartPush(item) {
      this.$confirm(`是否确定推送产品?`, {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(async () => {
          const ret = await cartPush({
            id: this.id,
            productId: item.productId,
            productType: item.productType
          });
          if (ret && ret.code === 0) {
            this.$message({
              message: "推送成功",
              showClose: false,
              type: "success"
            });
          }
        })
        .catch(() => {});
    },
    changeSwitch() {
      if (!this.formProduct.switch) {
        this.formProduct.num = 0;
      }
    },
    cancelProduct() {
      this.formProduct = {
        switch: true,
        num: 0,
        isSendMessage: false,
        weight: 0
      };
      this.loading = false;
      this.dialogFormVisibleProduct = false;
    },
    submitProduct() {
      if (this.loading) return;
      if (this.updateStatusType === 3) {
        if (
          this.formProduct.switch &&
          !this.formProduct.num &&
          !this.settingToC
        ) {
          return this.$message({
            message: "请填写销售数量",
            showClose: false,
            type: "error"
          });
        }
        this.loading = true;
        const data = {
          id: this.id,
          status: 3,
          isSendMessage: this.formProduct.isSendMessage ? 1 : 2,
          num:
            this.formProduct.switch && !this.settingToC
              ? this.formProduct.num
              : null,
          productId: this.clickItem.productId,
          productType: this.clickItem.productType
        };
        cartUpdateStatus(data).then(res => {
          if (res.code === 0) {
            this.$message({
              message: "上架成功",
              showClose: false,
              type: "success"
            });
            this.loading = false;
            this.getDetail(this.id);
            this.cancelProduct();
          }
        });
      } else if (this.updateStatusType === 4) {
        this.loading = true;
        // 购物车下架
        const data = {
          id: this.id,
          status: 4,
          isSendMessage: this.formProduct.isSendMessage ? 1 : 2,
          num: null,
          productId: this.clickItem.productId,
          productType: this.clickItem.productType,
          reason: ""
        };
        cartUpdateStatus(data).then(res => {
          if (res.code === 0) {
            this.$message({
              message: "下架成功",
              showClose: false,
              type: "success"
            });
            this.loading = false;
            this.getDetail(this.id);
            this.cancelProduct();
          }
        });
      } else if (this.updateStatusType === 9) {
        this.loading = true;
        updateSaleLimit({
          id: this.id,
          num: this.formProduct.num,
          productId: this.clickItem.productId,
          productType: this.clickItem.productType
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              message: "修改数量成功",
              showClose: false,
              type: "success"
            });
            this.loading = false;
            this.getDetail(this.id);
            this.cancelProduct();
          }
        });
      } else {
        this.loading = true;
        // 购物车修改可销售数量
        if (!this.formProduct.weight) {
          return this.$message({
            type: "error",
            message: "请填写权重"
          });
        }
        const data = {
          videoId: this.id,
          productId: this.clickItem.productId,
          productType: this.clickItem.productType,
          weight: this.formProduct.weight
        };
        cartRecommend(data).then(res => {
          if (res.code === 0) {
            this.$message({
              message: "推荐成功",
              showClose: false,
              type: "success"
            });
            this.loading = false;
            this.getDetail(this.id);
            this.cancelProduct();
          }
        });
      }
    },
    setUp() {
      const data = {
        videoId: this.id,
        isSpeak: this.isSpeak,
        isSendMessage: this.isSendMessage
      };
      messageForbidden(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.getDetail(this.id);
        }
      });
    },
    setUpTwo() {
      const data = {
        videoId: this.id,
        messageAudit: this.messageAudit
      };
      openMessAudit(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.getDetail(this.id);
        }
      });
    },
    setUpThree() {
      const data = {
        videoId: this.id,
        interactType: this.interactType
      };
      updateInteractType(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.getDetail(this.id);
        }
      });
    },
    changeShowNickname() {
      const data = {
        isOpen: this.detail.showNickname,
        videoId: this.id
      };
      showNickname(data).then(res => {
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.getDetail(this.id);
        }
      });
    },
    reqCouponList() {
      const data = {
        size: 999,
        current: 1,
        status: 1,
        expired: 0
      };
      getCouponList(data).then(res => {
        if (res.code === 0) {
          this.couponList = res.data.list;
        }
      });
    },
    getSendcouponList() {},
    remoteMethodProduct(query) {
      this.loadingProduct = true;
      const queryParams = {
        packageName: query,
        current: 1,
        size: 99,
        statusList: [3]
      };
      packageList(queryParams).then(data => {
        this.productList = data.data.list;
        this.loadingProduct = false;
      });
    },
    // 创建问卷
    createQuestionnaire() {
      this.dialogFormVisibleQuestionnaire = true;
    },
    openView(val) {
      this.dialogVisibleTitle = val.title + "(预览)";
      this.iframeUrl = `${window.location.origin}/syzbh5/previewQuestion?id=${
        val.id
      }`;
      // window.open(this.iframeUrl)
      this.dialogVisible = true;
    },
    toQuestionnaire(isQuestionnaire, id) {
      if (isQuestionnaire) {
        this.iframeUrl = `${
          window.location.origin
        }/syzbh5/previewQuestion?id=${id}`;
        this.dialogVisible = true;
      }
    },
    // 添加选项
    addOptions(index) {
      if (this.titleQueryList[index].optionQueryList.length === 10) {
        return this.$message({
          message: "最多提供10个选项！",
          type: "warning"
        });
      }
      if ([3, 4].includes(this.titleQueryList[index].type)) {
        this.titleQueryList[index].optionQueryList.push({
          fileList: [],
          imgUrl: "",
          option: this.titleQueryList[index].optionQueryList.length + 1,
          optionDesc:
            "选项" + (this.titleQueryList[index].optionQueryList.length + 1)
        });
      } else {
        this.titleQueryList[index].optionQueryList.push({
          option: this.titleQueryList[index].optionQueryList.length + 1,
          optionDesc:
            "选项" + (this.titleQueryList[index].optionQueryList.length + 1)
        });
      }
      this.$forceUpdate();
    },
    // 删除选项
    deleteOptions(index, k) {
      console.log(index, k, this.titleQueryList[index].optionQueryList);
      if (this.titleQueryList[index].optionQueryList.length > 2) {
        this.titleQueryList[index].optionQueryList.splice(k, 1);
        this.$forceUpdate();
      } else {
        this.$message({
          message: "请至少提供两个选项！",
          type: "warning"
        });
      }
    },
    // 添加问题
    addOpts(item) {
      console.log(item.type);
      // 单选
      if ([1, 2].includes(item.type)) {
        this.titleQueryList.push({
          title: "请输入题目标题",
          type: item.type,
          optionQueryList: [
            { option: 1, optionDesc: "选项1" },
            { option: 2, optionDesc: "选项2" }
          ]
        });
      } else if ([5].includes(item.type)) {
        this.titleQueryList.push({
          title: "请输入题目标题",
          type: item.type,
          optionQueryList: []
        });
      } else if ([3, 4].includes(item.type)) {
        this.titleQueryList.push({
          title: "请输入题目标题",
          type: item.type,
          optionQueryList: [
            { optionDesc: "选项1", fileList: [], imgUrl: "", option: 1 },
            { optionDesc: "选项2", fileList: [], imgUrl: "", option: 2 }
          ]
        });
      }
    },
    // 复制问题
    copyQuest(item, index) {
      const obj = { ...item };
      const copyObj = JSON.parse(JSON.stringify(obj));
      this.titleQueryList.splice(index + 1, 0, copyObj);
      console.log("titleQueryList", this.titleQueryList);
    },
    // 删除问题
    removeQuest(index) {
      this.titleQueryList.splice(index, 1);
      console.log("titleQueryList", this.titleQueryList);
    },
    // ========================================== 问卷
    getQuestionList() {
      this.queryParamsQuestionnaire.videoId = this.id;
      questionList(this.queryParamsQuestionnaire).then(res => {
        if (res.code === 0) {
          this.queryParamsQuestionnaire.total = res.data.total;
          this.questionnaireList = res.data.list;
        }
      });
    },
    async confirm(type) {
      this.showQrCode = false;
      if (this.loadingButton) return;
      // type  1 预览 2 创建
      if (!this.questionnaireTitle.trim()) {
        return this.$message({
          message: "请填写标题！",
          type: "warning"
        });
      }
      if (!this.titleQueryList.length) {
        return this.$message({
          message: "请添加题型！",
          type: "warning"
        });
      }
      for (let index = 0; index < this.titleQueryList.length; index++) {
        if ([3, 4].includes(this.titleQueryList[index].type)) {
          for (
            let i = 0;
            i < this.titleQueryList[index].optionQueryList.length;
            i++
          ) {
            if (
              !this.titleQueryList[index].optionQueryList[i].imgUrl ||
              !this.titleQueryList[index].optionQueryList[i].optionDesc
            ) {
              return this.$message({
                message: "请补充图片及其选项",
                type: "warning"
              });
            }
          }
        }
        if ([1, 2].includes(this.titleQueryList[index].type)) {
          for (
            let i = 0;
            i < this.titleQueryList[index].optionQueryList.length;
            i++
          ) {
            if (
              !this.titleQueryList[index].optionQueryList[i].optionDesc.trim()
            ) {
              return this.$message({
                message: "请补充选择题选项",
                type: "warning"
              });
            }
          }
        }
        if (
          [5].includes(this.titleQueryList[index].type) &&
          !this.titleQueryList[index].title.trim()
        ) {
          return this.$message({
            message: "请补充填空题",
            type: "warning"
          });
        }
      }
      if (type == 2) {
        this.loadingButton = true;
      }
      const data = {};
      data.description = this.isTip ? this.explain : "";
      data.title = this.questionnaireTitle;
      data.videoId = this.id;
      data.questionId = this.questionId ? this.questionId : null;
      data.titleQueryList = JSON.parse(JSON.stringify(this.titleQueryList));
      data.isReview = type === 1 ? 1 : 2;
      await questionSave(data)
        .then(res => {
          if (res.code === 0) {
            if (type === 1) {
              this.questionId = res.data;
              this.showQrCode = true;
              this.downloadByBlob();
            } else {
              this.$message({
                type: "success",
                message: "创建问卷成功！"
              });
              this.getQuestionList();
              this.cancel();
            }
          } else if (type === 2) {
            this.loadingButton = false;
          }
        })
        .catch(() => {
          if (type === 2) this.loadingButton = false;
        });
    },
    cancel() {
      this.dialogFormVisibleQuestionnaire = false;
      this.titleQueryList = [];
      this.explain = "";
      this.questionnaireTitle = "";
      this.questionId = null;
      this.showQrCode = false;
      this.loadingButton = false;
      this.isTip = false;
    },
    question(item, type) {
      const label = {
        "-1": "发起问卷",
        "-2": "删除问卷",
        "-3": "重发问卷"
      };
      this.$confirm(`您确定${label[type]}?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const data = {
            questionId: item.id,
            operate: type
          };
          questionUpdateStatus(data).then(res => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "操作成功！"
              });
              this.getQuestionList();
            }
          });
        })
        .catch(() => {});
    },
    updateQuestion(item, type) {
      questionDetails({ questionId: item.id }).then(res => {
        if (res.code === 0) {
          if (res.data.description) {
            this.isTip = true;
            this.explain = res.data.description;
          }
          this.questionnaireTitle = res.data.title;
          this.questionId = type === 1 ? res.data.id : null;
          this.titleQueryList = JSON.parse(
            JSON.stringify(res.data.titleVOList)
          );
          for (let index = 0; index < this.titleQueryList.length; index++) {
            this.titleQueryList[index].optionQueryList = [];
            this.titleQueryList[index].optionQueryList = this.titleQueryList[
              index
            ].optionVOList;
            for (
              let i = 0;
              i < this.titleQueryList[index].optionQueryList.length;
              i++
            ) {
              if ([3, 4].includes(this.titleQueryList[index].type)) {
                this.titleQueryList[index].optionQueryList[i].fileList = [];
                this.titleQueryList[index].optionQueryList[i].fileList.push({
                  url: this.titleQueryList[index].optionQueryList[i].imgUrl
                });
              }
            }
          }
          console.log(this.titleQueryList, "====复制的");
          this.dialogFormVisibleQuestionnaire = true;
        }
      });
    },
    downloadByBlob(val) {
      const url = `${window.location.origin}/syzbh5/previewQuestion?id=${
        this.questionId
      }`;
      this.$nextTick(() => {
        this.$refs.QrCode.createCode(url);
      });
    },
    async toExport(item) {
      const { data, code, message } = await questionExport({
        questionId: item.id
      });

      if (code === 0) {
        import("@/utils/export2Excel").then(excel => {
          const tHeader = [
            "用户昵称",
            "用户ID",
            "开始答题时间",
            "结束答题时间",
            "答题时长"
          ];
          const filterVal = [
            "nickName",
            "userId",
            "startTime",
            "endTime",
            "duration"
          ];
          if (data[0].titleList.length) {
            for (let index = 0; index < data[0].titleList.length; index++) {
              filterVal.push(index);
            }
          }
          tHeader.push(...data[0].titleList);
          const excelData = this.formatJson(filterVal, data);
          excel.export_json_to_excel({
            header: tHeader,
            data: excelData,
            filename: `${item.title}问卷数据`
          });
          console.log("list=>", data.list);
        });
      } else {
        this.$message.error(message);
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (!isNaN(j)) {
            return v.answers[j];
          } else if (j === "duration") {
            return this.timeFormat(v[j] * 1000);
          } else {
            return v[j];
          }
        })
      );
    },
    closePopover() {
      this.showQrCode = false;
    },
    // ==============================================
    handleSuccess(response, file, index, k) {
      console.log("handleSuccess", response, file, index, k);
      const uid = file.uid;
      const name = file.name;
      const url = response.data.url;
      this.titleQueryList[index].optionQueryList[k].fileList.url = url;
      this.titleQueryList[index].optionQueryList[k].fileList.name = name;
      this.titleQueryList[index].optionQueryList[k].imgUrl = url;
      this.$refs[`picUpload${index}${k}`][0].$el.classList.add("disabled");
    },
    handleError(err, file, fileList) {
      console.log("handleError", err, file, fileList);
    },
    handleRemove(file, index, k) {
      console.log("handleRemove", file);
      this.titleQueryList[index].optionQueryList[k].fileList.url = "";
      this.titleQueryList[index].optionQueryList[k].fileList.name = "";
      this.titleQueryList[index].optionQueryList[k].imgUrl = "";
      this.$refs[`picUpload${index}${k}`][0].$el.classList.remove("disabled");
    },
    beforeUpload(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg" &&
        file.type !== "image/bmp" &&
        file.type !== "image/gif"
      ) {
        this.$message.error("上传只支持支持jpg,gif,png,bmp!");
        return false;
      }
      const isLt = file.size / 1024 / 1024 < 4;
      if (!isLt) {
        this.$message.error("上传文件大小不能超过 4MB!");
        return false;
      }
      console.log("beforeUpload", file);
      this.headers["X-File-Size"] = file.size;
    },
    sendcoupon(val, type) {
      // type 1 未发放
      this.$confirm(`您确定${type === 1 ? "发放" : "删除"}优惠券?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const data = {
            sendCouponId: val.id
          };
          if (type === 1) {
            liveSend(data).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功！"
                });
                this.queryListPreferential();
              }
            });
          } else {
            deleteCouponAndSend(data).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "操作成功！"
                });
                this.queryListPreferential();
              }
            });
          }
        })
        .catch(() => {});
    },
    toOpenCoupon() {
      this.$refs.coupon.openCoupon();
    },
    async changeOpenQw() {
      const ret = await updateQWParam({
        isOpen: this.detail.openQw,
        videoId: this.detail.id
      });
      if (ret.code === 0) {
        console.log(this.detail.openQw);
      }
    },
    addPush(item) {
      this.detail.pushList.push(item);
    },
    async cancelPushProduct() {
      // 取消推送产品
      this.$confirm(`是否确认取消推送产品？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const ret = await cancelPush({ id: this.id });
          if (ret && ret.code === 0) {
            this.$message({
              type: "success",
              message: "操作成功！"
            });
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped lang="scss">
.mb10 {
  margin-bottom: 10px;
}

.flex-box {
  display: inline-flex;
  flex-direction: row;

  &_item {
    display: inline-flex;
    flex-direction: column;
    margin-right: 10px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    align-self: center;

    div {
      padding: 5px 0;
      display: inline-flex;
      align-self: center;
    }
  }
}

.charts-box {
  padding: 20px;
  width: 60%;
}

.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}

.title {
  padding: 10px 10px;
  border: 1px solid #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  width: 100%;
  display: flex;
}

.audience {
  min-width: 400px;
  flex: 1;
  .audience-border {
    border: 1px solid rgba(153, 153, 153, 0.7);
    padding: 10px 10px;
    width: 100%;
    cursor: pointer;
    .audience-title {
      padding-top: 20px;
      height: 600px;
      overflow: auto;
      &_user {
        margin-bottom: 15px;
        font-size: 18px;
        color: #303133;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        img {
          width: 40px !important;
          height: 40px !important;
          margin: 0 8px 0 0 !important;
          border-radius: 6px !important;
        }
        .el-icon-user {
          margin-right: 5px;
        }
      }
    }
    .audience-interaction {
      padding-top: 20px;
      .audience-button {
        padding-bottom: 20px;
      }
      .audience-box {
        display: flex;
        flex-direction: column;
        .interaction-box {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          .interaction-box_switch {
            padding-bottom: 15px;
          }
        }
      }
    }
    .box-tab {
      .tab-box {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        border-bottom: 0.5px solid #eee;

        .tab-box_item {
          padding: 7px 0 14px 0;
          font-family: PingFangSC-Regular;
          font-weight: 600;
          font-size: 18px;
          color: #5e6878;
          letter-spacing: 0;
          text-align: center;
          line-height: 18px;
          width: 50%;
          div:not(:first-child) {
            padding: 14px 0 14px 14px;
          }
        }
      }
    }
  }
}

.video-box {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.video-box-bottom {
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.audience-chat-box {
  display: flex;
  flex-direction: column;
  .chat-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .button-box {
    height: 10%;
    padding-top: 20px;
    margin-bottom: 20px;
  }

  .content-box {
    width: 100%;
    height: 90vh;
    padding-top: 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;

    &_item {
      display: inline-flex;
      flex-direction: column;
      padding: 15px;
      margin-bottom: 20px;
      border: 1px solid #ebeef5;
      width: 100%;
      background-color: rgba(243, 245, 255, 1);
      color: #606266;
      border-radius: 10px;
      font-size: 18px;
      &--reply {
        font-weight: 500;
        font-size: 16px;
        margin-top: 20px;
        display: inline;
        color: #303133;
      }
      &--product {
        margin-top: 10px;
        padding: 10px;
        display: inline-flex;
        flex-direction: column;
        background-color: #99999930;
        border-radius: 5px;
        max-width: 400px;
        .product-title {
          margin-bottom: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            padding: 4px 6px;
            font-size: 12px;
            border-radius: 3px;
            color: #fff;
            background-color: #13ce66;
            border-color: #13ce66;
            margin-right: 10px;
          }
        }
        .product-content {
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      &--title {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        img {
          width: 40px !important;
          height: 40px !important;
          margin: 0 8px 0 0 !important;
          border-radius: 6px !important;
          cursor: default;
          &.pointer {
            cursor: pointer;
          }
        }
      }
    }
    .question-item {
      background-color: rgba(65, 84, 253, 0.8);
      color: #fff;
      .time {
        color: #fff;
      }
      .questionnaire-color {
        cursor: pointer;
        color: #fff !important;
      }
    }
    .no-open-item {
      background-color: rgba(231, 233, 242, 1);
    }
  }
  .question-item {
    background-color: rgba(65, 84, 253, 0.8);
    color: #fff;
    .time {
      color: #fff;
    }
    .questionnaire-color {
      cursor: pointer;
      color: #fff !important;
    }
  }
  .no-open-item {
    background-color: rgba(231, 233, 242, 1);
  }
  .send-box {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding-top: 20px;
  }
}

.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}

.table-box {
  padding-top: 10px;
  height: 100%;
}

// .interaction-box {
//   padding: 10px;

//   .interaction-box_switch {
//     margin-bottom: 20px;
//   }
// }

::v-deep .el-switch {
  margin-right: 10px;
}

.shopping-box {
  .shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      color: #666;
      margin: 20px 0;
    }
  }
}

.preferential-box {
  height: 100%;
  padding: 20px;
  .table-box {
    p {
      color: #666;
    }
  }
}

.questionnaire-box {
}

.questionnaire-dialog {
  .questionnaire-Title {
    margin-bottom: 20px;
    .el-input {
      width: 80%;
      margin-left: 40px;
    }
  }
  .questionnaire-explain {
    margin-bottom: 20px;
    .el-input {
      width: 80%;
      margin-left: 10px;
    }
  }
  .questionnaire-container {
    display: flex;
    border: 1px solid #cccccc;
    padding: 20px;
    .questionnaire-preview {
      flex: 1;
      border: 1px solid #cccccc;
      min-height: 100%;
      max-height: 500px;
      overflow-y: auto;
      position: relative;
      padding: 20px;
      .tips {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .quests {
        margin-bottom: 20px;
        border: 1px solid #cccccc;
        padding: 10px;
        .quests-title {
          margin-bottom: 10px;
          .el-input {
            width: 90%;
            margin-left: 5px;
          }
        }
        .quests-answer {
          .el-input {
            width: 50%;
            margin-left: 5px;
          }
          .el-textarea {
            width: 95%;
          }
          .answer-container-block {
            .answer-container {
              margin-bottom: 5px;
            }
            .picture-opts {
              margin: 10px 0;
            }
          }
        }
      }
      .questBtns {
        height: 28px;
        line-height: 28px;
        display: flex;
        padding-right: 20px;
        justify-content: flex-end;
        .delBtn {
          visibility: hidden;
        }
      }
      .quests:hover {
        .delBtn {
          visibility: inherit;
        }
      }
      .delete-item {
        color: red;
      }
      .disabled ::v-deep .el-upload--picture-card {
        display: none;
      }
    }
    .question-types-list {
      display: flex;
      align-content: center;
      width: 330px;
      padding: 20px 0 20px 20px;
      flex-wrap: wrap;
      div {
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #cccccc;
        border-radius: 5px;
        &:nth-of-type(2n + 1) {
          margin: 0 5px 5px 0;
        }
      }
    }
  }
}

.fw-600 {
  font-weight: 600;
}

.el-icon-chat-dot-round {
  cursor: pointer;
  margin-left: 10px;
}

.el-icon-delete {
  cursor: pointer;
  margin: 0 10px;
}
.reply-box {
  display: inline-flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 10px;
  background-color: #99999930;
  border-radius: 5px;
  .userName {
    margin-bottom: 10px;
  }
}
::v-deep .vjs-error-display {
  display: none;
}
#play-video {
  width: 100%;
}
::v-deep .tcplayer {
  width: 100%;
  height: 100%;
}
.center-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-open-an-account :deep(img),
.video-open-an-account :deep(.ml60) {
  margin-left: 0;
  width: 100%;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 600px;
}
.suspend {
  width: 100%;
  height: 600px;
  text-align: center;
  color: #ccc;
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.time-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  div {
    margin-right: 10px;
  }
}
.button-box {
  margin-top: 10px;
  color: "#909399";
  font-size: 14px;
}
.button-icon {
  padding: 2px;
  margin-right: 10px;
}
::v-deep .el-popover__title {
  text-align: center;
}
.anchor {
  padding: 4px;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 6px;
}
.user {
  padding: 4px;
  background-color: #67c23a;
  color: #fff;
}
.time {
  font-size: 14px;
  color: #909399;
}
.active-tab {
  font-family: PingFangSC-Medium !important;
  font-weight: 600 !important;
  color: #2e78fa !important;
}
.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}
.reply-delete {
  color: #606266;
  font-size: 14px !important;
  width: 100%;
  text-align: right;
  position: relative;
}
::v-deep .submit-buttom {
  display: none !important;
}
::v-deep .button-text {
  width: 180px;
  cursor: pointer;
  color: #1890ff;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep .el-dialog__title {
  width: 80%;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky {
  position: fixed;
  top: 0px;
  z-index: 999; /* 可以根据需要设置更高的z-index */
}
.video-box-top {
  width: 100%;
}
.name-time {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5px;
  height: 100%;
  :first-child {
    font-size: 16px;
  }
  :last-child {
    font-size: 12px;
    line-height: 14px;
  }
}
.audience-title_user_active {
  filter: grayscale(1); /* 置灰效果 */
}
.audience-title_user_active-text {
  color: #409eff !important;
}
.txonlineNum {
  font-weight: 600;
  font-size: 18px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
// .avatar {
//   display: block;
// }
.send-box_btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  .avatar {
    margin-right: 20px;
    border-radius: 6px;
    max-width: 178px;
    max-height: 178px;
  }
  .avatar-uploader {
    margin-right: 20px;
  }
}
.image-container {
  position: relative;
}
.content-img {
  margin: 20px 0 10px 0;
  border-radius: 6px;
  width: 200px;
  height: 150px;
}
.marketing-code {
  display: flex;
  padding: 20px;
  label {
    margin-right: 20px;
  }
}
</style>
