<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <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"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="分销商订单号"
          prop="keyWords1">
          <el-input v-model="form.keyWords1"></el-input>
        </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="keyWords9">
          <el-select
            v-model="form.keyWords9"
            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="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="keyWords5">
          <el-select
            v-model="form.keyWords5"
            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="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">
          <el-input v-model="form.keyWords4"></el-input>
        </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 class="totalWrapper">
          <span>总张数：{{ totalObj.sumCount }}</span>&nbsp;&nbsp;
          <span>总金额：{{ totalObj.sumPrice }}</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading">
        <el-table-column
          width="120"
          prop="order_no"
          label="线下订单号">
        </el-table-column>
        <el-table-column
          width="120"
          prop="ota_order_no"
          label="分销商订单号">
        </el-table-column>
        <el-table-column
          width="120"
          prop="buyer_name"
          label="预订人">
        </el-table-column>
        <el-table-column
          prop="tickets[0].ticketTypeName"
          label="票种">
        </el-table-column>
        <el-table-column
          prop="tickets[0].pricecode_id"
          label="价格码">
        </el-table-column>
        <el-table-column
          prop="otaSourceName"
          label="分销商">
        </el-table-column>
        <el-table-column
          prop="tickets.length"
          label="数量">
        </el-table-column>
        <el-table-column
          label="待审核数量">
          <template slot-scope="scope">
            {{ getCancelNum(scope.row.tickets) }}
          </template>
        </el-table-column>
        <el-table-column
          label="总价">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          prop="createTime"
          label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          fixed="right">
          <template slot-scope="scope">
            <el-tag :type="orderStatusDic[scope.row.status].color">
              {{ orderStatusDic[scope.row.status].label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          fixed="right"
          label="详细信息">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showGuestInfo(scope.row)">游客信息</el-button>
            <el-button
              type="text"
              @click="showOrderInfo(scope.row)">订单详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleAudit(scope.row,'APPROVE')">批准</el-button>
            <el-button
              type="danger"
              @click="handleAudit(scope.row,'REJECT')">拒绝</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="订单详情"
      width="1200px"
      v-model="orderDialogVisible">
      <OrderDialog
        :current-item="currentItem"></OrderDialog>
    </ElDialog>
    <ElDialog
      title="游客信息"
      width="760px"
      v-model="guestDialogVisible">
      <GuestDialog
        :current-item="currentItem"></GuestDialog>
    </ElDialog>
  </div>
</template>
<script>
import { getOrderList, exportOrderList, cancelOrderAudit } from '@/api/order'
import { getTicketTypeList } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import OrderDialog from './orderList/OrderDialog'
import GuestDialog from './orderList/GuestDialog'
import { orderStatus } from '@/const'

export default {
  name: 'refundAudit',
  components: {
    ElDialog,
    OrderDialog,
    GuestDialog
  },
  data () {
    return {
      ticketTypeList: [],
      totalObj: {},
      projectName: localStorage.getItem('otaProject'),
      form: {
        startDate: '',
        endDate: '',
        keyWords1: '', // ota订单号
        keyWords2: '', // 预订姓名
        keyWords3: '', // 预订人手机
        keyWords4: '', // 预订人身份证
        keyWords5: 'CANCEL_AUDIT', // 状态
        keyWords6: '', // 线下订单号
        keyWords7: '', // 第三方订单号
        keyWords8: '', // 票种名称
        keyWords9: '', // 分销商名称
        pageNum: 1,
        pageSize: 10
      },
      orderStatusDic: orderStatus,
      loading: false,
      tableData: [],
      total: 0,
      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.getOrderList()
    if (this.projectName === 'YINXIANGMAZU' && !this.queryClear) {
      this.form.keyWords9 = this.otaList[0].otaSourceName
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    getTicketTypeList () {
      return getTicketTypeList({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        this.ticketTypeList = res.list
      })
    },
    getOrderList (e, goFirst) {
      this.loading = true
      if (goFirst) { this.form.pageNum = 1 }
      getOrderList(this.form).then(res => {
        this.total = res.total
        this.tableData = res.list
        this.totalObj = this.tableData.pop()
        console.log('this.totalObj', this.totalObj)
        this.loading = false
      })
    },
    showOrderInfo (item) {
      this.currentItem = item
      this.orderDialogVisible = true
    },
    showGuestInfo (item) {
      this.currentItem = item
      this.guestDialogVisible = true
    },
    getCancelNum (tickets) {
      let status = ['CANCEL_AUDIT_WAIT_USE', 'CANCEL_AUDIT_USED', 'CANCEL_AUDIT_PART_USED']
      let auditTickets = tickets.filter(i => {
        return status.indexOf(i.status) > -1
      })
      return auditTickets.length
    },
    handleExport () {
      exportOrderList(this.form).then(res => {
        this.$notify({
          title: '提示',
          message: '导出成功',
          type: 'success'
        })
      }, () => {
        this.$notify.error({
          title: '提示',
          message: '导出失败'
        })
      })
    },
    handleAudit (data, status) {
      this.$confirm(`确认${status === 'APPROVE' ? '批准' : '拒绝'}该订单吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: status === 'APPROVE' ? 'success' : 'error'
      }).then(() => {
        cancelOrderAudit({
          'audit_result': status,
          'ota_order_no': data.ota_order_no
        }).then(res => {
          this.$message.success('操作成功')
          this.getOrderList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.totalWrapper{
  color: red;
}

</style>
