<template>
  <div class="form-wrap">
    <div class="page-title">搜索条件</div>
    <el-form
      ref="form"
      :model="form"
      :inline="true"
      label-width="150px">
      <el-form-item
        label="购票起始时间"
        prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="购票截止时间"
        prop="endTime">
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <br>
      <el-form-item
        label="检票起始时间"
        prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="检票截止时间"
        prop="endTime">
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <br>
      <el-form-item
        label="游玩起始时间"
        prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="游玩截止时间"
        prop="endTime">
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <br>
      <el-form-item
        label="预定人"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="票种"
        prop="ticketTypeId">
        <el-select
          v-model="form.ticketTypeId"
          clearable
          placeholder="请选择">
          <el-option
            v-for="item in ticketTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.ticketTypeId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="分销商"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="订单号"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="分销商订单号"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="取票码"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="证件号"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
      <el-form-item
        label="辅助码"
        prop="guestName">
        <el-input v-model="form.guestName"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-wrap">
      <el-button
        type="primary"
        @click="getOrderList">搜索</el-button>
    </div>
    <div
      class="page-title"
      style="margin-top:30px">
      统计信息
    </div>
    <el-table :data="tableData">
      <el-table-column type="expand">
        <template slot-scope="props">
          <p>预订人证件：&emsp; {{ props.row.paperType }}&nbsp;{{ props.row.buyer_identify }}</p>
          <el-table :data="props.row.tickets">
            <el-table-column
              prop="ticket_no"
              label="订单号">
            </el-table-column>
            <el-table-column
              width="80"
              prop="guest_name"
              label="分销商订单号">
            </el-table-column>
            <el-table-column
              prop="guest_phone"
              label="客户姓名">
            </el-table-column>
            <el-table-column
              prop="guest_identify"
              label="手机号">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="ticket_no"
        label="订单号">
      </el-table-column>
      <el-table-column
        width="80"
        prop="guest_name"
        label="分销商订单号">
      </el-table-column>
      <el-table-column
        prop="guest_phone"
        label="客户姓名">
      </el-table-column>
      <el-table-column
        prop="guest_identify"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="price"
        label="分销商">
      </el-table-column>
      <el-table-column
        prop="ticketTypeName"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="已检">
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="已退">
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="状态">
      </el-table-column>
      <el-table-column
        width="140"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showOrderInfo(scope.row)">详情</el-button>
          <el-button
            type="text"
            @click="showGuestInfo(scope.row)">游客</el-button>
          <el-button
            type="text"
            @click="showGuestInfo(scope.row)">检票</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page.sync="form.pageNum"
      @current-change="getOrderList"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getTicketTypeList } from '@/api/ticketType'
import moment from 'moment'
export default {
  data () {
    return {
      ticketTypeList: [],
      form: {
        'startDate': new Date(moment().format('YYYY-MM-DD') + ' 00:00:00'),
        'endDate': new Date(moment().format('YYYY-MM-DD HH:mm:ss')),
        'keyWords1': null, // 订单号
        'keyWords2': null, // 游客姓名
        'keyWords3': null, // 游客手机
        'keyWords4': null, // 游客身份证
        'keyWords5': '', // 状态
        keyWords6: '', // 1散客 2团体
        'orderByKeyWords': null,
        'orderString': null,
        'pageNum': 1,
        'pageSize': 10
      },
      orderStatusDic: {
        '': '全部',
        'WAIT_USE': '未检票',
        'PART_USE': '部分检票',
        'COMPLETE': '已检票',
        'CANCELED': '已退票'
      },
      ticketStatusDic: {
        'WAIT_USE': '未检票',
        'PART_USE': '部分检票',
        'USED': '已检票',
        'OUTOFDATE': '已过期',
        'CANCELED': '已退票'
      },
      paperTypeDic: {
        1: '身份证',
        2: '护照',
        3: '港澳居民来往内地通行证',
        4: '台胞证'
      },
      tableData: [],
      total: 0
    }
  },
  created () {
    this.getTicketTypeList().then(() => {
      this.getOrderList()
    })
  },
  methods: {
    // 获取票种列表
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    }
  }
}
</script>

<style scoped>

</style>
