<template>
  <div class="form-wrap">
    <el-form
      class="searchBox"
      ref="form"
      :model="form"
      :inline="true"
      label-width="70px">
      <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="keyWords2">
        <QRReader v-model="form.keyWords2"></QRReader>
      </el-form-item>
      <el-form-item
        label="票种"
        prop="keyWords3">
        <el-select
          v-model="form.keyWords3"
          clearable
          placeholder="请选择">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            v-for="item in ticketTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="身份证号"
        prop="keyWords5">
        <ReaderInput
          type="ID"
          v-model="form.keyWords5"></ReaderInput>
      </el-form-item>
      <el-form-item
        label="游客手机"
        prop="keyWords6"
      >
        <el-input v-model="form.keyWords6"></el-input>
      </el-form-item>
      <el-form-item
        label="游客姓名"
        prop="keyWords7"
      >
        <el-input v-model="form.keyWords7"></el-input>
      </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
          default-time="23:59:59"
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          :disabled="loading"
          type="primary"
          @click="getList"
        >
          搜索
        </el-button>
      </div>
    </el-form>

    <div class="tableBox">
      <div class="block-title">
        统计信息
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          width="180"
          prop="order_no"
          label="订单号"
        >
        </el-table-column>
        <el-table-column
          width="180"
          prop="ticket_no"
          label="票号"
        >
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="cancel_pay_channel"
          label="退票方式"
        >
        </el-table-column>
        <el-table-column
          min-width="140"
          prop="cancel_remark"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          width="160"
          prop="ticket_type_name"
          label="票种"
        >
        </el-table-column>
        <el-table-column
          prop="manager"
          label="退票员"
        >
        </el-table-column>
        <el-table-column
          prop="real_manager"
          label="操作员"
        >
        </el-table-column>
        <el-table-column
          width="160"
          label="售票时间"
        >
          <template slot-scope="props">
            <span>{{ props.row.buy_date | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          label="检票时间"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.check_time.startsWith('1970')">
              {{ scope.row.check_time | formatTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          label="退票时间"
        >
          <template slot-scope="props">
            <span>{{ props.row.cancel_time | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="cancel_price"
          label="退款金额"
        >
        </el-table-column>
        <el-table-column
          label="订单操作"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.boc_cancel_trade_no"
              type="primary"
              @click="$refs.orderDetail.show(scope.row)">
              退票支付详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getList"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <DetailModal ref="orderDetail"></DetailModal>
  </div>
</template>

<script>
import { apiOrder } from '@/api/order'
import { getTicketTypeList } from '@/api/ticketType'
import { getAccountList } from '@/api/systemSetting/account'
import ReaderInput from '@/components/ReaderInput'
import moment from 'moment'
import DetailModal from './DetailModal'

export default {
  name: 'refundQuery',
  components: {
    ReaderInput,
    DetailModal
  },
  data () {
    return {
      ticketTypeList: [],
      form: {
        'startDate': new Date(moment().startOf('day').valueOf()),
        'endDate': new Date(moment().endOf('day').valueOf()),
        'keyWords1': '', // 订单号
        'keyWords2': '', // 票号
        'keyWords3': '', // 票种
        'keyWords4': 'CANCELED', // 状态
        'keyWords5': '', // 游客证件号
        keyWords6: '', // 游客手机
        keyWords7: '', // 游客姓名
        keyWords8: '', // 导游姓名
        'pageNum': 1,
        'pageSize': 10,
        orderByKeyWords: 'cancel_time'
      },
      accountList: [],
      tableData: [],
      total: 0,
      loading: false
    }
  },
  async created () {
    this.getTicketTypeList()
    await this.getAccountList()
    this.getList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    // 获取票种列表
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    },
    getAccountList () {
      return getAccountList({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        this.accountList = res.list
      })
    },
    getList () {
      this.loading = true
      apiOrder('getTicketList', this.form).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          let m = this.accountList.find(m => m.id === item.cancel_manager_id)
          if (m) {
            item.manager = m.nick_name
          }
          let n = this.accountList.find(n => n.id === item.real_cancel_manager_id)
          if (n) {
            item.real_manager = n.nick_name
          }
        })
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
