<template>
  <div class="wrap">
    <h3>转播到第三方平台</h3>
    <p>支持在视频号第三方平台同步您的直播内容</p>
    <el-button class="mb20" type="primary" @click="modifiRebroadcast({type:0})" v-if="liveStatus === 2 && [1,4].includes(type)"
      >配置转播平台信息</el-button
    >
    <el-table
      :data="pushList"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        label="平台名称"
        width="100">
        <template slot-scope="scope">
          {{ channelFilter(scope.row.channel) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="pushUrl"
        label="推流地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pushParam"
        label="推流码/秘钥">
      </el-table-column>
      <el-table-column
        prop="pushParam"
        label="是否推流"
        width="100">
        <template slot-scope="scope">
          <el-switch
            @change="()=>changeIsPush(scope.row)"
            v-model="scope.row.isPush"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="2"
            :disabled="liveStatus === 4 || ![1,4].includes(type)"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop=""
        label="转播状态"
        width="100">
        <template slot-scope="scope">
          {{ scope.row.runStatus === 1 ? '活跃' : '不活跃' }}
        </template>
      </el-table-column> -->
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        v-if="liveStatus !== 4 && [1,4].includes(type)">
        <template slot-scope="scope">
          <el-button @click="modifiRebroadcast({type:1,row: scope.row, index: scope.$index})" type="text" size="small" v-if="liveStatus === 2">修改</el-button>
          <el-button  @click="modifiRebroadcast({type:2,row: scope.row, index: scope.$index})" type="text" size="small" v-if="scope.row.isPush === 2 || liveStatus === 2">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <platformDialog ref="platformDialogRef" :pushList="pushList" :title="platformVisibleTitle" :visible="platformVisible" @close="cancelPlatform" @confirm="confirmPlatformDialog"></platformDialog>
  </div>
</template>
<script>
import { channelArr } from "@/utils/options";
import { savePush, deletePush } from "@/api/videoLive" 
import platformDialog from "@/views/liveBroadcast/components/platformDialog"
export default {
  components: {
    platformDialog
  },
  props: {
    pushList: {
      type: Array,
      default: () => ([])
    },
    liveStatus: {
      type: Number
    },
    type: {
      type: Number | String
    }
  },
  data() {
    return {
      platformVisible: false,
      channelArr,
      platformVisibleTitle: '添加转播平台信息',
      loading: false
    }
  },
  methods: {
    channelFilter(value) {
      for(let i=0;i<this.channelArr.length;i++){
        if(value === this.channelArr[i].id) {
          return this.channelArr[i].label
        }
      }
    },
    cancelPlatform() {
      this.platformVisible = false
    },
    async confirmPlatformDialog(dialogPlatformForm) {
      dialogPlatformForm.isPush = dialogPlatformForm.id ? dialogPlatformForm.isPush : 1
      dialogPlatformForm.videoId = this.$route.query.id
      let ret = await savePush(dialogPlatformForm)
      if(ret && ret.code === 0) {
        if(dialogPlatformForm.id){
          Object.assign(this.pushList[dialogPlatformForm.index],ret.data)
        } else {
          this.$emit('addPush', Object.assign({},ret.data))
        }
        this.cancelPlatform();
      }
    },
    async modifiRebroadcast({type,row,index}) {
      if(type === 0){
        this.platformVisibleTitle = '添加转播平台信息'
        this.platformVisible = true
      } else if(type === 1) {
        this.platformVisibleTitle = '修改转播平台信息'
        this.$refs.platformDialogRef.dialogPlatformForm = Object.assign({},row, {index})
        this.platformVisible = true
      } else {
        this.$confirm(`确定删除该条转播信息吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true
          let ret = await deletePush({id: row.id}).catch(()=>{})
          if(ret && ret.code === 0) {
            this.pushList.splice(index,1)
          }
          this.loading = false
        }).catch(() => { 
        });
      }
    },
    changeIsPush(item) {
      this.$confirm(`确定${item.isPush === 1 ? '开启':'关闭'}转播吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.loading = true
          let ret = await savePush(item)
          if(ret && ret.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              center: true
            })
          } else {
            item.isPush = item.isPush === 1 ?  2 : 1       
          }
          this.loading = false
        }).catch(() => {
          item.isPush = item.isPush === 1 ?  2 : 1       
        });
    }
  },
}
</script>
<style scoped lang="scss">
.mb20{
  margin-bottom: 20px;
}
.wrap{
  padding: 20px;
}
h3{
  margin: 0 0 20px 0;
}
</style>
