<template>
  <a-modal
    :visible="visible"
    :title="`${formData.name} - 绑定票种`"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    width="500px"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="选择票种"
      >
        <a-spin :spinning="loading">
          <a-checkbox-group
            v-model="checkedList"
            @change="onChange"
          >

            <a-checkbox
              v-for="(item,index) in ticketList"
              :value="item.id"
              :key="index"
            >
              {{ item.name }}
            </a-checkbox>
          </a-checkbox-group>
        </a-spin>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getTicketType } from '@/api/ticketSetting/ticket'
import { getTravelAgencyUserTickets, setTravelAgencyUserTickets } from '@/api/saleChannel/travelAgency'

import modalMixin from './modalMixin'

export default {
  mixins: [modalMixin],
  data () {
    return {
      loading: false,
      ticketList: [],
      formData: {},
      checkedList: []
    }
  },
  created () {
    this.getTicketList()
  },
  methods: {
    showCallback (data) {
      this.formData = data
      this.checkedList = []
      this.getBindTicketlist(data.id)
    },
    handleOk () {
      this.confirmLoading = true
      setTravelAgencyUserTickets(this.formData.id, this.checkedList).then(res => {
        this.$message.success('操作成功')
        this.handleCancel()
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    getTicketList () {
      getTicketType({
        channel: 4,
        pageNum: 1,
        pageSize: 999,
        status: ['active', 'inactive']
      }).then(res => {
        this.ticketList = res.extraInfo.list
      })
    },
    getBindTicketlist (id) {
      this.loading = true
      getTravelAgencyUserTickets(id).then(res => {
        this.checkedList = res.extraInfo.list.map(i => i.id)
        this.loading = false
      })
    },
    onChange () {

    }
  }
}
</script>

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