<template>
  <page-layout :title="`${room.name} 座位管理`">
    <a-card>
      <a-row :gutter="10">
        <a-col
          class="item"
          :xs="{span: 12}"
          :sm="{span: 6}"
          :xl="{span: 4}">
          <span style="vertical-align: -5px">共 {{count||0}} 个</span>
        </a-col>
        <a-col
          class="item"
          :xs="{span: 12}"
          :sm="{span: 6}"
          :xl="{span: 4, offset: 8}">
          <a-popconfirm title="是否要新建？" @confirm="handleCreate">
            <a-button
              type="primary"
              icon="plus"
              style="width: 100%;">
              新建一个
            </a-button>
          </a-popconfirm>
        </a-col>
        <a-col
          class="item"
          :xs="{span: 12}"
          :sm="{span: 6}"
          :xl="{span: 4}">
          <a-popconfirm title="是否要删除？" @confirm="handleDelete">
            <a-button
              icon="delete"
              style="width: 100%;">
              删除一个
            </a-button>
          </a-popconfirm>
        </a-col>
        <a-col
          class="item"
          :xs="{span: 12}"
          :sm="{span: 6}"
          :xl="{span: 4}">
          <a-button
            icon="cloud-download"
            style="width: 100%;"
            @click="handleDownloadAll">
            下载全部
          </a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="item">
          <a-table
            rowKey="id"
            :loading="state.loading"
            :columns="columns"
            :dataSource="seatList"
            :pagination="false">
            <template slot="operation" slot-scope="text, record, index">
              <a-button-group>
                <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: '40%'
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: '20%'
    },
    {
      title: '创建时间',
      dataIndex: 'created_datetime',
      width: '20%'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
      width: '20%'
    }
  ]
  import PageLayout from '../../components/page/PageLayout'
  import api from '../../api/room'

  export default {
    name: 'Seat',
    components: {
      PageLayout
    },
    props: {
      id: String
    },
    data () {
      return {
        columns,
        params: {
          room__id: this.id
        },
        state: {
          loading: false,
        },
        room: {},
        seatList: [],
        count: 0,
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      getData () {
        this.state.loading = true
        api.getRoom(this.id)
          .then(data => {
            this.room = data
            api.getSeatList(this.params)
              .then(data => {
                this.seatList = data
                this.count = data.length
                this.state.loading = false
              })
              .catch(() => {
                this.state.loading = false
              })
          })
          .catch(() => {
            this.state.loading = false
          })
      },
      handleCreate () {
        let new_seat = {
          name: (this.count + 100).toString(),
          room: this.id
        }
        api.createSeat(new_seat)
          .then(data => {
            this.$notification.success({ message: '成功', description: `成功新建座位`, key: 'SUCCESS' })
            this.getData()
          })
      },
      handleDelete () {
        if (this.count) {
          let last = this.seatList[0]
          api.deleteSeat(last.id)
            .then(() => {
              this.$notification.success({ message: '成功', description: `成功删除座位 ${last.name}`, key: 'SUCCESS' })
              this.getData()
            })
        } else {
          this.$notification.error({ message: '错误', description: '暂无座位', key: 'ERROR' })
        }
      },
      handleDownload () {
        alert('handleDownload')
      },
      handleDownloadAll () {
        alert('handleDownloadAll')
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    margin-top: 8px;
    margin-bottom: 8px;
  }
</style>