<template>
  <a-modal
    width="1100px"
    :visible="visible"
    :title="`【${ticket&&ticket.name}】 绑定场次`"
    @cancel="handleCancel"
    @ok="handleSubmit"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="loading">
      <div class="block-title">
        绑定的场次
        <a-button
          size="small"
          type="primary"
          style="float:right;margin-left:10px;"
          @click="commonSchedulesChange"
        >
          批量修改场次
        </a-button>
        <a-button
          size="small"
          style="float:right"
          type="primary"
          @click="$refs.groupAdd.show(ticket)"
        >
          批量新增场次
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :pagination="false"
        :data-source="bindBatches"
        :row-key="record => record.id"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <template
          slot="status"
          slot-scope="text, record"
        >
          <a-tag :color="record.status==='active'?'green':'red'">
            {{ record.status==='active'?'已激活':record.status==='inactive'?'已禁用':'已删除' }}
          </a-tag>
        </template>
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="handleSingleEdit(record)"
          >
            编辑规则
          </a-button>
          <a-popconfirm
            title="确定删除？"
            @confirm="handleDelete(record)"
          >
            <a-icon
              slot="icon"
              type="question-circle-o"
              style="color: red"
            />
            <a-button
              size="small"
              type="danger"
            >
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-spin>

    <!-- 批量新增 -->
    <GroupAdd
      @addTicketBatchPrice="handleAddTicketBatchPrice"
      ref="groupAdd"
    ></GroupAdd>
    <!-- 批量场次共性设置 -->
    <GroupEdit
      ref="groupEdit"
      :fatherSelectedRowKeys="selectedRowKeys"
      @resetSelectedRowKeys="handleResetSelectedRowKeys"
    >
    </GroupEdit>
    <SingleEdit
      ref="singleEdit"
      @updateBatch="handleUpdateBatch"
      :currentBatch="currentBatch"
      :allSeatTypeList="seatTypeList"
      :currentBatchPrice="currentBatchPrice"
    ></SingleEdit>
  </a-modal>
</template>

<script>
// eslint-disable-next-line
import { setTicketBatch,getSeatTypeList ,setSalesInfo,getBatch,deleteSalesInfo} from '@/api/ticketSetting/ticket'
import GroupAdd from './GroupAdd'
import SingleEdit from './SingleEdit'
import GroupEdit from './GroupEdit'
import mixins from './mixins'

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: 120
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 140,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  mixins: [mixins],
  props: {
    batchList: {
      type: Array,
      default: () => []
    }
  },
  created () {
    this.form = this.$form.createForm(this)
  },
  components: {
    GroupAdd,
    SingleEdit,
    GroupEdit
  },
  computed: {
    scenic_type () {
      return this.$store.state.app.scenic_type
    }
  },
  data () {
    return {
      columns,
      ticket: null,
      loading: false,
      visible: false,
      ticket_type_id: '',
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      bindBatches: [],
      batchId: '',
      batchPrice: [],
      seatTypeList: [],
      currentBatch: null,
      currentBatchPrice: null,
      selectedRowKeys: []
    }
  },
  methods: {
    commonSchedulesChange () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择场次')
        return
      }
      this.$refs.groupEdit.visible = true
      console.log('所选中的场次id: ' + this.selectedRowKeys)
      console.log('所属景点号: ' + this.ticket.id)
      console.log('所属景点名: ' + this.ticket.name)
      console.log('这次选中的所有场次之名称: ', this.bindBatches.filter(item => this.selectedRowKeys.includes(item.id)).map(item => item.name))
      /* 选择选中的一系列场次的头一个场次回显 */
      const singleData = this.bindBatches.filter(item => item.id === this.selectedRowKeys[0])[0]
      this.handleGroupEdit(singleData, this.ticket.id)
    },
    // 获取绑定场次列表
    getBatch (id) {
      this.loading = true
      this.bindBatches = []
      const params = {}
      this.ticket_type_id = id
      params.ticket_type_id = id
      params.status = ['active']
      getBatch(params).then(res => {
        this.bindBatches = res.extraInfo
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    show (ticket) {
      this.ticket = ticket
      this.visible = true
      this.getBatch(ticket.id)
    },
    handleAddBatches (data) {
      this.bindBatches = this.bindBatches.concat(data)
    },
    handleAddTicketBatchPrice () {
      this.getBatch(this.ticket.id)
    },
    handleCancel () {
      this.visible = false
      // 重置所选行key
      this.selectedRowKeys = []
    },
    handleSubmit () {
      this.visible = false
    },
    handleDelete (data) {
      const params = {}
      params.ticket_type_id = this.ticket_type_id
      params.batch_type_id = data.id
      params.type = (data.type === 'SEAT' ? 'BATCH_SEAT' : 'BATCH')
      this.deleteSalesInfo(params)
    },
    // 删除绑定场次
    deleteSalesInfo (params) {
      this.loading = true
      deleteSalesInfo({ params }).then(res => {
        this.$message.success('删除成功')
        this.loading = false
        this.getBatch(this.ticket.id)
      })
    },
    // 获取座位列表
    getSeatTypeList (id) {
      const params = {
        id: id,
        status: ['active']
      }
      getSeatTypeList(params).then(res => {
        this.seatTypeList = res.extraInfo
      })
    },
    handleSingleEdit (data) {
      console.log('singleedit:', data)
      if (data.seat_template_id) {
        this.getSeatTypeList(data.id)
      }
      this.$refs.singleEdit.show(data, this.ticket.id)
    },
    handleUpdateBatch () {
      this.getBatch(this.ticket.id)
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      console.log('selectedRowKeys changed: ', selectedRowKeys)
    },
    handleResetSelectedRowKeys () {
      this.selectedRowKeys = []
    },
    handleGroupEdit (data) {
      console.log('groupedit:', data)
      if (data.seat_template_id) {
        this.getSeatTypeList(data.id)
      }
      this.$refs.groupEdit.show(data, this.ticket.id)
    }
  }
}
</script>

<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
</style>
