<template>
  <a-modal
    width="450px"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="visible=false"
    title="批量新增场次座位区域"
    :confirmLoading="confirmLoading"
  >
    <a-form-model :model="form" class="form-wrap" ref="form">
      <div style="margin-bottom:80px">
        <a-form-model-item
          label="选择座位类型"
          style="width:200%"
          v-bind="formItemLayout2"
          :rules="[{ required: true, message: '选择座位类型' }]"
          prop="seatTypeList"
        >
          <a-select
            mode="multiple"
            v-model="form.seatTypeList"
            style="width:200px"
          >
            <a-select-option
              v-for="(item) in allSeatTypeList_Single "
              :key="item.id"
              :value="item.id"
              :disabled="item.disabled"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
    </a-form-model>
  </a-modal>
</template>

<script>
import { setSalesInfo } from '@/api/ticketSetting/ticket'

export default {
  components: {
  },
  props: {
    allSeatTypeList: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      allSeatTypeList_Single: [],
      visible: false,
      is_seat: false, // 是否有座
      confirmLoading: false,
      batch_type_id: '',
      seatTypeList: [], // 座位类型列表
      form: {
        seatTypeList: []
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      }
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    show (id, e) {
      this.ticket_type_id = id
      this.form.seatTypeList = []
      this.visible = true
      this.seatTypeList = e
      this.allSeatTypeList_Single = this.allSeatTypeList.map((item) => {
        return {
          ...item,
          disabled: !!e.find(i => i.id === item.id)
        }
      })
    },
    formatData (values) {
      return {
        'price': 0.01,
        'batch_type_id': this.data.id,
        'ticket_type_id': this.ticket_type_id,
        'seat_type_id': values,
        'period_price': [],
        'weekday_price': {
          '0': null,
          '1': null,
          '2': null,
          '3': null,
          '4': null,
          '5': null,
          '6': null
        },
        'is_change': 0,
        'is_book_today': 1,
        'book_future_days': 0,
        'sales_limit': 0,
        'total_sales_limit': 0,
        'book_today_endtime': '23:59:59',
        'change_today_endtime': '23:59:59',
        'is_refund': 1,
        'refund_strategy': {
          'type': 'RATE',
          'rate': 0
        },
        'refund_advance_days': 0,
        'refund_today_endtime': '23:59:59'
      }
    },
    handleSubmit () {
      this.$refs.form.validate(validate => {
        if (validate) {
          const seatlist = this.form.seatTypeList.map(item => {
            return this.formatData(item)
          })
          this.confirmLoading = true
          setSalesInfo({ items: seatlist }).then(res => {
            this.$message.success('修改成功。')
            this.$emit('updateArea')
          }).finally(() => {
            this.confirmLoading = false
            this.visible = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  ::v-deep .ant-form-item {
    display: inline-block;  width: 50%;
  }
}

</style>
