<template>
  <a-modal
    :visible="visible"
    title="绑定自助机"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form>
        <a-form-item label="自助机列表">
          <a-checkbox-group v-model="selectedTerm">
            <a-checkbox
              v-for="(term,index) in termList"
              :key="index"
              :value="term.id"
            >
              {{ term.mac }} - {{ term.nickname || '空' }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getScenicTerms, setScenicTerms } from '@/api/ticketSetting/scenic'
import { getTermManager } from '@/api/saleChannel/term'

export default {
  data () {
    return {
      visible: false,
      loading: false,
      termList: [],
      selectedTerm: []
    }
  },
  created () {
    getTermManager({ pageNum: 1, pageSize: 0, status: 'active,inactive' }).then(res => {
      this.termList = res.extraInfo.list
    })
  },
  methods: {
    show (scenic) {
      this.visible = true
      this.id = scenic.id
      this.selectedTerm = []
      this.getTerms()
    },
    handleOk () {
      this.loading = true

      setScenicTerms(this.id, this.selectedTerm).then(res => {
        this.$message.success('设置成功')
        this.handleCancel()
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel () {
      this.visible = false
    },
    getTerms () {
      this.loading = true

      getScenicTerms(this.id).then(res => {
        this.selectedTerm = res.extraInfo.list.map(i => i.id)
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ant-checkbox-wrapper{
    display: block; margin-left: 0; margin-bottom: 5px;
}
</style>
