<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <div class="header-title">直播管理</div>
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="75px"
        label-suffix=":"
        :inline="true"
      >
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="直播名称">
              <el-input v-model="searchForm.liveName" size="small" placeholder="请输入直播名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="直播状态">
              <el-select
                v-model="searchForm.liveStatus"
                id="statusSelector"
                placeholder="请选择发布状态"
                clearable
                style="margin-left:20px;"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button type="primary" size="small" @click="search">查询</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" size="small" @click="createLive">新建直播</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="liveName" label="直播名称" min-width="100" align="center"></el-table-column>
        <el-table-column prop="liveStatus" label="直播状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.liveStatus | liveStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" min-width="100" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="300" align="center">
          <template slot-scope="scope">
            <!-- <el-button @click="reviewLive(scope.row)" type="text" size="small">设置回放</el-button> -->
            <el-button
              @click="liveLink(scope.row)"
              type="text"
              size="small"
              v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)"
            >直播链接</el-button>
            <el-button
              @click="countLive(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.liveStatus==4"
            >数据统计</el-button>
            <el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
            <!-- <el-button @click="deleteLive(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleNumChange"
          :current-page="searchForm.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

      <el-dialog
        title="数据统计"
        :visible.sync="dialogStatisticsVisible"
        width="500px"
        :close-on-click-modal="false"
        @close="handleStatisticsClose"
        center
      >
        <el-table :data="dialogStatisticsData" align="center">
          <el-table-column property="peopleNum" label="观看人数" align="center"></el-table-column>
          <el-table-column property="liveDuration" label="直播时长（分钟）" align="center"></el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog
        title="直播链接"
        :visible.sync="dialogLivelinkVisible"
        width="600px"
        :close-on-click-modal="false"
        @close="handleLivelinkClose"
        center
      >
        <input type="text" id="copyInput" class="hidden-input" />

        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
          <div class="href_style">讲师链接 {{lecturerUrl}}</div>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(1)" size="small" class="href_button_style">复制</el-link>
            <el-link type="primary">|</el-link>
            <el-link type="primary" @click="jumpUrl(1)" size="small">进入直播</el-link>
          </el-col>
        </div>

        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
          <el-col class="href_style">嘉宾链接 {{guestUrl}}</el-col>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(2)" size="small" class="href_button_style">复制</el-link>
            <el-link type="primary">|</el-link>
            <el-link type="primary" @click="jumpUrl(2)" size="small">进入直播</el-link>
          </el-col>
        </div>

        <div class="live_url_style" v-if="this.liveScope==2">
          <div class="href_style">观众链接 {{audienceUrl}}</div>
          <el-col class="href_outer_border">
            <el-link type="primary" @click="copyTxt(3)" size="small" class="href_button_style">复制</el-link>
          </el-col>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
let vm = null;
import BreadCrumb from "@/components/breadcrumb.vue";
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "云鹊小圈",
      curmbSecond: "直播管理",
      dialogStatisticsVisible: false,
      dialogLivelinkVisible: false,
      searchForm: {
        liveName: "",
        liveStatus: "",
        pageNo: 1,
        pageSize: 10
      },
      totalRows: 0,
      statusList: [
        {
          value: "1",
          label: "预告"
        },
        {
          value: "2",
          label: "直播中"
        },
        {
          value: "4",
          label: "已结束"
        }
      ],
      tableData: [
        // {
        //   liveName: "浙江医学大会第二场",
        //   liveScope: 1, //直播范围 1-非公开 2-公开
        //   liveStatus: 1, //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
        //   createTime: "",
        //   startTime: "",
        //   endTime: "",
        //   rtcId: 0
        // }
      ],
      dialogStatisticsData: [
        {
          peopleNum: 234,
          liveDuration: "38分钟"
        }
      ],
      liveScope: 1,
      liveStatus: 1,

      lecturerUrl: "https://dev.yunxin.163.com/",
      guestUrl: "https://www.cnblogs.com/",
      audienceUrl: "https://www.soho.com",

      circleId: null
    };
  },
  created() {
    vm = this;
    this.circleId = this.$route.query.id;
    vm.getLiveList("", "");
  },
  methods: {
    // 搜索按钮
    search(){
      this.searchForm.pageNo = 1;
      this.searchList();
    },

    searchList() {
      console.log("查询");
      var searchStatusString;
      var searchStatusInt;
      searchStatusString = this.searchForm.liveStatus;
      if (searchStatusString == "预告") {
        searchStatusInt = 1;
      } else if (searchStatusString == "直播中") {
        searchStatusInt = 2;
      } else if (searchStatusString == "已结束") {
        searchStatusInt = 4;
      } else {
        searchStatusInt = null;
      }
      console.log("searchList() : searchStatusInt = " + searchStatusInt);
      this.getLiveList(this.searchForm.liveName, searchStatusInt);
    },
    resetForm() {
      console.log("重置alex");
      // this.$router.push({
      //   path: '/role-manage',
      // })
      this.searchForm.liveName = "";
      this.searchForm.liveStatus = "";
      this.search();
    },
    //新建直播
    createLive() {
      this.$router.push({
        path: "/create-live",
        query: {
          circleId: this.circleId
        }
      });
    },
    //弹出直播链接弹窗
    liveLink(row) {
      this.dialogLivelinkVisible = true;
      this.liveScope = row.liveScope;
      this.liveStatus = row.liveStatus;
      console.log(
        "liveLink() : liveScope = " +
          this.liveScope +
          ", liveStatus = " +
          this.liveStatus
      );

      vm.GET("rtc/liveAdmin/url/" + row.rtcId, "").then(res => {
        if (res.code == "000000") {
          this.lecturerUrl = res.data.lecturerUrl;
          this.guestUrl = res.data.guestUrl;
          this.audienceUrl = res.data.audienceUrl;
          this.dialogLivelinkVisible = true;
        } else {
          //
        }
      });
    },
    //关闭直播链接弹窗
    handleLivelinkClose() {
      this.dialogLivelinkVisible = false;
    },
    //回放
    reviewLive(row) {},
    //数据统计
    countLive(row) {
      this.dialogStatisticsVisible = true;
      console.log("getStatisticsData() : this.circleId = " + this.circleId);
      vm.GET("rtc/liveAdmin/data/" + row.rtcId, "").then(res => {
        if (res.code == "000000") {
          let listData = [];
          let obj = {
            peopleNum: res.data.viewedPersonTime,
            liveDuration: res.data.liveDuration
          };
          listData.push(obj);
          this.dialogStatisticsData = listData;
        } else {
          this.dialogStatisticsData = [];
        }
      });
    },
    handleStatisticsClose() {
      this.dialogStatisticsVisible = false;
    },
    //编辑直播
    editLive(row) {
      this.$router.push({
        path: "/create-live",
        query: {
          // rtcId: "1"
          rtcId: row.rtcId,
          circleId: this.circleId
        }
      });
    },
    //删除直播
    deleteLive(row) {
      this.$confirm(`确定删除“${row.liveName}”吗？`, "", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
        // customClass: 'range-make-box',
      })
        .then(() => {
          //  confirm
          let req = {
            rtcId: row.rtcId
          };
          vm.DELETE("rtc/liveAdmin", req).then(res => {
            if (res.code == "000000") {
              vm.$message({
                type: "success",
                message: "删除成功"
              });
              this.getLiveList("", "");
            } else {
              vm.$message({
                type: "success",
                message: "删除失败"
              });
            }
          });
        })
        .catch(() => {});
    },
    // //编辑直播
    // editLive(row) {
    //   this.$router.push({
    //     path: "/create-live",
    //     query: {
    //       // rtcId: "16"
    //       rtcId: row.id,
    //
    //     }
    //   });
    // },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchForm.pageNo = 1;
      this.searchList();
    },
    handleNumChange(val) {
      this.searchForm.pageNo = val;
      this.searchList();
    },
    //查询直播列表
    getLiveList(name, status) {
      let req = {
        circleId: this.circleId,
        name: name,
        liveStatus: status,
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize
      };
      console.log("alex name = " + name + ", status = " + status);
      vm.POST("rtc/liveAdmin/list", req).then(res => {
        if (res.code == "000000") {
          // console.log(res);
          let listData = [];
          if (res.data.pageContents == null) {
            return;
          }
          for (let i = 0; i < res.data.pageContents.length; i++) {
            let obj = {
              liveName: res.data.pageContents[i].name,
              liveScope: res.data.pageContents[i].scope,
              liveStatus: res.data.pageContents[i].liveStatus,
              createTime: res.data.pageContents[i].createdTime,
              startTime: res.data.pageContents[i].openTime,
              endTime: res.data.pageContents[i].endTime,
              rtcId: res.data.pageContents[i].id
            };
            listData.push(obj);
          }
          this.tableData = listData;

          this.totalRows = res.data.totalRows;
        } else {
          this.tableData = [];
        }
      });
    },
    copyTxt(type) {
      let txt = document.getElementById("copyInput");
      if (type == 1) {
        txt.value = this.lecturerUrl;
      } else if (type == 2) {
        txt.value = this.guestUrl;
      } else {
        txt.value = this.audienceUrl;
      }
      txt.select(); //选择对象
      document.execCommand("copy");

      vm.$message({
        type: "success",
        message: "分享链接已复制，快分享给好友吧"
      });
    },
    jumpUrl(type) {
      var url;
      if (type == 1) {
        url = this.lecturerUrl;
      } else if (type == 2) {
        url = this.guestUrl;
      }
      window.open(url);
    }
  }
};
</script>
<style lang="scss">
.yqrange-index-wrapper {
  .yqrange-index-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
  }
  .el-button--text {
    color: #449284;
    font-size: 14px;
    &::after {
      content: "";
      position: relative;
      height: 14px;
      /*border-right: 1px solid #EBEEF5;*/
      border-right: 1px solid #aaaaaa;
      padding-right: 10px;
    }
    &:last-of-type {
      &::after {
        content: "";
        position: relative;
        width: 1px;
        height: 14px;
        border-right: none;
      }
    }
  }
}
.live_url_style {
  display: flex;
  padding: 10px;
}
.href_outer_border {
  margin-top: 10px;
}
.href_style {
  width: 1500px;
  background-color: #d8d8d8;
  padding:10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.href_button_style {
  margin-left: 35px;
}
.hidden-input {
  height: 0;
}
</style>
