<!-- 搜索表单 -->
<template>
  <el-form label-width="77px" class="ele-form-search">
    <el-row :gutter="15">
      <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
        <el-form-item label="频道:">{{ channelId }}</el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
        <el-form-item label="场次id:">
          <el-input clearable v-model="sessionId" placeholder="请输入场次id" />
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 8, md: 16 } : { span: 8 }">
        <div class="ele-form-actions">
          <el-button type="primary" :loading="loading" @click="sessionApiQuery">
            同步场次数据
          </el-button>
          <el-button @click="viewlogClick">频道观看日志</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { sessionApi } from '@/api/sylive/live';

  export default {
    props: {
      channelId: null
    },
    data() {
      return {
        loading: false,
        sessionId: ''
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      viewlogClick() {
        const activityId = this.$route.query.id;
        this.$router.replace('/sylive/live/viewlog?id=' + activityId);
      },
      /* 查询同步直播场次数据 */
      sessionApiQuery() {
        const activityId = this.$route.query.id;
        sessionApi({
          activityId: activityId,
          channelId: this.channelId,
          sessionId: this.sessionId
        })
          .then((msg) => {
            this.$message.success(msg);
            this.$emit('search');
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      }
    }
  };
</script>
