<template>
  <div>
    <el-form
      inline
      label-width="120px">
      <div
        class="dialog-info"
        style="padding-bottom: 0">
        <div class="block-title">
          订单信息
        </div>
        <el-form-item
          label="取票手机">
          {{ info.buyerPhone }}
        </el-form-item>
        <el-form-item label="售票时间">
          {{ info.createTime | formatTime }}
        </el-form-item>
        <el-form-item
          label="订单号">
          {{ info.orderNo }}
        </el-form-item>
        <el-form-item
          label="票种"
          v-if="validTickets && validTickets[0]">
          {{ validTickets[0].tname }}
        </el-form-item>
        <el-form-item
          label="票价"
          v-if="validTickets && validTickets[0]">
          {{ validTickets[0].price }} 元
        </el-form-item>
        <el-form-item label="订单总额">
          {{ info.tickets.length * info.tickets[0].price }} 元
        </el-form-item>
      </div>
      <div class="table-box">
        <div
          class="block-title"
          style="display: flex; justify-content: space-between;">
          含票信息
          <el-checkbox
            v-model="isStorage"
          >
            <span class="danger">使用预印票出票</span>
          </el-checkbox>
        </div>
        <el-table
          border
          stripe
          :data="info.tickets">
          <el-table-column
            width="80"
            label="序号"
            prop="id"
          >
            <template slot-scope="scope">
              {{ scope.row.id.toString().padStart(8,'0') }}
            </template>
          </el-table-column>
          <el-table-column
            prop="ticketNo"
            label="票号">
          </el-table-column>

          <el-table-column
            width="300px"
            column-key="storage"
            v-if="isStorage"
            label="预印票票号">
            <template slot-scope="scope">
              <QRReader
                v-if="scope.row.status === 'WAIT_USE'"
                class="qr-input"
                v-model="storageTicketList[scope.$index]"></QRReader>
            </template>
          </el-table-column>

          <el-table-column
            width="80"
            prop="selfservice_code"
            label="取票码">
          </el-table-column>
          <el-table-column
            width="80"
            prop="guestName"
            label="游客">
          </el-table-column>
          <el-table-column
            width="100"
            prop="guestPhone"
            label="手机号码">
          </el-table-column>
          <el-table-column
            prop="guestIdentify"
            label="证件号码">
          </el-table-column>
          <el-table-column
            label="班次"
            min-width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.schedule_config_id&&scope.row.scheduleConfigName">{{ scope.row.scheduleConfigName }}</span>
              <div v-else>
                <el-select
                  v-if="scope.row.scheduleList&&scope.row.scheduleList.length"
                  v-model="scope.row.scheduleId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in scope.row.scheduleList"
                    :disabled="item.status === 0"
                    :key="item.schedule_config_id"
                    :label="item.schedule_name"
                    :value="item.schedule_config_id">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            column-key="status"
            width="80"
            label="状态">
            <template slot-scope="scope">
              <OrderStatusTag :value="scope.row.status"></OrderStatusTag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <div class="dialog-btn-wrap">
      <el-button
        @click="submit"
        type="primary">
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import { printTicket } from '@/api/printOnlineTicket'

export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    ticketType: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      currentPrint: null, // 当前打印的票
      isStorage: false,
      validTickets: [], // 可取的票
      storageTicketList: [],
      printPlayDateBegin: ''
    }
  },
  watch: {
    visible (val) {
      this.isStorage = false
      this.storageTicketList = []
      this.$nextTick(() => {
        if (val && this.info && this.info.tickets) {
          this.info.tickets = this.info.tickets.map(i => {
            return {
              ...i,
              scheduleId: i.scheduleList && i.scheduleList.length ? null : 0
            }
          })
          this.validTickets = this.info.tickets.filter(item => !item.isPrint && item.status === 'WAIT_USE')
        }
      })
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    submit () {
      this.validTickets = this.info.tickets.filter(item => !item.isPrint && item.status === 'WAIT_USE')
      if (!this.validTickets.length) {
        return this.$message.error('无票可取')
      }

      if (this.isStorage && this.validTickets.length !== this.storageTicketList.filter(Boolean).length) {
        return this.$message.error('预制门票票号不能为空')
      }
      if (this.validTickets.some(i => i.scheduleId === null)) {
        return this.$message.error('班次不能为空')
      }
      let params = {
        ticketList: this.validTickets.map(t => t.ticketNo),
        storageTicketList: this.isStorage ? this.storageTicketList.filter(Boolean) : null,
        scheduleConfigIds: this.validTickets.map(i => {
          return i.scheduleId ? i.scheduleId : 0
        })
      }
      printTicket(params).then(res => {
        this.$message.success('取票成功')
        let order = {
          ...JSON.parse(JSON.stringify(this.info)),
          tickets: this.validTickets,
          hidePrice: true
        }
        this.$print(order)
        this.$emit('updateList')
        this.handleClose()
      })
    }
  }
}
</script>

<style lang="scss">
.qr-input{
 .el-input{
   width: 240px !important;
 }
}
</style>
