<template>
  <div>
    <a-card title="订单任务列表">
      <a-table
        :columns="columns"
        :data-source="taskList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
      >
        <template
          slot="status"
          slot-scope="text, record"
        >
          <a-badge :status="statusMap[record.status].status" /> {{ statusMap[record.status].label }}
        </template>

        <template
          slot="operation"
          slot-scope="text, record"
        >
          <a-button
            size="small"
            type="primary"
            @click="$refs.taskDetail.show(record.id)"
          >
            详细信息
          </a-button>
        </template>
      </a-table>
    </a-card>

    <TaskDetail ref="taskDetail"></TaskDetail>
  </div>
</template>

<script>
import { getOrderCancelTask } from '@/api/orderSetting/order'
import TaskDetail from './TaskDetail'

const statusMap = {
  SUBMIT: {
    label: '已提交',
    status: 'default'
  },
  PROCESSING: {
    label: '处理中',
    status: 'processing'
  },
  PROCESSED: {
    label: '已处理',
    status: 'warning'
  },
  COMPLETE: {
    label: '已完成',
    status: 'success'
  }
}

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '备注',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '提交时间',
    dataIndex: 'submit_time',
    key: 'submit_time'
  },
  {
    title: '完成时间',
    dataIndex: 'complete_time',
    key: 'complete_time'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  created () {
    this.getOrderCancelTask()
  },
  components: {
    TaskDetail
  },
  data () {
    return {
      columns,
      statusMap,
      taskList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    getOrderCancelTask () {
      const params = { pageSize: 10, pageNum: this.pagination.current }

      getOrderCancelTask(params).then(res => {
        this.taskList = res.extraInfo.list
      })
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getOrderList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
