<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 performList"
              :value="item.id"
              :key="index"
            >
              {{ item.name }}
            </a-checkbox>
          </a-checkbox-group>
        </a-spin>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getPerformList } from '@/api/ticketSetting/perform'
import { getTravelAgencyUserPerforms, setTravelAgencyUserPerforms } from '@/api/saleChannel/travelAgency'

import modalMixin from './modalMixin'

export default {
  mixins: [modalMixin],
  data () {
    return {
      loading: false,
      performList: [],
      formData: {},
      checkedList: []
    }
  },
  created () {
    this.getPerformList()
  },
  methods: {
    showCallback (data) {
      this.formData = data
      this.checkedList = []
      this.getBindPerformList(data.id)
    },
    handleOk () {
      this.confirmLoading = true
      setTravelAgencyUserPerforms(this.formData.id, this.checkedList).then(res => {
        this.$message.success('操作成功')
        this.handleCancel()
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    getPerformList () {
      getPerformList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.performList = res.extraInfo.list
      })
    },
    getBindPerformList (id) {
      this.loading = true
      getTravelAgencyUserPerforms(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>
