<template>
  <a-modal
    width="1100px"
    :visible="visible"
    :title="`【${batch && batch.name}】 绑定票种`"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-spin :spinning="loading">
      <div class="block-title">
        场次信息
      </div>

      <a-form v-if="batch">
        <a-form-item
          label="场次名称"
          v-bind="formItemLayout"
        >
          {{ batch.name }}
        </a-form-item>

        <a-form-item
          label="开始时间"
          v-bind="formItemLayout"
        >
          {{ batch.start_time }}
        </a-form-item>

        <a-form-item
          label="时长"
          v-bind="formItemLayout"
        >
          {{ batch.duration | duration }}
        </a-form-item>

        <a-form-item
          label="策略"
          v-bind="formItemLayout"
        >
          {{ batch.strategy | strategyName }}
        </a-form-item>

        <a-form-item
          label="策略内容"
          v-bind="formItemLayout"
        >
          <template v-if="batch.strategy==='PERIOD'">
            {{ formatPeriod(batch.strategy_content) }}
          </template>
          <template v-if="batch.strategy==='WEEKDAY'">
            {{ formatWeekday(batch.strategy_content) }}
          </template>
          <span v-if="batch.strategy==='BASIC'">
            无
          </span>
        </a-form-item>

        <a-form-item
          label="状态"
          v-bind="formItemLayout"
        >
          <a-tag :color="batch.status==='active'?'green':'red'">
            {{ batch.status==='active'?'已激活':'已禁用' }}
          </a-tag>
        </a-form-item>
      </a-form>

      <div class="block-title">
        绑定的票种
        <a-button
          size="small"
          style="float:right"
          type="primary"
          @click="$refs.groupAdd.show()"
        >
          批量新增票种
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :pagination="false"
        :data-source="bindTickets"
        :row-key="record => record.id"
      >
        <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-button
            size="small"
            type="danger"
            @click="handleDelete(record)"
          >
            删除
          </a-button>
        </template>
      </a-table>
    </a-spin>

    <!-- 批量新增 -->
    <GroupAdd
      :ticketList="enableTickets"
      @addTickets="handleAddTickes"
      @addTicketPrice="handleAddTicketPrice"
      ref="groupAdd"
    ></GroupAdd>

    <!-- 单票种编辑 -->
    <SingleEdit
      ref="singleEdit"
      @updateTicket="handleUpdateTicket"
      :currentTicket="currentTicket"
      :currentTicketPrice="currentTicketPrice"
    ></SingleEdit>
  </a-modal>
</template>

<script>
import { getBatchTicket, setBatchTicket, getBatchTicketPrice, setBatchTicketPrice } from '@/api/batch'
import GroupAdd from './GroupAdd'
import SingleEdit from './SingleEdit'
import mixins from './mixins'

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: 120
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '日常价(元)',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '当日库存',
    dataIndex: 'sales_limit',
    key: 'sales_limit'
  },
  {
    title: '总库存',
    dataIndex: 'total_sales_limit',
    key: 'total_sales_limit'
  },
  {
    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: {
    ticketList: {
      type: Array,
      default: () => []
    }
  },
  created () {
    this.form = this.$form.createForm(this)
  },
  components: {
    GroupAdd,
    SingleEdit
  },
  computed: {
    enableTickets () {
      return this.ticketList.filter(i => {
        return !this.bindTickets.some(j => j.id === i.id)
      })
    }
  },
  data () {
    return {
      columns,
      batch: null,
      loading: false,
      visible: false,
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      bindTickets: [],
      ticketPrice: [],
      currentTicket: null,
      currentTicketPrice: null
    }
  },
  methods: {
    show (batch) {
      this.batch = batch
      this.visible = true

      this.loading = true

      Promise.all([
        this.getTicketType(batch.id),
        this.getBatchTicketPrice(batch.id)
      ]).finally(() => {
        this.loading = false
      })
    },
    async handleOk () {
      this.confirmLoading = true
      try {
        // 设置基本规则
        await setBatchTicket(this.batch.id, this.bindTickets)

        // 设置日历价格
        setBatchTicketPrice(this.batch.id, this.ticketPrice).then(res => {
          this.$message.success('设置成功。')

          this.handleCancel()
        }).finally(() => {
          this.confirmLoading = false
        })
      } catch (e) {
        this.confirmLoading = false
      }
    },
    getTicketType (id) {
      this.bindTickets = []

      return getBatchTicket(id).then(res => {
        this.bindTickets = res.extraInfo.list
      })
    },
    getBatchTicketPrice (id) {
      this.ticketPrice = []

      return getBatchTicketPrice(id).then(res => {
        this.ticketPrice = res.extraInfo.tickets
      })
    },
    handleAddTicketPrice (data) {
      this.ticketPrice = this.ticketPrice.concat(data)
    },
    handleCancel () {
      this.visible = false
    },
    handleAddTickes (data) {
      this.bindTickets = this.bindTickets.concat(data)
    },
    handleDelete (data) {
      const index = this.bindTickets.findIndex(i => i.id === data.id)
      this.bindTickets.splice(index, 1)

      const index2 = this.ticketPrice.findIndex(i => i.ticket_type_id === data.id)
      this.ticketPrice.splice(index2, 1)
    },
    handleSingleEdit (data) {
      this.currentTicket = data
      this.currentTicketPrice = this.ticketPrice.find(i => i.ticket_type_id === data.id)
      //   console.log(data, this.currentTicketPrice)
      this.$refs.singleEdit.show()
    },
    handleUpdateTicket ({ ticket, ticketPrice }) {
      console.log(ticket)
      const index = this.bindTickets.findIndex(i => i.id === ticket.id)
      this.bindTickets.splice(index, 1, ticket)

      const index2 = this.ticketPrice.findIndex(i => i.ticket_type_id === ticketPrice.ticket_type_id)

      ticketPrice.price = this.bindTickets[index].price
      this.ticketPrice.splice(index2, 1, ticketPrice)
    }
  }
}
</script>

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