<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="handleClose"
    append-to-body
    title="门票信息"
    width="1000px">
    <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-input
        v-model="filterKey"
        placeholder="请输入票号以筛选门票"
        style="margin-bottom:18px;width:200px"
        clearable></el-input>

      <el-table
        border
        ref="multipleTable"
        :data="filterTickets">
        <el-table-column
          prop="ticketNo"
          label="票号"
        >
        </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="状态"
        >
          <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="80"
          label="小计"
          prop="price"
        >
        </el-table-column>

        <el-table-column
          width="80"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isPrint===0"
              type="primary"
              size="small"
              @click="handleSelect(scope.row)">
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

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

export default {
  data () {
    return {
      visible: false,
      orderData: {
        tickets: []
      },
      filterKey: ''
    }
  },
  methods: {
    show (data) {
      this.visible = true
      this.orderData = data
      this.filterKey = ''
    },
    handleClose () {
      this.visible = false
    },
    handlePrintTicket (ticket) {
      this.$confirm('确定取票吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.takeTicket(ticket)
      })
    },
    takeTicket (ticket) {
      let params = {
        ticketList: [ticket.ticketNo]
      }
      printTicket(params).then(res => {
        this.$message.success('取票成功')
        ticket.orderNo = this.orderData.orderNo
        ticket.createTime = this.orderData.createTime

        this.currentTicket = ticket
        // 打印单张门票
        this.$print(null, this.currentTicket)

        this.$emit('updateList')
        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'
    },
    groupCheck () {
      if (!this.selectTickets.length) {
        this.$message.error('请选择门票')
        return
      }

      this.$confirm('确定检票吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const tickets = this.selectTickets.map(i => i.ticketNo)

        checkTickets({ list: tickets }).then(res => {
          this.$message.success('操作成功')

          this.handleClose()

          setTimeout(() => {
            this.$emit('updateList')
          }, 1000)
        })
      }).catch(() => {
        this.cancel_manager = null
      })
    },
    handleSelect (record) {
      console.log(record.id, this.orderData)
      this.$emit('selectTicket', { ticketId: record.id, order: this.orderData })
      this.visible = false
    }
  },
  computed: {
    filterTickets () {
      const key = this.filterKey.trim()
      if (!key) return this.orderData.tickets
      return this.orderData.tickets.filter(v => v.ticketNo.indexOf(key.toUpperCase()) > -1)
    }
  }
}
</script>

<style lang="scss">

</style>
