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

<script>
import topInfo from '@/layout/public/top.vue';
import detailInfo from '@/layout/room/detailInfo.vue';
import { createNamespacedHelpers, mapState } from 'vuex';
const { mapActions: roomuser } = createNamespacedHelpers('roomuser');
const { mapActions: room } = createNamespacedHelpers('room');
export default {
  name: 'detail',
  props: {},
  components: {
    detailInfo,
    topInfo,
  },
  data: () => ({
    form: {
      adverts: [],
    },
    newlist: [],
  }),
  created() {
    this.search();
  },
  methods: {
    ...roomuser({ roomuserquery: 'query' }),
    ...room({ roomquery: 'query', roomfetch: 'fetch', roomupdate: 'update', roomcreate: 'create' }),
    async search() {
      const res = await this.roomuserquery({ role: '3' });
      this.$set(this, `newlist`, res.data);
      if (this.id) {
        const val = await this.roomfetch(this.id);
        this.$set(this, `form`, val.data);
      }
    },
    async onSubmit({ data }) {
      if (this.id) {
        console.log(data);

        let res = this.roomupdate(data);
        this.$checkRes(res, '修改房间成功', '创建房间失败');
      } else {
        let res = this.roomcreate(data);
        this.$checkRes(res, '创建房间成功', '创建房间失败');
      }
      this.$router.push({ path: './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>
