<template>
  <div class="liveManage">
    <div class="el-card__header">
      <span>直播管理</span>
    </div>
    <div class="table-body">
      <el-button type="primary" size="small" style="margin-bottom: 15px;" @click="getNew" :loading="btnload">获取最新直播间列表</el-button>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          prop="roomid"
          label="房间ID"
          width="80">
        </el-table-column>
        <el-table-column
          label="房间名"
          width="220">
          <template slot-scope="scope">
              <div style="word-break: break-all;-webkit-line-clamp: 1;" class="vue-line-clamp">{{scope.row.name}}</div>

          </template>
        </el-table-column>
        <el-table-column
          label="主播信息">
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: row;align-items: center">
              <img :src="scope.row.anchor_img" alt="" style="width: 45px; height: 45px;">
              <div style="margin-left: 5px">{{ scope.row.anchor_name }}</div>
            </div>

          </template>
        </el-table-column>
        <el-table-column
          label="封面图片"
          width="120">
          <template slot-scope="scope">
            <img :src="scope.row.cover_img" alt="" style="width: 45px; height: 45px;">
          </template>
        </el-table-column>
        <el-table-column
          label="计划直播时间"
          width="180">
          <template slot-scope="scope">
            <div>{{scope.row.start_time}}</div>
            <div>{{scope.row.end_time}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <div class="el-tag" v-if="scope.row.live_status==101">直播中</div>
            <div class="el-tag" v-if="scope.row.live_status==102">未开始</div>
            <div class="el-tag" v-if="scope.row.live_status==103">已结束</div>
            <div class="el-tag" v-if="scope.row.live_status==104">禁播</div>
            <div class="el-tag" v-if="scope.row.live_status==105">暂停中</div>
            <div class="el-tag" v-if="scope.row.live_status==106">异常</div>
            <div class="el-tag" v-if="scope.row.live_status==107">已过期</div>
          </template>
         

        </el-table-column>
         <el-table-column label="海报">
            <template slot-scope="scope">
              <el-image :src="scope.row.ExtensionImg" class="goods-image" :preview-src-list="[scope.row.ExtensionImg]" style="width:150px;height:150px"></el-image>
            </template>
         </el-table-column>
         <el-table-column label="操作">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="图片上传" placement="top">
                    <img @click="imgupload(scope.row)"  class="app-order-icon"
                      src="../../assets/img/userman/imgsc.png" alt="">
                  </el-tooltip>
            </template>
         </el-table-column>
        
      </el-table>
      <el-pagination style="text-align:right"
                     background
                     @current-change="handleCurrentChange"
                     :page-size="msg.pageSize"
                     layout="prev, pager, next"
                     :total="count">
      </el-pagination>
    </div>
     <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
  </div>
</template>

<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
    export default {
        name: "liveManage",
        components: {
          ChooseImg
        },
      data(){
          return{
            msg:{
              pageIndex:1,
              pageSize:20,
            },
            count:0,
            tableData: [],
            loading:false,
            btnload:false,
            changeState:false,
            imgMsg:{
              ID:0,
              roomid:0,
              ExtensionImg:'',
            }
          }
      },
      created(){
          this.getDateList()
      },
      methods:{
        getDateList(){
          this.loading=true;
          this.apipost("/api/Publish/GetLiveHousePageList", this.msg, res => {
            this.loading=false;
            if(res.data.resultCode==1){
              this.tableData = res.data.data.pageData;
              this.count = res.data.data.count;
            }else {
              this.Info(res.data.message);
            }

          })
        },
        getNew(){
          this.btnload=true;
          this.apipost("/api/Publish/GetLiveInfo", {}, res => {
            this.btnload=false;
            if(res.data.resultCode==1){
             this.getDateList()
            }else {
              this.Info(res.data.message);
            }

          })
        },
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getIntegraStatisticslList();
        },
        imgupload(row){
          console.log(row)
          this.imgMsg.ID = row.HouseImgID;
          this.imgMsg.roomid = row.roomid;
          this.changeState = true;
        },
        SelectId(msg){
          let img = this.getIconLink(msg.url)
           this.changeState = false;
           this.imgMsg.ExtensionImg = img;
           this.addOrUpdateHouseImg()
        },
         addOrUpdateHouseImg(){
          this.btnload=true;
          this.apipost("/api/Publish/AddOrUpdateHouseImg",  this.imgMsg, res => {
            this.btnload=false;
            if(res.data.resultCode==1){
             this.getDateList()
            }else {
              this.Info(res.data.message);
            }

          })
        },
      }
    }
</script>

<style >
  .liveManage .el-card__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .liveManage .table-body {
    padding: 20px;
    background-color: #fff;
    margin-top: 10px;
  }
  .liveManage .el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: #409EFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
</style>
