<template>
  <page-layout title="房间">
    <a-card>
      <a-row>
        <a-col class="item">
          <a-table
            rowKey="id"
            :loading="state.loading"
            :columns="columns"
            :dataSource="roomList"
            :pagination="false">
            <template slot="operation" slot-scope="text, record, index">
              <a-button-group>
                <a-button type="primary" @click="$router.push({name: 'roomEdit', params: {id: record.id.toString()}})">
                  编辑
                </a-button>
                <a-button @click="$router.push({name: 'seat', params: {id: record.id.toString()}})">座位管理</a-button>
                <a-button @click="handleDownload">下载二维码</a-button>
              </a-button-group>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </page-layout>
</template>

<script>
  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      width: '30%'
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: '15%'
    },
    {
      title: '说明',
      dataIndex: 'description',
      width: '25%'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
      width: '30%'
    }
  ]
  import api from '../../api/room'
  import PageLayout from '../../components/page/PageLayout'

  export default {
    name: 'Room',
    components: {
      PageLayout
    },
    data () {
      return {
        columns,
        layout1: {
          xs: { span: 24 },
          sm: { span: 8 },
          xl: { span: 8 },
        },
        layout2: {
          xs: { span: 12 },
          sm: { span: 8 },
          xl: { span: 4 },
        },
        state: {
          loading: false,
        },
        roomList: [],
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        this.state.loading = true
        api.getRoomList()
          .then(data => {
            this.roomList = data
            this.state.loading = false
          })
          .catch(() => {
            this.state.loading = false
          })
      },
      handleDownload () {

      }
    }
  }
</script>

<style scoped lang="less">

</style>