<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="核销起始时间"
          prop="keyWords1">
          <el-date-picker
            v-model="form.keyWords1"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="核销截止时间"
          prop="keyWords2">
          <el-date-picker
            default-time="23:59:59"
            v-model="form.keyWords2"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </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"
            default-time="23:59:59"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="首次核销起始时间"
          prop="keyWords13">
          <el-date-picker
            v-model="form.keyWords13"
            type="datetime"
            default-time="00:00:00"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="首次核销截止时间"
          prop="keyWords14">
          <el-date-picker
            v-model="form.keyWords14"
            type="datetime"
            default-time="23:59:59"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="游玩起始时间"
          prop="keyWords6">
          <el-date-picker
            v-model="form.keyWords6"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="游玩截止时间"
          prop="keyWords7">
          <el-date-picker
            default-time="23:59:59"
            v-model="form.keyWords7"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </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">
          <el-select
            v-model="form.keyWords4"
            placeholder="请选择"
            filterable>
            <el-option
              v-if="projectName!=='YINXIANGMAZU'||queryClear"
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in otaList"
              :key="item.id"
              :label="item.otaSourceName"
              :value="item.otaSourceName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="票种"
          prop="keyWords5">
          <el-select
            filterable
            v-model="form.keyWords5"
            placeholder="请选择">
            <el-option
              label="全部"
              value="">
            </el-option>
            <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="keyWords8">
          <el-input v-model="form.keyWords8"></el-input>
        </el-form-item>

        <el-form-item
          label="第三方分销商订单号"
          prop="keyWords9">
          <el-input v-model="form.keyWords9"></el-input>
        </el-form-item>

        <el-form-item
          label="游客姓名"
          prop="keyWords10">
          <el-input v-model="form.keyWords10"></el-input>
        </el-form-item>

        <el-form-item
          label="手机号"
          prop="keyWords11">
          <el-input v-model="form.keyWords11"></el-input>
        </el-form-item>

        <el-form-item
          label="身份证号"
          prop="keyWords12">
          <el-input v-model="form.keyWords12"></el-input>
        </el-form-item>

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

    <div class="tableBox">
      <!-- <div class="block-title">
        查询信息
      </div> -->
      <el-table
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          prop="order_no"
          label="线下订单号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="ota_order_no"
          label="分销平台订单号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="ota_3rd_order_no"
          label="第三方分销商订单号"
          width="200">
        </el-table-column>
        <el-table-column
          width="100"
          prop="ticketTypeName"
          label="票种">
        </el-table-column>
        <el-table-column
          prop="ticket_no"
          label="票号">
        </el-table-column>
        <el-table-column
          width="100"
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          width="100"
          prop="otaSourceName"
          label="分销商">
        </el-table-column>
        <el-table-column
          width="100"
          prop="guest_name"
          label="客户姓名">
        </el-table-column>
        <el-table-column
          width="100"
          prop="guest_phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          witdh="200"
          prop="guest_identify"
          label="证件号">
        </el-table-column>
        <el-table-column
          width="100"
          fixed="right"
          prop="checker_name"
          label="核销地点">
        </el-table-column>
        <el-table-column
          width="160"
          fixed="right"
          prop="ota_first_check_ack_time"
          label="首次核销时间">
          <template slot-scope="scope">
            <span v-if="scope.row.ota_first_check_ack_time">
              {{ scope.row.ota_first_check_ack_time | formatTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          fixed="right"
          prop="ota_check_ack_time"
          label="核销时间">
          <template slot-scope="scope">
            {{ scope.row.ota_check_ack_time | formatTime }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getData"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import { getCheckAndPrintList, exportCheckAndPrintStatistics } from '@/api/queryReport'
import { getTicketTypeList } from '@/api/ticketType'
import moment from 'moment'

export default {
  name: 'checkAndPrintQuery',
  data () {
    return {
      ticketTypeList: [],
      projectName: localStorage.getItem('otaProject'),
      form: {
        startDate: new Date(moment().startOf('month')),
        endDate: new Date(moment().endOf('month')),
        keyWords1: new Date(moment().startOf('month')),
        keyWords2: new Date(moment().endOf('month')),
        keyWords3: '', // 检票员名
        keyWords4: '', // 分销商名称
        keyWords5: '', // 票种名称
        keyWords6: '',
        keyWords7: '',
        keyWords13: '', // 首次检票起始时间
        keyWords14: '', // 首次检票截止时间
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      currentItem: {},
      orderDialogVisible: false,
      guestDialogVisible: false
    }
  },
  computed: {
    queryClear () {
      return this.$store.state.user.permissionList.includes('stats:clearwx_query')
    },
    otaList () {
      const list = JSON.parse(localStorage.getItem('otaList'))
      return this.projectName === 'YINXIANGMAZU' && !this.queryClear ? list.filter(item => item.otaSourceCode !== 'CLEARWX') : list
    }
  },
  created () {
    this.getTicketTypeList()
    this.getData()
    if (this.projectName === 'YINXIANGMAZU' && !this.queryClear) {
      this.form.keyWords4 = this.otaList[0].otaSourceName
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    // 获取票种列表
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    },
    exportReport () {
      exportCheckAndPrintStatistics(this.form).then(() => {
        this.$confirm('导出成功，是否去下载页', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/queryReport/reportExport')
        }).catch(() => {})
      }, () => {
        this.$notify.error({
          title: '提示',
          message: '导出失败'
        })
      })
    },
    getData () {
      this.loading = true
      getCheckAndPrintList(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
        console.warn(this.total)
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
