<template>
  <div>
    <a-card title="报表列表">
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="orderList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <!-- <template
            slot="channel"
            slot-scope="text, record"
          >
            {{ getChannelText(record.channel) }}
          </template> -->

          <template
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              type="primary"
              @click="download(record.id)"
            >
              立即下载
            </a-button>
            <!-- <a-popconfirm
              title="确认删除？"
              @confirm="handleDelete(record.id)"
              ok-text="是"
              cancel-text="否"
            >
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm> -->
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { getReport, downloadReport, deleteReport } from '@/api/orderSetting/report'

const columns = [
  {
    title: '文件名',
    dataIndex: 'filename',
    key: 'filename'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type'
  },
  // {
  //   title: '状态',
  //   dataIndex: 'status',
  //   key: 'status'
  // },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 180,
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  computed: {
    salesChannel () {
      return this.$store.state.app.salesChannel
    }
  },
  created () {
    this.getOrderList()
  },
  data () {
    return {
      columns,
      termList: [],
      orderStatusCheckAll: true,
      orderStatusIndeterminate: false,
      payStatusCheckAll: true,
      payStatusIndeterminate: false,
      selectedOrderStatus: [],
      selectedPayStatus: [],
      orderList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      loading: true,
      detailVisible: false,
      currentId: null,
      form: {
        user_id: '',
        buyer_identity_card_number: '',
        buyer_name: '',
        buyer_phone: '',
        channel: '',
        order_no: '',
        ticket_no: '',
        wx_order_no: '',
        wx_ticket_no: ''
      }
    }
  },
  methods: {
    getChannelText (value) {
      return this.salesChannel.find(i => i.name === value).description
    },
    handleTableChange (page) {
      this.pagination.current = page.current
      this.getOrderList()
    },
    getOrderList () {
      this.loading = true
      const params = { ...this.form, pageNum: this.pagination.current }
      getReport(params).then(res => {
        this.pagination.total = res.extraInfo.total
        this.orderList = res.extraInfo.list
        this.loading = false
      })
    },
    showDetail (id) {
      this.detailVisible = true
      this.currentId = id
    },
    download (id) {
      downloadReport(id).then(res => {
        const url = res.extraInfo.url
        const link = document.createElement('a')
        link.setAttribute('download', '')
        link.href = url
        link.click()
        link.remove()
      })
    },
    handleDelete (id) {
      deleteReport(id).then(res => {
        this.$message.success('删除成功。')
        this.getOrderList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: relative; padding-left: 80px;  margin-bottom: 15px; font-size: 14px;
  b {
    position: absolute; top: 0; left: 0;  margin-right: 10px;
  }
}
.ant-form-item {
  width: 320px;
}
.checkbox-wrap {
  display: flex;  width: 100%; align-items: center;
  .ant-form-item-label{
    flex-grow: 0; flex-shrink: 0;
  }
  ::v-deep .ant-checkbox-group {
    display: inline;
  }
  .ant-checkbox-wrapper{
    margin-right: 5px;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
}

</style>
