<template>
  <div id="detailStatus">
    <el-row>
      <el-col :span="24" class="top">
        <topInfo :topTitle="pageTitle"></topInfo>
      </el-col>
      <el-col :span="24" class="main">
        <detailStatusInfo :form="form" @onSubmit="onSubmit"></detailStatusInfo>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import topInfo from '@/layout/public/top.vue';
import detailStatusInfo from '@/layout/room/detailStatusInfo.vue';
import { createNamespacedHelpers, mapState } from 'vuex';
const { mapActions: room } = createNamespacedHelpers('room');
export default {
  name: 'detailStatus',
  props: {},
  components: {
    detailStatusInfo,
    topInfo,
  },
  data: () => ({
    form: {},
  }),
  created() {
    this.search();
  },
  methods: {
    ...room({ roomquery: 'query', roomfetch: 'fetch', roomupdate: 'update', roomcreate: 'create' }),
    async search() {
      if (this.id) {
        const val = await this.roomfetch(this.id);
        this.$set(this, `form`, val.data);
      }
    },
    async onSubmit({ data }) {
      const res = await this.roomupdate(data);
      if (data.status == '1') {
        this.$checkRes(res, '直播开始成功', '直播开始失败');
      } else {
        this.$checkRes(res, '直播結束成功', '直播結束失败');
      }
      this.$router.push({ path: '/room/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 20px;
  margin: 10px 20px;
  border: 1px solid #ccc;
  width: 96%;
}
</style>
