<template>
  <el-dialog
    title="选择线上会员订单"
    :visible.sync="visible"
    width="80%"
    @close="handleClose">
    <div
      class="wrap"
      v-loading="loading">
      <el-form
        inline
        :model="form"
        ref="form"
        label-width="80px">
        <el-form-item label="取票码">
          <el-input v-model="form.keyWords15"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getOrderListForPrint(true)">
            查询
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        border
        ref="table"
        highlight-current-row
        @row-click="handleRowClick"
        v-loading="loading"
        :data="tableData">
        <el-table-column
          width="180"
          prop="orderNo"
          label="订单号">
        </el-table-column>
        <el-table-column
          prop="otaSourceName"
          label="分销商">
        </el-table-column>
        <el-table-column
          label="票种">
          <template slot-scope="scope">
            {{ scope.row.tickets[0].tname }}
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="tickets.length"
          label="票数量">
        </el-table-column>
        <el-table-column
          width="100"
          prop="buyerName"
          label="预订人">
        </el-table-column>
        <el-table-column
          width="120"
          prop="buyerPhone"
          label="预订手机">
        </el-table-column>
        <el-table-column
          label="证件号码">
          <template slot-scope="scope">
            {{ scope.row.buyerIdentifyType | paperType }}
          &nbsp;
            {{ scope.row.buyerIdentify }}
          </template>
        </el-table-column>
        <el-table-column
          width="150"
          label="售票时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          label="总价">
          <template slot-scope="scope">
            {{ scope.row.tickets.length * scope.row.tickets[0].price }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="取票码">
          <template slot-scope="scope">
            {{ scope.row.tickets[0].selfservice_code }}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          label="操作">
          <template slot-scope="scope">
            <el-link
              v-if="currentOrder.id===scope.row.id"
              type="success">
              已选择
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getOrderListForPrint()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getOrderListForPrint } from '@/api/printOnlineTicket'
export default {
  data () {
    return {
      visible: false,
      loading: false,
      total: 0,
      tableData: [],
      currentOrder: {},
      form: {
        'keyWords1': '', // 订单号
        'keyWords2': '', // 游客姓名
        'keyWords3': '', // 游客手机
        'keyWords4': '', // 游客身份证
        'keyWords5': '', // 状态
        'keyWords6': '', // 团散
        'keyWords7': '', // 票号
        'keyWords14': 0, // 未取票
        'keyWords15': '', // 取票码
        // 'keyList1': [3], // 线上会员
        'pageNum': 1,
        'pageSize': 10
      }
    }
  },
  methods: {
    show (id) {
      this.visible = true

      this.getOrderListForPrint()
    },
    handleClose () {
      this.visible = false
    },
    handleRowClick (row, column, event) {
      this.currentOrder = row
      this.$refs.table.setCurrentRow(row)
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getOrderListForPrint()
    },
    getOrderListForPrint (goFirst) {
      goFirst && (this.form.pageNum = 1)
      this.loading = true
      getOrderListForPrint(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    canPrint (order) {
      return order.tickets.some(ticket => !ticket.isPrint)
    },
    handleSubmit () {
      this.$emit('select', [this.currentOrder])
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    padding: 20px
}
::v-deep .el-table__body tr.current-row>td {
    background-color: #f7ce60;
}
::v-deep .el-dialog .el-form-item{
    display: inline-block;
}
</style>
