<template>
  <div class="live-config-container live-page">
    <el-card class="box-card live-config-header">
      <div class="detail-header">
        <div class="header-left-area">
          <img :src="liveInfo.liveImgUrl" alt="直播封面">
          <!-- 加载遮罩 -->
          <div class="ss-loading-mask" style="display: none;">
            <div class="ss-loading-spinner is-module-loading">
              <div class="ss-loading-dot-flashing"></div>
            </div>
          </div>
        </div>

        <div class="header-middle-area">
          <div class="live-info-title">
            <div class="title-text">{{ liveInfo.liveName }}</div>
          </div>

          <div class="live-info-desc">
            <div class="live-type">{{ liveInfo.liveType == 1 ? '视频直播' : '录播' }}</div>
            <div class="line"></div>
            <div class="live-mode">{{ liveInfo.showType == 1 ? '横屏' : '竖屏' }}</div>
          </div>

          <div class="live-info-state">
            <div class="info-state-text live-time">直播时间：{{ liveInfo.startTime }} 至 {{ liveInfo.finishTime }}</div>
          </div>
          <div class="live-info-state">
            <span class="live-status" :class="'is-' + liveInfo.status">
              <i class="live-status__dot"></i>
              <template v-if="liveInfo.status == 1">待直播</template>
              <template v-else-if="liveInfo.status == 2">直播中</template>
              <template v-else-if="liveInfo.status == 3">已结束</template>
              <template v-else-if="liveInfo.status == 4">直播回放中</template>
            </span>
            <span class="shelf-text" v-if="liveInfo.isShow == 1">上架</span>
            <span class="shelf-text is-off" v-if="liveInfo.isShow == 2">下架</span>
          </div>
        </div>


<!--        <div class="header-right-area">-->
<!--          <div class="operation-wrapper">-->
<!--            <div class="operation-item">-->
<!--              <div class="operation-item-icon sales-icon"></div>-->
<!--              <div class="operation-item-text">中控台</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">分享</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item" data-auth-id="975">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">恢复直播</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item ss-popover__reference" aria-describedby="ss-popover-6482" tabindex="0">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">更多</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </el-card>
    <el-card class="box-card live-config-left">
      <div class="container">
      <!-- 左边菜单 -->
        <div class="left-menu">
          <el-menu default-active="watchReward" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item :index="item.index" v-for="item in menuList" >
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- 右边信息 -->
        <div class="right-info">
          <!-- 动态组件 -->
          <component :is="currentComponent" ></component>
        </div>
      </div>
<!--      <el-tabs tab-position="left" style="height: 200px;">-->
<!--        <el-tab-pane label="营销内容">营销内容</el-tab-pane>-->
<!--        <el-tab-pane label="观看奖励">观看奖励</el-tab-pane>-->
<!--        <el-tab-pane label="答题红包">答题红包</el-tab-pane>-->
<!--        <el-tab-pane label="答题">答题</el-tab-pane>-->
<!--        <el-tab-pane label="直播商品">直播商品</el-tab-pane>-->
<!--        <el-tab-pane label="观看积分">观看积分</el-tab-pane>-->
<!--        <el-tab-pane label="身份认证">-->
<!--            <idCard :liveId="liveId" />-->
<!--        </el-tab-pane>-->
<!--      </el-tabs>-->
    </el-card>

  </div>
</template>
<script>
import WatchReward from './watchReward.vue';
import Answer from './answer.vue';
import Goods from './goods.vue';
import IdCard from './idCard.vue';
import Task from './task.vue';
import LiveRedConf from './liveRedConf.vue'
import LiveLotteryConf from './liveLotteryConf.vue'
import LiveReplay from './liveReplay.vue'
import Preview from './preview.vue'
import LiveCoupon from './liveCoupon.vue'
import Barrage from './barrage.vue'
import { listLive, getLive, delLive, addLive, updateLive, exportLive,selectCompanyTalent,handleShelfOrUn,handleDeleteSelected } from "@/api/live/live";


export default {
  name: 'LiveConfig',
  components: {
    WatchReward,
    LiveRedConf,
    LiveReplay,
    LiveLotteryConf,
    Answer,
    Goods,
    IdCard,
    Task,
    LiveCoupon,
    Barrage,
    Preview
  },
  data() {
    return {
      activeTab: 'watchReward',
      liveId: null,
      liveInfo: {},
      currentComponent: WatchReward,
      liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
      menuList:[
        { name: '观看奖励', label: '观看奖励', index: 'watchReward',icon:'el-icon-coin'},
        { name: '直播预告', label: '直播预告', index: 'preview',icon:'el-icon-video-play'},
        { name: '红包配置', label: '红包配置', index: 'liveRedConf',icon:'el-icon-money'},
        { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf',icon:'el-icon-present'},
        { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon',icon:'el-icon-discount'},
        // { name: '答题', label: '答题', index: 'answer'},
        { name: '直播商品', label: '直播商品', index: 'goods',icon:'el-icon-shopping-bag-2'},
        { name: '回放设置', label: '回放设置', index: 'liveReplay',icon:'el-icon-set-up'},
        // { name: '观看积分', label: '观看积分', index: 'watchScore'},
        { name: '运营自动化', label: '运营自动化', index: 'task',icon:'el-icon-coordinate'},
        { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage',icon:'el-icon-chat-dot-round'},
        { name: '身份认证', label: '身份认证', index: 'idCard',icon:'el-icon-postcard'},
      ],

    }
  },
  computed: {
    userId() {
      return this.$store.state.user.user && this.$store.state.user.user.userId
    }
  },
  watch: {
    '$route.params.liveId'(val, oldVal) {
      if (!val || String(val) === String(oldVal)) return
      if (oldVal) {
        this.$store.dispatch('releaseLiveWs', { liveId: oldVal, owner: 'config' })
      }
      this.liveId = val
      this.connectLiveWs()
      this.getLiving()
    }
  },
  created() {
    this.liveId = this.$route.params.liveId
    this.connectLiveWs()
    this.getLiving()
  },
  beforeDestroy() {
    this.$store.dispatch('releaseLiveWs', { liveId: this.liveId, owner: 'config' })
  },
  methods: {
    connectLiveWs() {
      if (!this.liveId || !this.userId) return
      this.$store.dispatch('acquireLiveWs', {
        liveWsUrl: this.liveWsUrl,
        liveId: this.liveId,
        userId: this.userId,
        owner: 'config'
      })
    },
    handleSelect(index){
      this.currentComponent = index; // 切换当前显示的组件
    },
    getLiving() {
      getLive(this.liveId).then(res => {
        this.liveInfo = res.data
      })
    },
  }
}
</script>


<style scoped>
.el-tabs__header .is-top {
  display: none !important;
}
.live-config-header {
  padding: 5px;
  border: 1px solid #e8eaed;
  border-radius: 10px;
}
.detail-header {
  display: flex;
  align-items: center;
  padding: 16px 18px;
}

.header-left-area {
  flex: 0 0 64px;
  position: relative;
}

.header-left-area img {
  width: 64px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
}

.header-middle-area {
  flex: 1;
  padding: 0 18px;
  min-width: 0;
}

.live-info-title .title-text {
  font-size: 18px;
  font-weight: 600;
  color: #1f2329;
  line-height: 1.35;
}

.live-info-desc {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #8a919f;
  font-size: 13px;
}

.live-info-desc .line {
  width: 1px;
  height: 12px;
  background: #e8eaed;
  margin: 0 10px;
}

.live-info-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.info-state-text {
  font-size: 13px;
  color: #8a919f;
}

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1f2329;
}

.live-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0c4cc;
}

.live-status.is-1 .live-status__dot { background: #e6a23c; }
.live-status.is-2 .live-status__dot { background: #f56c6c; box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.18); }
.live-status.is-3 .live-status__dot { background: #909399; }
.live-status.is-4 .live-status__dot { background: #409eff; }

.shelf-text {
  font-size: 12px;
  color: #1a6d5b;
}
.shelf-text.is-off {
  color: #8a919f;
}

.container {
  display: flex;
  height: 100%;
}
.left-menu {
  width: 180px;
  border-right: 1px solid #e8eaed;
  flex-shrink: 0;
  background: #fafbfc;
  padding: 10px 8px;
}
.el-menu-item {
  margin: 2px 0;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  color: #5c6470;
}
.el-menu-item.is-active,
.el-menu-item:hover {
  background-color: rgba(26, 109, 91, 0.1);
  color: #1a6d5b;
}
.right-info {
  flex: 1;
  padding: 16px 18px;
}

</style>
