<template>
  <div class="app-container">
    <div class="mb10">
      <el-input
        v-model="queryParams.title"
        class="w260 mb10"
        clearable
        placeholder="请输入直播标题名称"
      />
      <el-select
        v-model="queryParams.playType"
        class="mb10"
        clearable
        filterable
        placeholder="播放类型"
      >
        <el-option
          v-for="item in playTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="queryParams.liveStatus"
        class="mb10"
        clearable
        filterable
        placeholder="直播状态"
      >
        <el-option
          v-for="item in liveStatusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="queryParams.status"
        class="mb10"
        clearable
        filterable
        placeholder="审核状态"
      >
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="searchList()">查询</el-button>
    </div>
    <div class="mb10">
      <el-table v-loading="loading" :data="data" border style="width: 100%">
        <el-table-column label="序号" type="index" fixed width="50">
        </el-table-column>
        <el-table-column prop="startTime" label="直播开始时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.startTime ? scope.row.startTime : "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="white-space: normal;"
              @click="toDetail(scope.row)"
              >{{ scope.row.title }}</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
                prop="viewPoint"
                label="简介"
                width="180">
               </el-table-column> -->
        <el-table-column prop="imgUrl" label="封面" width="100">
          <template #default="scope">
            <el-popover placement="right" :width="400" trigger="hover">
              <img :src="scope.row.imgUrl" width="375" height="300" />
              <template #reference>
                <img
                  :src="scope.row.imgUrl"
                  style="max-height: 60px; max-width: 60px"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="直播状态" width="180">
          <template slot-scope="scope">
            {{
              scope.row.playType === 1 ? liveLabel[scope.row.liveStatus] : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="播放类型" width="180">
          <template slot-scope="scope">
            {{ scope.row.playType === 1 ? "直播" : "录播" }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="购物车产品数量" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="toProductList(scope.row)">
              {{
                scope.row.cartVOList.length ? scope.row.cartVOList.length : 0
              }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="观看限制" width="180">
          <template slot-scope="scope">
            {{ limitTypeList[scope.row.limitType] }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="直播结束时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.endTime ? scope.row.endTime : "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="subscribeUserCount" label="预约人数" width="180">
        </el-table-column>
        <el-table-column prop="name" label="风险等级" width="180">
          <template slot-scope="scope">
            {{ riskLevelList[scope.row.riskLevel] }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="产品状态" width="180">
          <template slot-scope="scope">
            {{ statusListLabel[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="transStatus" label="转码状态" width="180">
          <template slot-scope="scope">
            {{
              scope.row.transStatus === 1
                ? "转码中"
                : scope.row.transStatus === 2
                ? "已转码"
                : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          fixed="right"
          align="center"
          width="400"
        >
          <template slot-scope="scope">
            <el-button
              v-if="[3, 5, 6].includes(scope.row.status)"
              type="text"
              @click="toCreate(scope.row.id, 2)"
              >查看</el-button
            >
            <el-button
              v-if="
                [3].includes(scope.row.status) &&
                  scope.row.playType === 1 &&
                  scope.row.liveStatus !== 4
              "
              type="text"
              @click="openPlayInfo(scope.row)"
              >推流</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="备注" width="180">
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="queryParams.current"
      :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="带货产品清单"
      :visible.sync="dialogTableVisible"
      :modal-append-to-body="false"
    >
      <el-table :data="gridData">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          property="productName"
          label="产品名称"
        ></el-table-column>
        <el-table-column property="productType" label="产品类型">
          <template slot-scope="scope">
            {{ productTypeList[scope.row.productType] }}
          </template>
        </el-table-column>
        <el-table-column label="投顾名称">
          <template slot-scope="scope">
            {{ scope.row.advisorBasic ? scope.row.advisorBasic.name : "" }}
          </template>
        </el-table-column>
        <el-table-column
          property="count"
          label="本场直播点击数"
        ></el-table-column>
        <el-table-column
          property="subCount"
          label="本场直播订阅数"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="推流"
      :visible.sync="dialogInputVisible"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="推流地址">
          <div>{{ dialogForm.pushUrl }}</div>
          <el-button
            type="text"
            class="tag"
            style="margin-left:10px;"
            @click="copyUrlTwo($event, dialogForm.pushUrl, 1)"
            >复制服务器地址</el-button
          >
          <el-button
            type="text"
            class="tag"
            style="margin-left:10px;"
            @click="copyUrlTwo($event, dialogForm.pushUrl, 2)"
            >复制推流码</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getInfoList,
  tagList,
  infoSubmit,
  infoRecall,
  infoGet,
  urlResize
} from "@/api/videoLive";
import { getGuestPushUrl } from "@/api/guests";
import { mapGetters, mapState } from "vuex";
import { handleClipboard } from "../manage/config";
import { cryptoDecode } from "@/utils/crypto.js";
export default {
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10,
        isGuest: 1,
        title: "",
        playType: "",
        liveStatus: "",
        status: ""
      },
      total: 1,
      loading: false,
      showQrCode: false,
      playTypeList: [{ value: 1, label: "直播" }, { value: 2, label: "录播" }],
      liveStatusList: [
        { value: 1, label: "直播中" },
        { value: 2, label: "未开始" },
        { value: 3, label: "暂停中" },
        { value: 4, label: "已结束" }
      ],
      statusList: [
        { value: 1, label: "待提交" },
        { value: 2, label: "待审核" },
        { value: 3, label: "已上架" },
        { value: 4, label: "已驳回" },
        { value: 5, label: "已下架" }
      ],
      statusListLabel: ["", "待提交", "待审核", "已上架", "已驳回", "已下架"],
      liveLabel: ["", "直播中", "未开始", "暂停中", "已结束"],
      limitTypeList: {
        1: "不限制",
        2: "手机号",
        3: "邀请码",
        4: "微信授权",
        5: "产品专属直播"
      },
      riskLevelList: {
        1: "低风险",
        2: "中低风险",
        3: "中风险",
        4: "中高风险",
        5: "高风险"
      },
      tagIdList: [],
      data: [],
      gridData: [],
      dialogTableVisible: false,
      dialogInputVisible: false,
      optionsTag: [],
      loadingTag: false,
      dialogForm: {
        pushUrl: ""
      },
      productTypeList: {
        1: "观点包",
        21: "自定义"
      },
      copyText: "",
      cVideoDetail: {} // 点击下载按钮的视频详情
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  mounted() {
    this.queryList();
    this.remoteMethodTag("");
  },

  methods: {
    cryptoDecode,
    queryList() {
      this.loading = true;
      this.queryParams.userType = 1;
      getInfoList(this.queryParams).then(data => {
        this.data = data.data.list;
        this.total = data.data.total;
        this.loading = false;
      });
    },
    searchList() {
      this.queryParams.size = 10;
      this.queryParams.current = 1;
      this.queryParams.userType = 1;
      this.queryList();
    },
    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();
    },
    toCreate(id, type) {
      // type = 2 查看
      if (id && type) {
        this.$router.push(
          `/liveBroadcast/liveBroadcastCreate?id=${id}&type=${type}&userType=1`
        );
      }
    },
    remoteMethodTag(query) {
      this.loadingTag = true;
      const queryParams = {
        name: query,
        current: 1,
        size: 10,
        type: 3,
        status: 1
      };
      tagList(queryParams).then(data => {
        this.optionsTag = data.data.list;
        this.loadingTag = false;
      });
    },
    openPlayInfo(item) {
      getGuestPushUrl({ id: item.id }).then(res => {
        if (res.code === 0) {
          this.dialogForm.pushUrl = res.data;
          this.dialogInputVisible = true;
        }
      });
    },
    listing(item) {
      this.$confirm(
        `您确定提交${[1, 4].includes(item.status) ? "申请上架" : "撤回"}?`,
        {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 申请上架
          if ([1, 4].includes(item.status)) {
            infoSubmit({ videoId: item.id }).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "申请上架成功!"
                });
                this.searchList();
              }
            });
          } else {
            // 撤回
            infoRecall({ id: item.id }).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "撤回成功!"
                });
                this.searchList();
              }
            });
          }
        })
        .catch(() => {});
    },
    toProductList(item) {
      infoGet({ id: item.id }).then(res => {
        if (res.code === 0) {
          this.gridData = res.data.cartVOList;
          this.dialogTableVisible = true;
        } else {
          this.$message.error("获取带货产品失败!");
        }
      });
    },
    copyUrlTwo(event, url, type) {
      const currentTarget = event.currentTarget;
      const splitUrl = JSON.parse(JSON.stringify(url));
      var regex = /^(.*)\/(guest_\d+)\?/;
      var match = splitUrl.match(regex);
      // type 1 服务器地址 2 推流码
      if (type === 1 && match[1]) {
        handleClipboard(match[1], event, currentTarget);
      } else {
        handleClipboard(
          this.extractAfterSlashNumber(url),
          event,
          currentTarget
        );
      }
    },
    extractAfterSlashNumber(rtmpUrl) {
      // 使用正则表达式匹配最后一个/开始到URL末尾的所有内容
      var regex = /(guest_[\d]+\?.*)$/;
      var match = rtmpUrl.match(regex);

      if (match && match.length > 1) {
        // 返回匹配到的部分（即/数字?及之后的所有内容）
        return match[1];
      } else {
        // 如果没有匹配到，返回空字符串或错误信息
        return ""; // 或者 'Error: No match found';
      }
    },
    toDetail(val) {
      this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=5`);
    }
  }
};
</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%;
}

.w260 {
  width: 260px;
}
</style>
