<template>
  <div class="app-container">
    <div class="mb10">
      <el-input
        v-model="queryParams.title"
        class="w260 mb10"
        clearable
        placeholder="请输入直播标题名称"
      />
      <el-input
        v-model="queryParams.advisorName"
        class="w260 mb10"
        clearable
        placeholder="投顾主播名称"
      />
      <!-- <el-select class="mb10" clearable v-model="queryParams.comId" 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.deptId"
        class="mb10"
        clearable
        filterable
        placeholder="营业部"
      >
        <el-option
          v-for="item in deptList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <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.isColumn"
        class="mb10"
        clearable
        filterable
        placeholder="是否为专栏直播"
      >
        <el-option label="是" :value="1" />
        <el-option label="否" :value="2" />
      </el-select>
      <!-- <el-select class="mb10"  clearable v-model="queryParams.status" :disabled="user.roles[0] == '运营'" filterable placeholder="产品状态">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
      <el-date-picker
        v-model="dateVale"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <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="180">
        </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="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 ? scope.row.liveStatusLabel : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="!settingToC"
          prop="name"
          label="标签"
          width="180"
        >
          <template slot-scope="scope">
            <span v-for="item in scope.row.tagVOList" :key="item.id">{{
              item.name + " "
            }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="投顾主播名称" width="180">
          <template slot-scope="scope">
            {{ scope.row.advisorBasic ? scope.row.advisorBasic.name : "" }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="所属分公司" width="180">
            <template slot-scope="scope">
              {{ scope.row.createUserCmpName }}
            </template>
          </el-table-column> -->
        <el-table-column prop="name" label="所属营业部" width="180">
          <template slot-scope="scope">
            {{ scope.row.advisorBasic ? scope.row.advisorBasic.deptName : "" }}
          </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
          v-if="!settingToC"
          prop="name"
          label="是否为专栏直播"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.columnId ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="!settingToC"
          prop="name"
          label="专栏名称"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.columnName }}
          </template>
        </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="endTime" label="直播结束时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.endTime ? scope.row.endTime : "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" width="180">
        </el-table-column>

        <!-- <el-table-column prop="name" label="购物车产品数量" width="180" v-if="user.roles[0] !== '运营'">
            <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="name" label="产品状态" width="180">
          <template slot-scope="scope">
            {{ statusListLabel[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="备注" width="180">
        </el-table-column>
        <el-table-column prop="weight" label="是否推荐" width="180">
          <template slot-scope="scope">
            {{ scope.row.weight ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="操作"
          width="400"
          fixed="right"
        >
          <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, 5].includes(scope.row.status)"
              type="text"
              @click="openProduct(scope.row)"
              >{{ scope.row.playType === 1 ? "单场分析" : "数据" }}</el-button
            >
            <el-button
              v-if="
                [3, 5].includes(scope.row.status) && scope.row.playType === 1
              "
              type="text"
              @click="toDateDetail(scope.row)"
              >数据大屏</el-button
            >
            <!-- <el-button v-if="[5].includes(scope.row.status)" type="text" @click="listing(scope.row)">重新上架</el-button> -->
            <!-- <el-button v-if="[3].includes(scope.row.status) && !scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,1)"
                type="text">推荐</el-button>
                <el-button v-if="[3].includes(scope.row.status) && scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,2)"
                type="text">取消推荐</el-button> -->
            <el-button
              v-if="[3].includes(scope.row.status)"
              type="text"
              @click="downloadByBlob(scope.row)"
              >下载海报</el-button
            >
            <el-button
              v-if="[3].includes(scope.row.status)"
              class="tag"
              type="text"
              @click="copyUrl($event, scope.row)"
              >{{
                scope.row.playType === 1 ? "复制直播链接" : "复制视频链接"
              }}</el-button
            >
            <!-- <el-button v-if="[3].includes(scope.row.status) " @click="listing(scope.row)" type="text">下架</el-button> -->
            <!-- <el-button v-if="[2].includes(scope.row.status)" @click="toCreate(scope.row.id, 3)"
                type="text">审核</el-button> -->
          </template>
        </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="推流地址">
          {{ dialogForm.pushUrl }}
          <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-item label="播流地址">
          {{ dialogForm.playUrl }}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="推荐"
      :visible.sync="dialogTableRecommend"
      :modal-append-to-body="false"
    >
      <el-form
        ref="recommendForm"
        :model="recommendForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="视频名称">
          <el-input v-model="recommendForm.title" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="推荐权重" prop="name">
          <el-input-number
            v-model="recommendForm.weight"
            :step="1"
            :precision="0"
            :min="0"
            :max="100"
            label="权重值"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('recommendForm')"
            >确 定</el-button
          >
          <el-button @click="dialogTableRecommend = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      v-if="showQrCode"
      :visible.sync="showQrCode"
      append-to-body
      width="400px"
      title="生成二维码"
    >
      <QrCode ref="QrCode" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getInfoList,
  tagList,
  livePlayInfo,
  updateStatus,
  recommendSave,
  infoGet,
  urlResize
} from "@/api/videoLive";
import { getDepts } from "@/api/channel";
import QrCode from "@/components/QrCode";
import { mapGetters, mapState } from "vuex";
import dayjs from "dayjs";
import { handleClipboard } from "./config";
import { cryptoDecode } from "@/utils/crypto.js";
export default {
  components: {
    QrCode
  },
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10,
        userType: 2,
        deptId: null
      },
      showQrCode: false,
      total: 1,
      loading: 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,
      dialogTableRecommend: false,
      optionsTag: [],
      loadingTag: false,
      dialogForm: {
        pushUrl: "",
        playUrl: ""
      },
      recommendForm: {
        title: "",
        weight: "",
        option: 1,
        id: null
      },
      productTypeList: {
        1: "观点包",
        3: "视频",
        21: "自定义"
      },
      copyText: "",
      rules: {
        weight: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ]
      },
      deptList: [],
      dateVale: ""
    };
  },
  computed: {
    ...mapGetters(["user"]),
    ...mapState({
      settingToC: state => state.settings.settingToC
    })
  },
  mounted() {
    this.queryList();
    this.getColumnList();
  },

  methods: {
    cryptoDecode,
    getColumnList() {
      getDepts().then(res => {
        if (res.code === 0) {
          this.deptList = res.data;
        }
      });
    },
    queryList() {
      this.loading = true;
      if (this.dateVale) {
        this.queryParams.liveTimeStart = dayjs(this.dateVale[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        this.queryParams.liveTimeEnd = dayjs(this.dateVale[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      } else {
        this.queryParams.liveTimeStart = "";
        this.queryParams.liveTimeEnd = "";
      }
      this.queryParams.userType = 2;
      this.queryParams.status = 3;
      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 = 2;
      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();
    },
    openProduct(val) {
      // this.$router.push(`/liveBroadcast/marketing?id=${val.id}&type=2`)
      window.open(
        `${location.origin + location.pathname}#/liveBroadcast/marketing?id=${
          val.id
        }&type=2`
      );
    },
    toCreate(id, type) {
      // type = 2 查看
      if (id && type) {
        this.$router.push(
          `/liveBroadcast/liveBroadcastCreate?id=${id}&type=${type}&userType=2`
        );
      } else {
        this.$router.push("/liveBroadcast/liveBroadcastCreate?userType=2");
      }
    },
    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) {
      livePlayInfo({ id: item.id }).then(res => {
        if (res.code === 0) {
          this.dialogForm.pushUrl = res.data.pushUrl;
          this.dialogForm.playUrl = res.data.playUrl;
          this.dialogInputVisible = true;
        }
      });
    },
    listing(item) {
      this.$confirm(
        `您确定提交${[5].includes(item.status) ? "重新上架" : "下架"}?`,
        {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 申请上架
          if ([5].includes(item.status)) {
            updateStatus({ id: item.id, status: 3 }).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "重新上架成功!"
                });
                this.searchList();
              }
            });
          } else {
            // 撤回
            updateStatus({ id: item.id, status: 5 }).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("获取带货产品失败!");
        }
      });
    },
    // 下载海报
    downloadByBlob(val) {
      this.showQrCode = true;
      // const url = `${window.location.origin}/syzbh5/videoPlay?id=${this.cryptoDecode(val.id)}&saleUserId=${this.user.user.id}`
      const url = `${window.location.origin}/syzbh5/videoPlay?id=${
        val.id
      }&saleUserId=${this.user.user.id}`;
      this.$nextTick(() => {
        this.$refs.QrCode.createCode(url);
      });
    },
    download(href, name) {
      const eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    async copyUrl(event, item) {
      const currentTarget = event.currentTarget;
      // let res = await livePlayInfo({ id: item.id })
      // if (res.code === 0) {
      //   handleClipboard(res.data.playUrl, event, currentTarget)
      // }
      // const url = `${window.location.origin}/syzbh5/videoPlay?id=${this.cryptoDecode(item.id)}&saleUserId=${this.user.user.id}`
      const ret = await urlResize({
        url: `/videoPlay?id=${item.id}&saleUserId=${this.user.user.id}`
      });
      if (ret.code === 0) {
        handleClipboard(ret.data, event, currentTarget);
      }
    },
    copyUrlTwo(event, url, type) {
      const currentTarget = event.currentTarget;
      const splitUrl = JSON.parse(JSON.stringify(url));
      var regex = /^(.*)\/(\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 = /(\/[\d]+\?.*)$/;
      var match = rtmpUrl.match(regex);

      if (match && match.length > 1) {
        // 返回匹配到的部分（即/数字?及之后的所有内容）
        return match[1];
      } else {
        // 如果没有匹配到，返回空字符串或错误信息
        return ""; // 或者 'Error: No match found';
      }
    },
    openRecommend(item, type) {
      if (type === 1) {
        this.dialogTableRecommend = true;
        this.recommendForm.option = type;
        this.recommendForm.title = item.title;
        this.recommendForm.weight = item.weight;
        this.recommendForm.id = item.id;
      } else {
        this.$confirm(`您确定取消推荐?`, {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 申请上架
            recommendSave({ id: item.id, option: 2 }).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: "success",
                  message: "取消推荐成功!"
                });
                this.searchList();
              }
            });
          })
          .catch(() => {});
      }
    },
    submit(formName) {
      if (!this.recommendForm.weight)
        return this.$message.error("推荐权重不能为0!");
      this.$refs[formName].validate(valid => {
        if (valid) {
          recommendSave(this.recommendForm).then(res => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.dialogTableRecommend = false;
              this.searchList();
            }
          });
        }
      });
    },
    toDetail(val) {
      this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=3`);
    },
    toDateDetail(val) {
      window.open(
        `${location.origin + location.pathname}#/largeScreen/index?videoId=${
          val.id
        }&type=2`
      );
      // this.$router.push(
      //     `/largeScreen/index?videoId=${val.id}&type=1`
      // );
    }
  }
};
</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>
