<template>
  <div class="form-wrap">
    <div class="search-box">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px"
      >
        <div class="block-title">
          查询条件
        </div>
        <el-form-item
          label="订单号"
          prop="keyWords1"
        >
          <el-input v-model="form.keyWords1"></el-input>
        </el-form-item>
        <el-form-item
          label="票号"
          prop="keyWords7"
        >
          <QRReader v-model="form.keyWords7"></QRReader>
        </el-form-item>
        <el-form-item
          label="二维码扫码"
          prop="keyWords10"
        >
          <el-input
            disabled
            v-model="form.keyWords10"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="预订人姓名"
          prop="keyWords2"
        >
          <el-input v-model="form.keyWords2"></el-input>
        </el-form-item>
        <el-form-item
          label="预订人手机"
          prop="keyWords3"
        >
          <el-input v-model="form.keyWords3"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号"
          prop="keyWords4">
          <ReaderInput
            type="ID"
            v-model="form.keyWords4"></ReaderInput>
        </el-form-item>
        <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="endDate"
        >
          <el-date-picker
            v-model="form.endDate"
            type="datetime"
            default-time="23:59:59"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button
          size="mini"
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          size="mini"
          type="primary"
          @click="getOrderList"
        >
          查询
        </el-button>
      </div>
    </div>
    <div class="table-box">
      <div class="block-title">
        查询结果
      </div>
      <el-table
        border
        stripe
        ref="orderTable"
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="right"
              inline
              class="table-expand"
              label-width="120px"
            >
              <el-form-item
                v-if="props.row.buyerPhone"
                label="预订人手机号码"
              >
                <span>{{ props.row.buyerPhone }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.buyerIdentifyType"
                label="证件类型"
              >
                <span>{{ props.row.buyerIdentifyType | paperType }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.buyerIdentify"
                label="证件号码"
              >
                <span>{{ props.row.buyerIdentify }}</span>
              </el-form-item>
            </el-form>
            <el-table
              :ref="props.row.orderNo"
              :data="props.row.tickets"
            >
              <el-table-column
                width="50"
              >
              </el-table-column>
              <el-table-column
                width="180"
                prop="ticketNo"
                label="票号"
              >
              </el-table-column>
              <el-table-column
                label="状态"
              >
                <template slot-scope="props2">
                  <OrderStatusTag :value="props2.row.status"></OrderStatusTag>
                </template>
              </el-table-column>
              <el-table-column
                prop="payDateBegin"
                label="游玩日期"
              >
              </el-table-column>
              <el-table-column
                prop="price"
                label="票价"
              >
              </el-table-column>
              <el-table-column
                prop="guestName"
                label="游客"
              >
              </el-table-column>
              <el-table-column
                width="180"
                prop="guestIdentify"
                label="证件号码"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :disabled="scope.row.status !== 'WAIT_USE'"
                    @click="changeTicket(scope.row)"
                    size="mini"
                  >
                    改签
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="#"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          width="160"
          prop="orderNo"
          label="订单号"
        >
        </el-table-column>
        <el-table-column
          prop="tickets[0].ticketTypeName"
          label="票种"
        >
          <template slot-scope="props">
            <Ellipsis
              type="tooltips"
              :length="15"
              :content="props.row.tickets.length>0?props.row.tickets[0].ticketTypeName:''"></Ellipsis>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          label="下单时间">
          <template slot-scope="props">
            {{ props.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
        >
          <template slot-scope="props">
            <OrderStatusTag :value="props.row.status"></OrderStatusTag>
          </template>
        </el-table-column>
        <el-table-column
          prop="tickets.length"
          label="所含票数"
        >
        </el-table-column>
        <el-table-column
          label="总价"
          prop="price"
        >
        </el-table-column>
        <el-table-column
          prop="buyerName"
          label="预订人"
        >
        </el-table-column>
        <el-table-column
          label="付款方式"
        >
          <template slot-scope="props">
            <span>{{ props.row.payChannel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="mini"
              @click="changeOrder(scope.row)">
              订单改签
            </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="getOrderList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <ElDialog
      title="改签"
      width="80%"
      v-model="dialogVisible"
    >
      <ConfirmDialog
        :ticket-type-info="ticketTypeInfo"
        :tickets="tickets"
        @updateList="getOrderList"
      ></ConfirmDialog>
    </ElDialog>
  </div>
</template>

<script>
import { getOrderListForChange } from '@/api/order'
import { getTicketTypeList } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import ConfirmDialog from './reschedule/ConfirmDialog'
import ReaderInput from '@/components/ReaderInput'
import moment from 'moment'

export default {
  components: {
    ElDialog,
    ConfirmDialog,
    ReaderInput
  },
  data () {
    return {
      ticketTypeList: [],
      form: {
        startDate: new Date(moment().startOf('day').valueOf()),
        endDate: new Date(moment().endOf('day').valueOf()),
        keyWords1: '', // 订单号
        keyWords2: '', // 游客姓名
        keyWords3: '', // 游客手机
        keyWords4: '', // 游客身份证
        keyWords5: '', // 状态
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      tickets: [],
      ticketTypeInfo: {},
      dialogVisible: false,
      loading: false
    }
  },
  created () {
    // 获取票种
    this.getTicketTypeList()
    // 获取订单
    this.getOrderList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    // 获取票种列表
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getOrderList()
    },
    getOrderList () {
      this.loading = true
      getOrderListForChange(this.form).then(res => {
        this.total = res.total
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    changeTicket (ticket) {
      let ticketType = this.ticketTypeList.find(type => type.id === ticket.ticketTypeId)
      this.ticketTypeInfo = ticketType
      this.tickets = [ticket]
      this.dialogVisible = true
    },
    changeOrder (order) {
      let ticketType = this.ticketTypeList.find(type => type.id === order.tickets[0].ticketTypeId)
      this.ticketTypeInfo = ticketType
      this.tickets = order.tickets
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
