<template>
  <a-modal width="70%" :visible="visible" title="任务详情" @cancel="visible=false">
    <a-spin :spinning="loading">
      <a-table :pagination="false" :row-key="record => record.id" :dataSource="orders" :columns="columns">
        <template
          slot="pay_status"
          slot-scope="text, record"
        >
          <a-tag :color="record.pay_status | payStatusColor">{{ record.pay_status | payStatusName }}</a-tag>
        </template>

        <template
          slot="status"
          slot-scope="text, record"
        >
          <a-tag :color="record.status | statusColor">{{ record.status | statusName }}</a-tag>
        </template>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { getOrderCancelTaskById } from '@/api/orderSetting/order'

const columns = [
  {
    title: 'OTA订单号',
    dataIndex: 'order_no',
    key: 'order_no'
  },
  {
    title: '渠道订单号',
    dataIndex: 'wx_order_no',
    key: 'wx_order_no'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '确认时间',
    dataIndex: 'accept_time',
    key: 'accept_time'
  },
  {
    title: '取消时间',
    dataIndex: 'cancel_time',
    key: 'cancel_time'
  },
  {
    title: '检票时间',
    dataIndex: 'check_time',
    key: 'check_time'
  },
  {
    title: '支付状态',
    dataIndex: 'pay_status',
    key: 'pay_status',
    scopedSlots: { customRender: 'pay_status' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  }
]

export default {
  data () {
    return {
      columns,
      loading: false,
      orders: [],
      visible: false
    }
  },
  methods: {
    show (id) {
      this.id = id
      this.visible = true

      this.getOrderCancelTaskById()
    },
    getOrderCancelTaskById () {
      this.loading = true

      getOrderCancelTaskById(this.id).then(res => {
        this.orders = res.extraInfo.orders
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
