<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.tickets&&detail.tickets.length&&detail.tickets[0].ticket_type_name || '暂无' }}
          </div>
          <div class="item">
            <label>场次：</label> {{ detail.tickets[0].batch_type_name || '暂无' }}
          </div>

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

          <div class="item">
            <label>预约人数：</label> {{ detail.tickets.length }}
          </div>

          <div class="item">
            <label>预约日期：</label> {{ detail.tickets[0].play_date_begin || '暂无' }}
          </div>

          <div class="item">
            <label>创建时间：</label> {{ moment(detail.create_time).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </div>

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

        <a-table
          :columns="columns"
          :data-source="detail.tickets"
          :row-key="record => record.id"
          :scroll="{x: 1200}"
        >
          <template
            slot="guestPapersType"
            slot-scope="text, record"
          >
            {{ identifyTypeChangeToZH(record.guest_papers_type) }}
          </template>

          <template
            slot="status"
            slot-scope="text, record"
          >
            {{ record.status | statusName }}
          </template>

          <template
            slot="cancelTime"
            slot-scope="text, record"
          >
            {{ record.cancel_submit_time && moment(record.cancel_submit_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>

          <template
            slot="operation"
            slot-scope="text, record"
            v-if="record.status==='WAIT_USE'&&detail.status==='WAIT_USE'"
          >
            <a-popconfirm
              title="确定取消此预约？"
              @confirm="cancelPartOrder(record.id)"
            >
              <a-button
                size="small"
                type="primary"
              >
                取消预约
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

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

const columns = [
  {
    title: '票号',
    dataIndex: 'wx_ticket_no',
    key: 'wx_ticket_no',
    width: '200px'
  },
  {
    title: '场次',
    dataIndex: 'batch_type_name',
    key: 'batch_type_name'
  },
  {
    title: '游客姓名',
    dataIndex: 'guest_name',
    key: 'guest_name'
  },
  {
    title: '证件类型',
    dataIndex: 'guest_papers_type',
    key: 'guest_papers_type',
    scopedSlots: { customRender: 'guestPapersType' }
  },
  {
    title: '证件号码',
    dataIndex: 'guest_identify',
    key: 'guest_identify',
    width: '160px'

  },

  {
    title: '游玩日期',
    dataIndex: 'play_date_begin',
    key: 'play_date_begin'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '取消时间',
    dataIndex: 'cancel_submit_time',
    key: 'cancel_submit_time',
    scopedSlots: { customRender: 'cancelTime' },
    width: '160px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '180px',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }

]

export default {
  mixins: [modalMixin],
  data () {
    return {
      columns,
      loading: false,
      detail: null,
      detailVisible: false
    }
  },
  props: {
    id: {
      type: Number,
      default: null
    },
    ticketTypeList: {
      type: Array,
      default: null
    }
  },
  methods: {
    moment,
    cancelPartOrder (id) {
      this.loading = true
      const params = {
        id: this.id,
        ticketIds: [id]
      }
      cancelPart(params).then(res => {
      }).finally(() => {
        this.loading = false
        this.$message.success('取消成功')
        this.getPreOrderById()
        this.$emit('update')
      })
    },
    identifyTypeChangeToZH (e) {
      switch (e) {
        case 'ID_CARD':
          return '身份证'
        case 'HUZHAO':
          return '护照'
        case 'GANGAO':
          return '港澳通行证'
        case 'TAIBAO':
          return '台湾通行证'
        case 'YONGJIUJULIU':
          return '外国人永久居留身份证'
        case 'SHEBAO':
          return '社保'
      }
    },
    getPreOrderById () {
      this.loading = true
      getOrderById(this.id).then(res => {
        this.detail = res.extraInfo
        console.log('detail111', this.detail)
      }).finally(() => {
        this.loading = false
      })
    }
  },
  watch: {
    value (val) {
      val && this.getPreOrderById()
    }
  }
}
</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>
