<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    :modal-append-to-body="false"
    append-to-body
    title="门票信息"
    width="80%">
    <div class="table-box">
      <el-form
        :inline="true"
        label-width="120"
        label-position="right"
        class="buyer-info">
        <el-form-item
          label="旅行社"
          v-if="orderData.groupIndividual === 2"
        >
          <span>{{ orderData.travelAgencyName }}</span>
        </el-form-item>
        <el-form-item :label="orderData.groupIndividual === 1 ? '预订人' : '导游'">
          {{ orderData.buyerName || '暂无' }}
        </el-form-item>
        <el-form-item label="手机号">
          {{ orderData.buyerPhone || '暂无' }}
        </el-form-item>
        <el-form-item label="证件类型">
          {{ orderData.buyerIdentifyType | paperType }}
        </el-form-item>
        <el-form-item label="购买人证件号">
          {{ orderData.buyerIdentify || '暂无' }}
        </el-form-item>
      </el-form>

      <el-checkbox
        style="float: right;"
        v-model="isStorage"
      >
        <span class="danger">使用预印票出票</span>
      </el-checkbox>
      <el-table
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="orderData.tickets">
        <el-table-column
          :selectable="selectable"
          type="selection"
          width="55">
        </el-table-column>
        <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
          width="170"
          prop="ticketNo"
          label="票号"
        >
        </el-table-column>

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

        <el-table-column
          prop="tname"
          label="票种"
        >
        </el-table-column>

        <template v-if="orderData.tickets[0]">
          <el-table-column
            v-if="orderData.tickets[0].performName"
            label="节目"
          >
            <template slot-scope="scope">
              {{ scope.row.performName }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="orderData.tickets[0].batchConfigName"
            label="场次"
          >
            <template slot-scope="scope">
              {{ scope.row.batchConfigName }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="orderData.tickets[0].seatRowTag"
            label="座位号"
          >
            <template slot-scope="scope">
              {{ `${scope.row.seatNameNew}${scope.row.seatRowTag }排${scope.row.seatName}座` }}
            </template>
          </el-table-column>
        </template>

        <el-table-column
          width="80"
          label="票价"
        >
          <template slot-scope="scope">
            {{ scope.row.price/scope.row.checkNum }}
          </template>
        </el-table-column>

        <el-table-column
          prop="guestName"
          label="游客姓名"
        >
        </el-table-column>

        <el-table-column
          prop="guestIdentify"
          label="身份证"
        >
        </el-table-column>

        <el-table-column
          width="100"
          prop="checkNum"
          label="检票人数"
        >
        </el-table-column>

        <el-table-column
          width="100"
          prop="payDateBegin"
          label="游玩时间"
        >
          <template slot-scope="scope">
            {{ scope.row.isNeedPlaytime?scope.row.payDateBegin:'无限制' }}
          </template>
        </el-table-column>

        <el-table-column
          width="80"
          label="小计"
          prop="price"
        >
        </el-table-column>

        <el-table-column
          width="80"
          label="状态"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | ticketStatusColor">
              {{ scope.row.status | ticketStatus }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          width="160"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isPrint">
              已取票
            </span>
            <el-button
              v-if="scope.row.status==='WAIT_USE' && !scope.row.isPrint"
              size="mini"
              type="primary"
              @click="singleTake(scope.row)">
              取票
            </el-button>

            <!-- <el-button
              type="primary"
              :disabled="scope.row.status !== 'WAIT_USE'"
              @click="checkTicket(scope.row)">
              检票
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="toggleSelection">
          全选 / 取消全选
        </el-button>
        <el-button
          type="primary"
          @click="groupTake">
          批量取票
        </el-button>
      </div>
    </div>
    <el-dialog
      title="班次选择"
      append-to-body
      width="60%"
      :visible.sync="dialogTableVisible">
      <div
        class="table-box">
        <el-table
          :data="selectTickets"
          border
          stripe>
          <el-table-column
            prop="ticketNo"
            label="票号"
            width="150"></el-table-column>
          <el-table-column
            prop="tname"
            label="票种"
            width="150"></el-table-column>
          <el-table-column
            label="场次"
            width="150">
            <template
              slot-scope="scope"
              v-if="scope.row.batch_config">
              {{ scope.row.batch_config.name }}
            </template>
          </el-table-column>
          <el-table-column
            label="班次"
            min-width="90">
            <template slot-scope="scope">
              <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>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submitSchedule">确定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

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

export default {
  data () {
    return {
      visible: false,
      dialogTableVisible: false,
      isStorage: false,
      selectTickets: [],
      orderData: {
        tickets: []
      }
    }
  },
  methods: {
    show (data) {
      this.visible = true
      this.orderData = data
      this.selectTickets = []
    },
    handleClose () {
      this.visible = false
      this.$refs.multipleTable.clearSelection()
    },

    singleTake (ticket) {
      console.log('ticket', ticket)
      if (ticket.scheduleList && ticket.scheduleList.length) {
        this.selectTickets = [ticket]
        this.selectTickets = this.selectTickets.map(i => {
          return {
            ...i,
            scheduleId: null
          }
        })
        this.dialogTableVisible = true
      } else {
        this.$confirm('确定取票吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectTickets = [ticket]
          this.takeTicket()
        })
      }
    },
    // 批量取票
    groupTake () {
      if (!this.selectTickets.length) {
        this.$message.error('请选择门票')
        return
      }

      if (this.isStorage && this.selectTickets.some(i => !i.storage_ticket)) {
        return this.$message.error('预制门票票号不能为空')
      }
      this.selectTickets = this.selectTickets.map(i => {
        return {
          ...i,
          scheduleId: i.scheduleList && i.scheduleList.length ? null : 0
        }
      })
      this.dialogTableVisible = true
    },
    // 提交班次取票
    submitSchedule () {
      if (this.selectTickets.some(i => i.scheduleId === null)) {
        return this.$message.error('班次不能为空')
      }
      this.$confirm('确定取票吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.takeTicket(this.selectTickets)
      })
    },
    // 取票
    takeTicket () {
      if (this.isStorage && this.selectTickets.some(i => !i.storage_ticket)) {
        return this.$message.error('预制门票票号不能为空')
      }
      let params = {
        ticketList: this.selectTickets.map(i => i.ticketNo),
        storageTicketList: this.isStorage ? this.selectTickets.map(i => i.storage_ticket) : null,
        scheduleConfigIds: this.selectTickets.map(i => {
          return i.scheduleId ? i.scheduleId : 0
        })
      }
      printTicket(params).then(res => {
        this.$message.success('取票成功')
        // 打印单张门票
        this.$print({ ...JSON.parse(JSON.stringify(this.orderData)), tickets: this.selectTickets })

        this.$emit('updateList')
        this.dialogTableVisible = false
        this.handleClose()
      })
    },
    handleSelectionChange (val) {
      this.selectTickets = val
    },
    checkTicket (data) {
      this.$confirm('确定检票吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        checkTickets({ list: [data.ticketNo] }).then(res => {
          this.$message.success('操作成功')

          this.handleClose()

          setTimeout(() => {
            this.$emit('updateList')
          }, 1000)
        })
      }).catch(() => {
        this.cancel_manager = null
      })
    },
    toggleSelection () {
      this.$refs.multipleTable.toggleAllSelection()
    },
    selectable (row, index) {
      return row.status === 'WAIT_USE'
    }

  }
}
</script>

<style lang="scss">

</style>
