<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px">
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="起始时间"
        prop="timeBegin"
      >
        <el-date-picker
          v-model="form.timeBegin"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="截止时间"
        prop="timeEnd"
      >
        <el-date-picker
          default-time="23:59:59"
          v-model="form.timeEnd"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="关键词"
        prop="searchKeywords"
      >
        <ReaderInput
          style="width:320px !important"
          v-model="form.searchKeywords"
          placeholder="订单号/票号/游客姓名/电话/证件号"
          clearable
          @change="form.searchKeywords=$event.IDNumber,form.name=$event.Name"
          @input="setSearchKeywords"
        ></ReaderInput>
      </el-form-item>
      <el-form-item
        label="订单类型"
        prop="orderCategory"
      >
        <el-select
          v-model="form.orderCategory"
          placeholder="请选择"
          clearable
          filterable>
          <el-option
            v-for="item in orderCategories"
            :key="item.id"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="支付方式"
        prop="payChannelList">
        <el-select
          v-model="form.payChannelList"
          multiple
          clearable
          filterable>
          <el-option
            v-for="item in payChannelOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="销售来源"
        prop="otaSourceNameList">
        <el-select
          v-model="form.otaSourceNameList"
          multiple
          clearable
          filterable>
          <el-option
            v-for="item in otaSourceList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="订单状态"
        prop="orderStatus"
      >
        <el-select
          v-model="form.orderStatus"
          clearable
          placeholder="请选择"
        >
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in orderStatusDic"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="订单号"
        prop="orderNo">
        <el-input v-model="form.orderNo"></el-input>
      </el-form-item>
      <el-form-item
        label="票号"
        prop="ticketNo">
        <QRReader v-model="form.ticketNo"></QRReader>
      </el-form-item>
      <el-form-item
        label="票种"
        prop="ticketTypeIdList">
        <el-select
          v-model="form.ticketTypeIdList"
          multiple
          clearable
          placeholder="请选择">
          <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="visitorIdentify">
        <ReaderInput
          type="ID"
          v-model="form.visitorIdentify"></ReaderInput>
      </el-form-item>
      <el-form-item
        label="游客手机"
        prop="visitorPhone"
      >
        <el-input v-model="form.visitorPhone"></el-input>
      </el-form-item>
      <el-form-item
        label="游客姓名"
        prop="visitorName"
      >
        <el-input v-model="form.visitorName"></el-input>
      </el-form-item>
      <el-form-item
        label="售票员"
        prop="adminIdList"
      >
        <el-select
          v-model="form.adminIdList"
          multiple
          clearable
          placeholder="请选择"
          filterable>
          <el-option
            v-for="item in accountList"
            :key="item.id"
            :value="item.id"
            :label="item.loginName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="售卖自助机"
        prop="saleTermIdList"
      >
        <el-select
          v-model="form.saleTermIdList"
          multiple
          clearable
          placeholder="请选择"
          filterable>
          <el-option
            v-for="item in termList"
            :key="item.id"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          :disabled="loading"
          type="primary"
          @click="getList"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="dataExport">
          导出
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <!-- <div class="block-title">
        退票记录
      </div> -->
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="otaSourceName"
          width="150"
          label="销售渠道"
        ></el-table-column>
        <el-table-column
          prop="orderNo"
          width="240"
          label="订单号"
        ></el-table-column>
        <el-table-column
          prop="ticketNo"
          width="160"
          label="票号"
        ></el-table-column>
        <el-table-column
          prop="ticketTypeName"
          label="票种"
        ></el-table-column>
        <el-table-column
          prop="saleTime"
          width="140"
          label="售票时间"
        ></el-table-column>
        <el-table-column
          prop="saleAdminName"
          label="售票员"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="售票金额"
        ></el-table-column>
        <el-table-column
          prop="checkTime"
          width="140"
          label="检票时间"
        ></el-table-column>
        <el-table-column
          prop="cancelAdminName"
          label="退单操作员"
        ></el-table-column>
        <el-table-column
          prop="cancelSubmitTime"
          width="140"
          label="退单申请时间"
        ></el-table-column>
        <el-table-column
          prop="cancelCompleteTime"
          width="140"
          label="退单完成时间"
        ></el-table-column>
        <el-table-column
          prop="isForceCancel"
          label="是否强制退款"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.isForceCancel ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cancelPrice"
          label="退单金额"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="showOrderDetail(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="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- <DetailModal ref="orderDetail"></DetailModal> -->
    <OrderDetail ref="orderDetail"></OrderDetail>
  </div>
</template>

<script>
import { getCancelOrderList } from '@/api/queryReport'
import { getSaleChannelList, getSingleOrder } from '@/api/order'
import ReaderInput from '@/components/ReaderInput'
import moment from 'moment'
// import DetailModal from './DetailModal'
import { orderStatusDic, ticketStatusDic, orderCategories } from '@/assets/staticData'

export default {
  name: 'refundQuery',
  components: {
    ReaderInput
    // DetailModal
  },
  data () {
    return {
      orderStatusDic,
      orderCategories,
      ticketStatusDic,
      otaSourceList: [],
      form: {
        timeBegin: new Date(moment().startOf('day').valueOf()),
        timeEnd: new Date(moment().endOf('day').valueOf()),
        visitorPhone: '',
        visitorName: '',
        visitorIdentify: '',
        orderCategory: '',
        orderNo: '',
        partnerOrderNo: '',
        payChannelList: [],
        orderStatus: '',
        ticketTypeIdList: [],
        pageNum: 1,
        pageSize: 10,
        ticketNo: '',
        searchKeywords: ''
      },
      tableData: [],
      total: 0,
      loading: false,
      currentOrder: null
    }
  },
  computed: {
    accountList () {
      return this.$store.state.app.accountList
    },
    termList () {
      return this.$store.state.app.termList
    },
    ticketTypeList () {
      const { ticketTypeList } = this.$store.state.app
      const { orderCategory } = this.form
      return orderCategory ? ticketTypeList.filter(item => item.category === orderCategory) : ticketTypeList
    },
    payChannelOptions () {
      return this.$store.getters.payChannelOptions
    }
  },
  async created () {
    this.getSaleChannelList()
    this.getList()
  },
  methods: {
    async getOrderDetail (order) {
      const res = await getSingleOrder(order.orderId)
      this.currentOrder = res?.data || order
    },
    async showOrderDetail (order) {
      await this.getOrderDetail(order)
      this.$refs.orderDetail.show(this.currentOrder)
    },
    getSaleChannelList () {
      getSaleChannelList().then(res => {
        this.otaSourceList = res.data
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    setSearchKeywords (val) {
      this.form.searchKeywords = val
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    dataExport () {
      this.form.export = true
      // this.form.exportDetail = true
      getCancelOrderList(this.form).then(() => {
        this.$message.success('导出成功。')
        this.goToDownload()
      }, () => {
        this.$message.success('导出失败。')
      })
      this.reset()
    },
    getList () {
      this.loading = true

      if (this.form.timeBegin) {
        this.form.timeBegin = moment(this.form.timeBegin).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.form.timeBegin = ''
      }

      if (this.form.timeEnd) {
        this.form.timeEnd = moment(this.form.timeEnd).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.form.timeEnd = ''
      }

      if (!this.form.ticketTypeIdList) {
        this.form.ticketTypeIdList = []
      }

      getCancelOrderList(this.form).then(res => {
        this.total = res.data.total || 0
        this.tableData = res.data.records || []
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
