<template>
    <div class="parcel-center-page">
<!--      包裹中心-->
      <Card>
        <div class="search-con">
          <Input
            placeholder="快递单号"
            class="search-input"
            v-model="searchContent.packageNum"
            style="width: 200px"
            clearable
          />
          <Input
            placeholder="提货单号"
            class="search-input"
            v-model="searchContent.orderDeliveryId"
            style="width: 200px"
            clearable
          />
          <Input
            placeholder="用户ID"
            class="search-input"
            v-model="searchContent.uid"
            style="width: 200px"
            clearable
          />
          <Select
            placeholder="包裹状态"
            class="search-input"
            v-model="searchContent.deliveryState"
            style="width: 200px"
          >
            <Option value>全部</Option>
            <Option
              v-for="(item, index) of PickDeliveryStatus"
              :value="item"
              :key="'state-option-' + index"
            >{{ PickDeliveryStatusObj[item].label }}</Option
            >
          </Select>
          <ButtonGroup class="search-btngroup">
            <Button @click="handleSearch" type="primary">搜索</Button>
            <Button type="primary" @click="handleRefresh">
              <Icon type="md-refresh" />
            </Button>
          </ButtonGroup>
        </div>
        <tables
          ref="tables"
          class="order-table-con"
          pagable
          v-model="tableData"
          :columns="columns"
          :currentPage="searchContent.pageNum"
          :pageSize="searchContent.pageSize"
          :totalSize="totalSize"
          :loading="loading"
          @on-change="handleCurrentChange"
        />
      </Card>
    </div>
</template>

<script>
import { PickDeliveryStatus, PickDeliveryStatusObj } from '@/enums'
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  name: 'parcel-center',
  components: {
    Tables
  },
  data () {
    return {
      PickDeliveryStatus,
      PickDeliveryStatusObj,
      loading: false,
      searchContent: {
        packageNum: '',
        orderDeliveryId: '',
        deliveryState: '',
        uid: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        { title: '快递单号', key: 'expressNo', minWidth: 180, align: 'left' },
        { title: '用户ID', key: 'uid', minWidth: 180, align: 'left' },
        { title: '提货单号', key: 'orderDeliveryId', minWidth: 180, align: 'left' },
        { title: '商品编号', key: 'goodsId', minWidth: 180, align: 'left' },
        { title: '商品件数', key: 'number', width: 90, align: 'center' },
        { title: '物流渠道', key: 'expressName', width: 100, align: 'center' },
        { title: '包裹状态',
          key: 'oid',
          width: 130,
          align: 'center',
          render: (h, params) => {
            let obj = PickDeliveryStatusObj[params.row.deliveryState] || {}
            return h('Tag', { props: { color: obj.color } }, obj.label)
          }
        },
        { title: '下单时间',
          key: 'createTime',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '操作',
          key: 'oid',
          minWidth: 150,
          align: 'left',
          fixed: 'right',
          render: (h, params) => {
            const detailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleDetail(params.row)
                }
              },
              '详 情'
            )
            return h('div', [detailBtn])
          }
        }
      ],
      totalSize: 0
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.searchContent.packageNum = this.searchContent.packageNum.replace(/\s+/g, '')
      this.searchContent.orderDeliveryId = this.searchContent.orderDeliveryId.replace(/\s+/g, '')
      this.searchContent.uid = this.searchContent.uid.replace(/\s+/g, '')
      this.api({
        apiName: 'getParcelList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleDetail (row) {
      return () => {
        let query = { orderDeliveryId: row.orderDeliveryId }
        this.$router.push({ name: 'parcel_detail', query })
      }
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style scoped lang="less">
  .parcel-center-page .search-con {
    padding: 10px 0;
    .search {
      &-col {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-input {
        display: inline-block;
        width: 150px;
        margin-right: 5px;
      }
      &-date {
        margin-right: 5px;
      }
      &-btngroup {
        margin-right: 5px;
      }
    }
  }
</style>
