<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:value="searchForm.circleName"
                clearable
                placeholder="请输入圈子名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视频描述">
              <el-input
                v-model:value="searchForm.desc"
                clearable
                placeholder="请输入视频描述"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布者">
              <el-input
                v-model:value="searchForm.publisherName"
                clearable
                placeholder="请输入发布者"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视频状态">
              <el-select
                v-model:value="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:value="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 v-slot="scope">
            <span>{{ $filters.liveDateFilter(scope.row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="publisherName"
          label="发布者"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="publisherAddress"
          label="所在省市"
          align="center"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="status" label="视频状态" align="center">
          <template v-slot="scope">
            <span>{{ $filters.videoStatusFilter(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="modifiedTime" label="更新时间" align="center">
          <template v-slot="scope">
            <span>{{ $filters.liveDateFilter(scope.row.modifiedTime) }}</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 v-slot="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 ||
                scope.row.status == 5
              "
              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.searchForm.pageNo = 1
            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-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>
