<template>
  <div class="video-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="yqrange-index-content screenSet">
      <el-form ref="searchForm" :model="searchForm"  label-suffix=":" :inline="true" size="small">
        <el-row  type="flex" style="margin-top: 10px">
          <el-col :span="6">
            <el-form-item label="圈子名称">
              <el-input v-model="searchForm.circleName" clearable placeholder="请输入圈子名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视频描述">
              <el-input v-model="searchForm.desc" clearable placeholder="请输入视频描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布者">
              <el-input v-model="searchForm.publisherName" clearable placeholder="请输入发布者"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视频状态">
              <el-select
                  v-model="searchForm.statusVideo"
                  placeholder="请选择视频状态"
                  clearable
                  style="width: 180px">
                <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <el-form-item label="快捷查询">
              <span class="search-btn" :class="{'active-search' : isActive1}" @click="fastSearch(1)">疑似违规({{breakRuleTotal}})</span>
              <span class="search-btn" :class="{'active-search' : isActive2}" @click="fastSearch(2)">机审通过待人审（{{humanCheckTotal}}）</span>
            </el-form-item>
            <el-form-item label="发布开关">
              <el-switch
                  class="switch-scope"
                  v-model="publishValue"
                  active-color="#449284"
                  inactive-color="#E6A23C"
                  active-text="机审通过发布"
                  inactive-text="人审通过发布"
                  :active-value="1"
                  :inactive-value="2"
                  @change="changeSwitch">
              </el-switch>
            </el-form-item>
            <div class="switch-tip">
              说明：“机审通过发布”状态时，机审通过即发布成功，公开视频；
              <br/>切换为人审通过发布时，需人工审核通过后才可公开。
            </div>
          </el-col>
          <el-col :span="24" 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-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="circleName" label="圈子名称"  align="center"></el-table-column>
        <el-table-column prop="desc" label="视频描述" align="center" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createdTime" label="上传时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="publisherName" label="发布者"  align="center"></el-table-column>
        <el-table-column prop="status" label="视频状态"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | videoStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="modifiedTime" label="更新时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.modifiedTime | liveDateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reviserName" label="最后修改人" align="center"></el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="visitDetail(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handlerVideo(scope.row,3)" v-if="scope.row.status == 2 || scope.row.status == 6" type="text" size="small">下线</el-button>
            <el-button @click="handlerVideo(scope.row,1)" v-if="scope.row.status == 3 || scope.row.status == 4" type="text" size="small">通过</el-button>
            <el-button @click="handlerVideo(scope.row,2)" v-if="scope.row.status == 3 || scope.row.status == 4" 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, 200]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
    </div>
    <short-video-detail
        :showVideoDetail="showVideoDetail"
        :id="videoId"
        @closeCheckDetail="handlerClose">
    </short-video-detail>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { getVideoList, getSwitch, setSwitch, manualCheck } from '@/utils/shortvideo/videoApi';
  import ShortVideoDetail from '@/components/shortvideo/shortVideoDetail';
  export default {
    components: {
      BreadCrumb,
      ShortVideoDetail,
    },
    data(){
      return{
        curmbFirst: '短视频管理',
        searchForm: {
          circleName:"",//圈子名称
          desc: '',//视频描述
          publisherName: '',//发布人姓名
          status: null,// 视频状态 1机审中 2机审通过已发布 3疑似违规 4机审通过待人审 5机审拒绝 6人审通过已发布 7已下线 8已删除
          statusVideo: null,
          pageNo: 1,
          pageSize: 10,
        },
        publishValue: null,
        publishValueCopy: null,
        totalRows: 0,
        tableData: [],
        breakRuleTotal: 0,//疑似违规总数
        humanCheckTotal: 0,//机审通过待人审总数
        showVideoDetail: false,
        statusList: [
          {
            value: 1,
            label: "机审中"
          },
          {
            value: 2,
            label: "机审通过已发布"
          },
          {
            value: 3,
            label: "疑似违规"
          },
          {
            value: 4,
            label: "机审通过待人审"
          },
          {
            value: 5,
            label: "机审拒绝"
          },
          {
            value: 6,
            label: "人审通过已发布"
          },
          {
            value: 7,
            label: "已下线"
          },
          {
            value: 8,
            label: "已删除"
          },
        ],
        idType: "",
        videoId: null,
        isActive1: false,
        isActive2: false,
      }
    },
    created() {
      this.search();
      this.getSwitchStatus();
    },
    methods: {
      changeSwitch(val) {
        setSwitch(val).then((res) => {
          if(res.code == "000000") {
           if (res.data == 1) {
             this.$message.success('操作成功，已切换为“机审通过发布”')
           }else if (res.data == 2) {
             this.$message.success('操作成功，已切换为“人审通过发布”')
           }
            this.publishValueCopy = res.data;
          }else {
            this.$message.error('状态切换失败')
            this.publishValue = this.publishValueCopy;
          }
        }).catch((error) => {
          this.$message.error("请重试");
          this.publishValue = this.publishValueCopy;
        })
      },
      search(){
        this.searchForm.pageNo = 1;
        if (this.isActive1 || this.isActive2) {
          this.isActive1 = false;
          this.isActive2 = false;
          this.searchForm.status = null;
          if (this.searchForm.statusVideo) {
            this.searchForm.status = this.searchForm.statusVideo;//把搜索框里的视频状态置为空
          }
        }else {
          if (this.searchForm.statusVideo) {
            this.searchForm.status = this.searchForm.statusVideo;//把搜索框里的视频状态置为空
          }else {
            this.searchForm.status = null;
          }
        }
        this.searchList();
      },
      getSwitchStatus() {
        getSwitch().then((res) => {
          if(res.code == "000000") {
          // 1机审通过发布 2人审通过发布
            this.publishValue = res.data;
            this.publishValueCopy = res.data;
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })
      },
      searchList() {
        openLoading(this);
        let params = this.searchForm;
        getVideoList(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000") {
            this.tableData = res.data.liteAvList;
            this.totalRows = res.data.total;
            this.breakRuleTotal = res.data.breakRuleTotal;
            this.humanCheckTotal = res.data.humanCheckTotal;
          } else {
            this.tableData = [];
          }
        }).catch((error) => {
          this.$message.error("请重试");
        })
      },
      //快捷查询
      fastSearch(type) {//type 1疑似违规，2机审通过待人审
        if (type == 1) {
          if (!this.isActive1) {
            this.searchForm.status = 3;
            this.searchForm.statusVideo = null;
            this.searchForm.circleName = "";
            this.searchForm.desc = "";
            this.searchForm.publisherName = "";
            this.searchForm.pageNo = 1;
            this.searchList();
            this.isActive1 = true;
            this.isActive2 = false;
          }else {
            this.resetForm();
          }
        }else if (type == 2) {
          if (!this.isActive2) {
            this.searchForm.status = 4;
            this.searchForm.statusVideo = null;
            this.searchForm.circleName = "";
            this.searchForm.desc = "";
            this.searchForm.publisherName = "";
            this.searchForm.pageNo = 1;
            this.searchList();
            this.isActive1 = false;
            this.isActive2 = true;
          }else {
            this.resetForm();
          }
        }
      },
      resetForm() {
        this.searchForm.circleName = "";
        this.searchForm.desc = "";
        this.searchForm.publisherName = "";
        this.searchForm.status = null;
        this.searchForm.statusVideo = null;
        this.search();
      },
      //查看
      visitDetail(row) {
        this.showVideoDetail = true;
        this.videoId = row.id;
      },
      handlerClose() {
        this.showVideoDetail = false;
      },
      //人工操作通过，拒绝，下线
      handlerVideo(row, type) {//type:1通过，2拒绝，3下线
        let typeContent = {
          1: '确定审核通过该视频？',
          2: '确定审核拒绝该视频？',
          3: '确定下线该视频？'
        };
        let content = typeContent[type];
        let setStatus = null;
        if(type == 1) {
          setStatus = 6;
        }else if (type == 2 || type == 3) {
          setStatus = 7;
        }
        let params = {
          liteAvId: row.id,
          status: setStatus,
        };
        this.$confirm(`${content}`, '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'shortvideo-make-box',
        }).then(() => {
          this.updateVideoStatus(params,type);
          //  confirm
        }).catch(() => {
          //  cancel

        });
      },
      //更新审核状态
      updateVideoStatus(params, type){
        openLoading(this);
        let successContent = {
          1: '审核通过',
          2: '审核拒绝',
          3: '下线成功'
        }
        manualCheck(params).then((res) => {
          closeLoading(this);
          if(res.code == "000000"){
            this.$message.success(successContent[type]);
            this.searchList();
          }else {
            this.$message.error('操作失败');
          }
        }).catch((error) => {
            this.$message.error("请重试");
          }

        )
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
    },
  }
</script>
<style lang="scss">
  .video-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .search-btn{
      margin-right: 25px;
      color: #449284;
      cursor: pointer;
      padding: 3px 5px;
      &.active-search{
        background-color: #449284;
        color: #ffffff;
      }
    }
    .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;
        }
      }
    }
    .el-form-item .el-form-item__label{
      font-size: 14px;
    }
  }
  .el-switch__label.is-active{
    color: #449284;
  }
  /* switch按钮样式 */
  .switch-scope{
    .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    /*打开时文字位置设置*/
    .el-switch__label--right {
      z-index: 1;
    }
    /* 调整打开时文字的显示位子 */
    .el-switch__label--right span{
      /*margin-right: 9px;*/
      margin-left: 11px;
    }
    /*关闭时文字位置设置*/
    .el-switch__label--left {
      z-index: 1;
    }
    /* 调整关闭时文字的显示位子 */
    .el-switch__label--left span{
      margin-left: 22px;
    }
    /*显示文字*/
    .el-switch__label.is-active {
      display: block;
    }
  }
  /* 调整按钮的宽度 */
  .switch-scope.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 120px !important;
    margin: 0;
  }
  .switch-tip{
    font-size: 12px;
    color: #898989;
    display: inline-block;
    margin-top: 3px;
  }
  .shortvideo-make-box{
    .el-message-box__btns{
      margin-top: 30px;
    }
  }
</style>
