<template>
  <a-modal
    :visible="value"
    title="订单详情"
    @cancel="handleCancel"
    @ok="handleCancel"
    width="1000px"
  >
    <a-spin :spinning="loading">
      <div v-if="detail">
        <div class="item-wrap">
          <h3 class="title">
            基本信息
          </h3>
          <div class="item">
            <label>创建时间：</label> {{ detail.create_time || '暂无' }}
          </div>

          <div class="item">
            <label>确认时间：</label> {{ detail.accept_time || '暂无' }}
          </div>

          <div class="item">
            <label>订单状态：</label>
            <a-tag :color="detail.status | statusColor">
              {{ detail.status | statusName }}
            </a-tag>
          </div>

          <div class="item">
            <label>OTA状态：</label> {{ detail.ota_distributor_order_status | otaStatusName }}
          </div>

          <div class="item">
            <label>检票时间：</label> {{ detail.check_time || '暂无' }}
          </div>

          <div class="item">
            <label>取消时间：</label> {{ detail.cancel_time || '暂无' }}
          </div>

          <div class="item" v-if="detail.car_number">
            <label>车牌号：</label> {{ detail.car_number || '暂无' }}
          </div>
        </div>

        <div class="item-wrap">
          <h3 class="title">
            支付信息
          </h3>
          <div class="item">

            <label>支付方式：</label>
            <a-tag color="blue">
              {{ detail.pay_way | payWayName }}
            </a-tag>
          </div>

          <div class="item">
            <label>支付类型：</label>
            <a-tag color="blue">
              {{ detail.pay_trade_type | payType }}
            </a-tag>
          </div>

          <div class="item">
            <label>支付状态：</label>
            <a-tag :color="detail.pay_status | payStatusColor">
              {{ detail.pay_status | payStatusName }}
            </a-tag>
          </div>
          <div class="item">
            <label>支付流水号：</label> {{ detail.pay_transaction_id || '暂无' }}
          </div>

        </div>

        <div class="item-wrap">
          <h3 class="title">
            购买者信息
          </h3>
          <div class="item">
            <label>姓名：</label> {{ detail.buyer_name || '暂无' }}
          </div>
          <div class="item">
            <label>电话：</label> {{ detail.buyer_phone || '暂无' }}
          </div>
          <div class="item">
            <label>证件类型：</label> {{ detail.buyer_papers_type | paperTypeName }}
          </div>
          <div class="item">
            <label>证件号：</label> {{ detail.buyer_identify || '暂无' }}
          </div>

          <div class="item">
            <label>备注：</label>
            {{ detail.remark || '无' }}
          </div>
          <a-button
            size="small"
            type="primary"
            @click="visible = true"
            v-if="detail.wxMiniProgramUser"
          >
            查看微信用户信息
          </a-button>
          <a-modal
            title="微信用户信息"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
          >
            <a-descriptions v-if="detail.wxMiniProgramUser">
              <a-descriptions-item>
                <p>昵称：{{ detail.wxMiniProgramUser.nickName }}</p>
                <p>头像：<img width="30px" :src="detail.wxMiniProgramUser.avatarUrl" alt=""> </p>
                <p>性别：{{ detail.wxMiniProgramUser.gender?'女':'男' }}</p>
                <p>国家：{{ detail.wxMiniProgramUser.country }}</p>
                <p>省/市：{{ detail.wxMiniProgramUser.province }} - {{ detail.wxMiniProgramUser.city }}</p>
                <p>手机号：{{ detail.wxMiniProgramUser.phoneNumber }}</p>
              </a-descriptions-item>
            </a-descriptions>
          </a-modal>
        </div>

        <div class="item-wrap" v-if="detail&&detail.agencyOrderInfo">
          <h3 class="title">
            旅行社信息
          </h3>
          <div class="item">
            <label>导游电话：</label> {{ detail.agencyOrderInfo && detail.agencyOrderInfo.guide_phone || '暂无' }}
          </div>
          <div class="item">
            <label>导游名字：</label> {{ detail.agencyOrderInfo && detail.agencyOrderInfo.guide_name || '暂无' }}
          </div>
          <div class="item">
            <label>旅行社名字：</label> {{ detail.agencyOrderInfo && detail.agencyOrderInfo.agency_name || '暂无' }}
          </div>
          <div class="item">
            <label>电子行程单：</label> {{ detail.agencyOrderInfo && detail.agencyOrderInfo.agency_order_no || '暂无' }}
          </div>
        </div>

        <div class="item-wrap">
          <h3 class="title">
            游客信息
          </h3>
        </div>

        <a-table
          :columns="columns"
          :data-source="detail.tickets.filter(i=>i.status !== 'CHANGED')"
          :row-key="record => record.id"
          :scroll="{x: 1800}"
        >
          <template
            slot="price"
            slot-scope="text, record"
          >
            ￥ {{ record.price }}
          </template>
          <template
            slot="status"
            slot-scope="text, record"
          >
            {{ record.status | statusName }}
          </template>
          <template
            slot="refund"
            slot-scope="text, record"
          >
            <span v-if="record.real_refund_price &&(record.price*1000 - record.real_refund_price*1000)/1000">￥ {{ (record.price*1000 - record.real_refund_price*1000)/1000 }}</span>
          </template>
          <template
            slot="real_refund_price"
            slot-scope="text, record"
          >
            <span v-if="record.real_refund_price">{{ record.real_refund_price }}</span>
          </template>
          <template
            slot="health_code_urls"
            slot-scope="text, record"
          >
            <a-popover placement="top">
              <template slot="content">
                <div style="display:flex;justify-content:space-between">
                  <div v-for="(item,index) in record.health_code_urls" :key="index" style="flex:1;margin-right:2px">
                    <img :src="item" alt="加载中" width="200" v-if="item" />
                  </div>
                </div>
              </template>
              <a-button type="link" v-if="record.health_code_urls&&record.health_code_urls.length"> 查看 </a-button>
            </a-popover>
          </template>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getOrderById } from '@/api/orderSetting/order'
import modalMixin from '@/mixin/modalMixin'

const columns = [
  {
    title: '票种',
    dataIndex: 'ticket_type_name',
    key: 'ticket_type_name'
  },
  {
    title: '票价',
    dataIndex: 'price',
    key: 'price',
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '游玩日期',
    dataIndex: 'play_date_begin',
    key: 'play_date_begin'
  },
  {
    title: '场次',
    dataIndex: 'batch_type_name',
    key: 'batch_type_name'
  },
  {
    title: '场次开始时间',
    dataIndex: 'batch_type_time',
    key: 'batch_type_time'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '线下票号',
    dataIndex: 'ticket_no',
    key: 'ticket_no'
  },
  {
    title: '线上票号',
    dataIndex: 'wx_ticket_no',
    key: 'wx_ticket_no'
  },
  {
    title: '姓名',
    dataIndex: 'guest_name',
    key: 'guest_name'
  },
  {
    title: '证件号',
    dataIndex: 'guest_identify',
    key: 'guest_identify'
  },
  {
    title: '退款手续费',
    dataIndex: 'refund',
    key: 'refund',
    scopedSlots: { customRender: 'refund' }
  },
  {
    title: '退款金额',
    dataIndex: 'real_refund_price',
    key: 'real_refund_price',
    scopedSlots: { customRender: 'real_refund_price' }
  },
  {
    title: '退款提交时间',
    dataIndex: 'cancel_submit_time',
    key: 'cancel_submit_time',
    scopedSlots: { customRender: 'cancel_submit_time' }
  },
  {
    title: '健康码',
    dataIndex: 'health_code_urls',
    key: 'health_code_urls',
    scopedSlots: { customRender: 'health_code_urls' }
  }

]

export default {
  mixins: [modalMixin],
  data () {
    return {
      columns,
      loading: false,
      detail: null,
      visible: false
    }
  },
  props: {
    orderType: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    value (val) {
      this.loading = true
      val && getOrderById(this.id).then(res => {
        // console.log(res)
        this.detail = res.extraInfo
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  clear: both; font-weight: bold; color: #0099a0; border-bottom: 1px solid #0099a0; line-height: 2;
}
.item-wrap{
  padding: 10px 0; overflow: hidden;
}
.item{
  width: 50%; float: left; margin-bottom: 10px; line-height: 24px;
}
</style>
