<template>
  <div class="form-wrap ">
    <div class="search-box">
      <div class="block-title">
        查询条件
      </div>
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="70px"
      >
        <el-form-item
          label="队列"
          prop="queue_id">
          <el-select v-model="form.queue_id">
            <el-option
              v-for="item in queue"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="游玩时间"
          prop="payDateBegin">
          <el-date-picker
            v-model="form.payDateBegin"
            type="date"
            value-format="yyyy-MM-dd"
            :clearable="false"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="排队状态"
          prop="queue_status">
          <el-select v-model="form.queue_status">
            <el-option
              v-for="item in statusEnum"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="票号"
          prop="ticketNo">
          <el-input v-model="form.ticketNo"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="guestPhone">
          <el-input v-model="form.guestPhone"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button
          type="default"
          size="mini"
          @click="reset">
          重置
        </el-button>

        <el-button
          type="primary"
          size="mini"
          @click="getList">
          查询
        </el-button>
      </div>
    </div>

    <div class="table-box">
      <el-table
        border
        stripe
        :data="tableData">
        <!-- <el-table-column
          prop="queue_id"
          label="队列">
        </el-table-column>
        <el-table-column
          prop="ticket_id"
          label="票种">
        </el-table-column> -->
        <el-table-column
          prop="ticketNo"
          label="票号">
        </el-table-column>
        <el-table-column
          prop="guestPhone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="payDateBegin"
          label="游玩日期">
        </el-table-column>
        <el-table-column
          prop="queue_serialNumber"
          label="序列号">
        </el-table-column>
        <el-table-column
          prop="queue_status"
          label="状态">
          <template slot-scope="scope">
            {{ statusEnum.find(v=>v.value===scope.row.queue_status).label }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wait_time"
          label="排队时间">
          <template slot-scope="scope">
            <span v-if="scope.row.wait_time">{{ moment(scope.row.wait_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="called_time"
          label="叫号时间">
          <template slot-scope="scope">
            <span v-if="scope.row.called_time">{{ moment(scope.row.called_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkTime"
          label="检票时间">
          <template slot-scope="scope">
            <span v-if="scope.row.checkTime">{{ moment(scope.row.checkTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="pass_time"
          label="过号时间">
          <template slot-scope="scope">
            <span v-if="scope.row.pass_time">{{ moment(scope.row.pass_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cancelTime"
          label="取消时间">
          <template slot-scope="scope">
            <span v-if="scope.row.cancelTime">{{ moment(scope.row.cancelTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.queue_status==='PASSED'"
              type="primary"
              size="small"
              @click="sign(scope.row)"
            >
              重新取号
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getList()"
        :total="total"
      >
      </el-pagination>

      <div
        id="printMyQrCode"
        class="img-wrap img-wrap1"
        style="display: block;height: 350px;">
        <div style="height: 20px;font-size: 16px;">
          序列号:{{ currentItem.queue_serialNumber }}
        </div>
        <div style="height: 20px;font-size: 16px;">
          票号:{{ currentItem.ticketNo }}
        </div>
        <div
          class="img"
          :style="{backgroundImage:`url(${qrImg})`,backgroundRepeat:'no-repeat',height:'300px'}">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listTransferLog, queueList, signInAfterPass } from '@/api/ticketType'
import moment from 'moment'
import QRCode from 'qrcode'
export default {
  data () {
    return {
      form: {
        pageNum: 1,
        pageSize: 10,
        queue_id: null,
        payDateBegin: moment().format('YYYY-MM-DD'),
        queue_status: null
      },
      tableData: [],
      total: 0,
      dialog: {
        visible: false,
        type: 'new',
        title: '新增通道'
      },
      currentItem: {
        ticketNo: '1111',
        queue_serialNumber: '2222'
      },
      queue: [],
      statusEnum: [
        { value: 'WAITING', label: '排队中' },
        { value: 'CALLED', label: '已叫号' },
        { value: 'CHECKED', label: '已检票' },
        { value: 'PASSED', label: '已过号' },
        { value: 'CANCELED', label: '已取消' }
      ],
      qrImg: ''
    }
  },
  created () {
    this.getList()
    this.getQueueList()
  },
  components: {
  },
  methods: {
    moment,
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList () {
      listTransferLog(this.form).then(res => {
        this.total = res?.data.total
        this.tableData = res?.data.list
      })
    },
    getQueueList () {
      queueList({ pageNum: 1, pageSize: 9999 }).then(res => {
        this.queue = res?.data.list
      })
    },
    sign (item) {
      this.$confirm('确认重新取号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        signInAfterPass({ ticketNo: item.ticketNo }).then(() => {
          this.$message({
            type: 'success',
            message: '重新取号成功!'
          })
          listTransferLog(this.form).then(res => {
            this.total = res?.data.total
            this.tableData = res?.data.list
            this.currentItem = this.tableData.find(v => v.id === item.id)
            this.printMyQrCode(item.ticketNo)
          })
        })
      })
    },
    printMyQrCode (qrcode) {
      this.$nextTick(async () => {
        var opts = {
          errorCorrectionLevel: 'H',
          type: 'image/png',
          quality: 1,
          color: {
            dark: '#000000ff', // Blue dots
            light: '#0000' // Transparent background
          }
        }
        this.qrImg = await QRCode.toDataURL(qrcode, opts)
        setTimeout(() => {
          const webview = document.querySelector('#printSmallTicketWebview')
          let printDoc = document.querySelector('#printMyQrCode').outerHTML
          console.log(printDoc)
          webview.send('webview-print-render', printDoc)
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
.img-wrap{
  min-height:300px;
}
.img{
   background: center center /contain;
}

.img-wrap1{
  visibility: hidden;
}
</style>
