<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="下单起始时间"
          prop="createTimeBegin">
          <el-date-picker
            v-model="form.createTimeBegin"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="下单截止时间"
          prop="createTimeEnd">
          <el-date-picker
            v-model="form.createTimeEnd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="游玩开始时间"
          prop="playDateBegin">
          <el-date-picker
            v-model="form.playDateBegin"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="游玩结束时间"
          prop="playDateEnd">
          <el-date-picker
            v-model="form.playDateEnd"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </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="partnerOrderNo">
          <el-input v-model="form.partnerOrderNo"></el-input>
        </el-form-item>
        <el-form-item
          label="票号"
          prop="ticketNo">
          <el-input v-model="form.ticketNo"></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="keyWords9">
          <el-select
            v-model="form.keyWords9"
            multiple
            clearable
            placeholder="请选择"
            filterable>
            <el-option
              v-for="item in otaSourceList"
              :key="item.id"
              :label="item.otaSourceName"
              :value="item.otaSourceName">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="票种"
          prop="keyWords8">
          <el-select
            filterable
            v-model="form.keyWords8"
            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="orderStatus">
          <el-select
            v-model="form.orderStatus"
            clearable
            placeholder="请选择">
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              v-for="(value, key) in orderStatusDic"
              :key="key"
              :label="value.label"
              :value="key">
            </el-option>
          </el-select>
        </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="visitorPhone">
          <el-input v-model="form.visitorPhone"></el-input>
        </el-form-item>
        <el-form-item
          label="游客证件号"
          prop="visitorIdentify">
          <el-input v-model="form.visitorIdentify"></el-input>
        </el-form-item>
        <el-form-item
          label="门票状态"
          prop="ticketStatus">
          <el-select
            v-model="form.ticketStatus"
            clearable
            placeholder="请选择">
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              v-for="(value, key) in ticketStatusDic"
              :key="key"
              :label="value.label"
              :value="key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button
          @click="reset">重置</el-button>
        <el-button
          type="primary"
          @click="getOrderList($event,true)">搜索</el-button>
      </div>
    </div>

    <div class="tableBox">
      <div class="block-title">
        查询信息
      </div>
      <el-table
        :data="tableData"
        v-loading="loading">
        <el-table-column type="expand">
          <template
            slot-scope="scope"
            v-if="scope.row.ticketList && scope.row.ticketList.length > 0">
            <el-table :data="scope.row.ticketList">
              <el-table-column
                width="260"
                prop="ticketInfo"
                label="票信息">
                <template slot-scope="scope">
                  <div class=""><span>票种：</span>{{ scope.row.ticketTypeName }}</div>
                  <div class=""><span>票号：</span>{{ scope.row.ticketNo }}</div>
                  <div class=""><span>线上票号：</span>{{ scope.row.otaTicketNo }}</div>
                  <div class=""><span>票号二维码图片地址：</span>{{ scope.row.qrcodeUrl }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="playDateBegin"
                label="游玩时间">
                <template slot-scope="scope">
                  {{ scope.row.playDateBegin || scope.row.playDateEnd ? `${scope.row.playDateBegin || ''} - ${scope.row.playDateEnd || ''}` : "无限制" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="buyTime"
                label="付款时间">
              </el-table-column>
              <el-table-column
                width="210"
                prop="guestInfo"
                label="游客信息">
                <template slot-scope="scope">
                  <div class=""><span>姓名：</span>{{ scope.row.guestName }}</div>
                  <div class=""><span>手机号：</span>{{ scope.row.guestPhone }}</div>
                  <div class=""><span>证件类型：</span>{{ papersType[scope.row.guestIdentifyType] }}</div>
                  <div class=""><span>证件号码：</span>{{ scope.row.guestIdentify }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="260"
                prop="ticketCheckInfo"
                label="检票信息">
                <template slot-scope="scope">
                  <div class=""><span>检票人数：</span>{{ scope.row.checkNum }}</div>
                  <div class=""><span>首次检票时间：</span>{{ scope.row.firstCheckTime }}</div>
                  <div class=""><span>最近一次检票时间：</span>{{ scope.row.checkTime }}</div>
                  <div class=""><span>核销通知：</span>{{ scope.row.isCheckSend ? '成功' : '未通知' }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="260"
                prop="ticketRefundInfo"
                label="退票信息">
                <template slot-scope="scope">
                  <div class=""><span>退款操作人：</span>{{ scope.row.cancelAdminName || '' }}</div>
                  <div class=""><span>退款金额：</span>{{ scope.row.cancelPrice || '' }}</div>
                  <div class=""><span>退款申请时间：</span>{{ scope.row.cancelSubmitTime || '' }}</div>
                  <div class=""><span>退款完成时间：</span>{{ scope.row.cancelCompleteTime || '' }}</div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="otaSourceName"
          label="订单来源渠道">
        </el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单号">
        </el-table-column>
        <el-table-column
          prop="partnerOrderNo"
          label="合作方订单号">
        </el-table-column>
        <el-table-column
          prop="buyerName"
          label="购买方名称">
        </el-table-column>
        <el-table-column
          prop="buyerPhone"
          label="购买方电话">
        </el-table-column>
        <el-table-column
          prop="buyerIdentify"
          label="购买方证件号">
        </el-table-column>
        <el-table-column
          prop="payStatus"
          label="支付状态">
          <template slot-scope="scope">
            <el-tag
              :type="getPayStatus(scope.row.payStatus,'type')"
              size="normal"
            >
              {{ getPayStatus(scope.row.payStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="payTime"
          label="支付时间">
        </el-table-column>
        <el-table-column
          prop="closeTime"
          label="关闭时间">
        </el-table-column>
        <el-table-column
          prop="otaCreateStatus"
          label="创建状态">
          <template slot-scope="scope">
            {{ scope.row.otaCreateStatus === 1 ? '创建成功' : '初始化' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isSelfOrder"
          label="是否自营">
          <template slot-scope="scope">
            {{ scope.row.isSelfOrder === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="otaCreateMsg"
          show-overflow-tooltip
          label="订单创建信息">
        </el-table-column>
        <!-- <el-table-column
          label="状态">
          <template slot-scope="scope">
            <el-tag :type="orderStatusDic[scope.row.status] && orderStatusDic[scope.row.status].color || ''">
              {{ orderStatusDic[scope.row.status] && orderStatusDic[scope.row.status].label || scope.row.status }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              @click="showOrderInfo(scope.row)">订单详情</el-button>
            <el-button
              type="text"
              @click="$refs.ticketInfo.show(scope.row.tickets)">门票详情</el-button>
            <el-button
              type="text"
              @click="showGuestInfo(scope.row)">游客信息</el-button> -->
            <el-button
              type="text"
              v-if="checkRefundVisible(scope.row)&&canCancel"
              @click="showOrderInfo(scope.row,'cancel')">退订单</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>

    <ElDialog
      :title="type==='cancel'?'退单':'订单详情'"
      width="760px"
      v-model="orderDialogVisible"
    >
      <OrderDialog
        :current-item="currentItem"
        :can-cancel="canCancel"
        @updateList="getOrderList"
        :type="type"></OrderDialog>
    </ElDialog>
    <ElDialog
      title="游客信息"
      width="760px"
      v-model="guestDialogVisible">
      <GuestDialog
        :current-item="currentItem"></GuestDialog>
    </ElDialog>

    <TicketInfo ref="ticketInfo"></TicketInfo>
  </div>
</template>
<script>
import { getOrderList, getOtaSourceList, cancelOrder } from '@/api/order'
import { getTicketTypeList } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import OrderDialog from './orderList/OrderDialog'
import GuestDialog from './orderList/GuestDialog'
import TicketInfo from './orderList/TicketInfo'
import { orderStatus, ticketStatusDic, IDENTIFY_TYPES } from '@/const'
import moment from 'moment'
import { getPayStatus } from '@/utils'

export default {
  name: 'orderList',
  components: {
    ElDialog,
    OrderDialog,
    GuestDialog,
    TicketInfo
  },
  data () {
    return {
      papersType: IDENTIFY_TYPES,
      ticketTypeList: [],
      otaSourceList: [],
      projectName: localStorage.getItem('otaProject'),
      totalObj: {},
      type: '', // 操作状态 cancel退订单
      form: {
        createTimeBegin: '',
        createTimeEnd: '',
        partnerOrderNo: '', // ota订单号
        visitorName: '', // 预订姓名
        visitorPhone: '', // 预订人手机
        visitorIdentify: '', // 预订人身份证
        orderStatus: '', // 状态
        orderNo: '', // 线下订单号
        ticketStatus: '', // 票状态
        playDateBegin: '', // 游玩开始日期
        playDateEnd: '', // 游玩结束日期
        ticketNo: '', // 票号
        pageNum: 1,
        pageSize: 10
      },
      orderStatusDic: orderStatus,
      ticketStatusDic,
      loading: false,
      tableData: [],
      total: 0,
      currentItem: {},
      orderDialogVisible: false,
      guestDialogVisible: false
    }
  },
  created () {
    this.getTicketTypeList()
    this.getOtaSourceList()
    this.getOrderList()
  },
  computed: {
    canCancel () {
      return this.$store.state.user.permissionList.includes('orders:cancel')
    },
    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
    }
  },
  methods: {
    getPayStatus,
    checkRefundVisible (item) {
      if (item.status !== 'CANCELED') return true
      if (item.status === 'CANCELED') {
        if (item.tickets.some(i => i.status !== 'CANCELED')) {
          return true
        } else {
          return false
        }
      }
      return false
    },
    reset () {
      this.$refs.form.resetFields()
    },
    getTicketTypeList () {
      getTicketTypeList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.ticketTypeList = res.data.records || []
      })
    },
    getOtaSourceList () {
      getOtaSourceList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.otaSourceList = res.data.records || []
      })
    },
    getOrderList (e, goFirst) {
      this.loading = true
      if (goFirst) { this.form.pageNum = 1 }

      if (this.form.createTimeBegin && this.form.createTimeEnd && this.form.createTimeBegin > this.form.createTimeEnd) {
        this.$message.error('下单起始时间不能大于下单截止时间')
        this.loading = false
        return
      }

      if (this.form.playDateBegin && this.form.playDateEnd && this.form.playDateBegin > this.form.playDateEnd) {
        this.$message.error('游玩开始时间不能大于游玩结束时间')
        this.loading = false
        return
      }

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

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

      if (this.form.playDateBegin) {
        this.form.playDateBegin = moment(this.form.playDateBegin).format('YYYY-MM-DD')
      }

      if (this.form.playDateEnd) {
        this.form.playDateEnd = moment(this.form.playDateEnd).format('YYYY-MM-DD')
      }

      getOrderList(this.form).then(res => {
        this.total = res.data.total || 0
        this.tableData = res.data.records || []
        console.log('this.tableData', this.tableData)
        this.loading = false
      })
    },
    showOrderInfo (item, type) {
      if ((item.otaSourceCode === 'CLEARWX' || item.otaSourceCode === 'CLEARWXDEV') && type === 'cancel') return this.$message.info('自营平台订单请到自营后台办理退票')
      this.currentItem = item
      this.type = type
      this.orderDialogVisible = true
    },
    cancelTicket (item) {
      this.$confirm('确定退票?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let ticketList = item.ticketList.map(i => {
          return {
            ticketId: i.id
          }
        })

        cancelOrder({
          ticketCancelRequestList: ticketList
        }).then(res => {
          this.loading = false
          this.$message.success('退票成功')
          this.getOrderList('', true)
        })
      })
    },
    showGuestInfo (item) {
      this.currentItem = item
      this.guestDialogVisible = true
    },
    handleExport () {
      this.form.export = true
      getOrderList(this.form).then(res => {
        this.$notify({
          title: '提示',
          message: '导出成功',
          type: 'success'
        })
      }, () => {
        this.$notify.error({
          title: '提示',
          message: '导出失败'
        })
      })
      this.form.export = false
    }
  }
}
</script>

<style scoped>

</style>
