<template>
  <div>
    <div style="padding: 20px;">
      <el-form
        :model="orderInfo"
        label-width="110px"
        class="product-info-form"
        style="margin-bottom: 30px;"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="创建时间">
              <span>{{ orderInfo.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分销商id">
              <span>{{ orderInfo.otaSourceId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分销商编码">
              <span>{{ orderInfo.otaSourceCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单来源渠道">
              <span>{{ orderInfo.otaSourceName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="自营订单用户ID">
              <span>{{ orderInfo.userId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付状态">
              <el-tag
                :type="getPayStatus(orderInfo.payStatus,'type')"
                size="normal"
              >
                {{ getPayStatus(orderInfo.payStatus) }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付时间">
              <span>{{ orderInfo.payTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关闭时间">
              <span>{{ orderInfo.closeTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <span>{{ orderInfo.orderNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合作方订单号">
              <span>{{ orderInfo.partnerOrderNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买方名称">
              <span>{{ orderInfo.buyerName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买方电话">
              <span>{{ orderInfo.buyerPhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买方证件号">
              <span>{{ orderInfo.buyerIdentify }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买方证件类型">
              <span>{{ getIdType(orderInfo.buyerIdentifyType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单总额">
              <span>{{ orderInfo.price }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-tag :type="orderStatusDic[orderInfo.status] && orderStatusDic[orderInfo.status].color || ''">
                {{ orderStatusDic[orderInfo.status] && orderStatusDic[orderInfo.status].label || orderInfo.status }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单创建状态">
              <span>{{ orderInfo.otaCreateStatus === 1 ? '成功' : '初始化' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单创建信息">
              <span>{{ orderInfo.otaCreateMsg }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否自营订单">
              <span>
                <template v-if="orderInfo.isSelfOrder === 1">是</template>
                <template v-else>否</template>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="orderInfo.ticketList || []"
        max-height="350">
        <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>票号二维码：
                <img
                  :src="scope.row.qrcodeUrl"
                  alt="二维码"
                  style="width:40px;height:40px;">
              </span>
            </div>
            <div class=""><span>票价：</span>{{ scope.row.price }}</div>
            <div class=""><span>市场价：</span>{{ scope.row.marketPrice }}</div>
            <div class=""><span>结算价：</span>{{ scope.row.settlementPrice }}</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>{{ getIdType(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>
    </div>
    <div class="dialog-btn-wrap">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getOrderById } from '@/api/platform'
import { getPayStatus } from '@/utils'
import { orderStatus, papersType, IDENTIFY_TYPES } from '@/const'

export default {
  props: {
    orderItem: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      orderStatusDic: orderStatus,
      papersType,
      visible: false,
      total: 0,
      loading: false,
      orderInfo: {},
      pageSize: 10,
      pageNum: 1
    }
  },
  methods: {
    getPayStatus,
    getIdType (type) {
      return IDENTIFY_TYPES[type] || type
    },
    handleClose () {
      this.$parent.handleClose()
    },
    async getInfo () {
      const { orderItem } = this
      const { orderId, projectName } = orderItem
      if (!orderId) return
      this.orderInfo = {}
      this.loading = true
      const res = await getOrderById({ orderId, projectName })
      this.orderInfo = res.data || {}
      this.loading = false
    }
  },
  watch: {
    async visible (val) {
      this.getInfo()
    }
  }
}
</script>

<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
