<template>
  <div class="self-draw-table-con">
    <div class="search-con">
      <Input
        placeholder="提货单号 / 订单编号 / 收货人 / 账号"
        class="search-input"
        v-model="searchContent.keyword"
        style="width: 240px"
        clearable
      />
      <Input
        placeholder="商品名称 / ID"
        class="search-input"
        v-model="searchContent.goodsName"
        style="width: 200px"
        clearable
      />
      <Select
        placeholder="状态"
        class="search-input"
        v-model="searchContent.status"
      >
        <Option value>全部</Option>
        <Option
          v-for="(item, key) of DeliveryStatus"
          :value="item"
          :key="'type-option-' + key"
          >{{ DeliveryStatusObj[item].label }}</Option
        >
      </Select>
      <DatePicker
        placeholder="提货时间"
        v-model="createTime"
        type="daterange"
        placement="bottom-start"
        class="search-date"
        @on-change="handleDateChange(createTime)"
        :editable="false"
        separator=" ~ "
      ></DatePicker>
      <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"
      pagable
      v-model="tableData"
      :columns="columns"
      :currentPage="searchContent.pageNum"
      :pageSize="searchContent.pageSize"
      :totalSize="totalSize"
      :loading="loading"
      @on-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import TableExpand from './table-expand'
import {
  DeliveryType,
  DeliveryTypeName,
  DeliveryStatus,
  DeliveryStatusObj
} from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables,
    TableExpand
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      DeliveryType,
      DeliveryTypeName,
      DeliveryStatus,
      DeliveryStatusObj,

      searchContent: {
        type: DeliveryType.SELF,
        status: '',
        timeHead: '',
        timeTail: '',
        goodsName: '',
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],

      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(TableExpand, {
              props: {
                row: params.row,
                type: DeliveryType.SELF
              }
            })
          }
        },
        { title: '提货单号', key: 'drawNo', minWidth: 210, align: 'center' },
        {
          title: '订单编号',
          key: 'oid',
          minWidth: 210,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.oid || '--')
          }
        },
        {
          title: '商品名称',
          key: 'goodsName',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            let { goodsName, drawGoods } = params.row
            let label = ''
            if (goodsName) {
              label = goodsName
            } else {
              label = drawGoods.map((item) => item.goodsName).join(', ')
            }
            if (label.length > 50) {
              label = label.slice(0, 50) + '...'
            }
            return h('span', label)
          }
        },
        { title: '用户UID', key: 'xlsId', minWidth: 120, align: 'center' },
        { title: '用户账号', key: 'account', minWidth: 120, align: 'center' },
        {
          title: '状态',
          key: 'status',
          width: 120,
          align: 'center',
          render (h, params) {
            let obj = DeliveryStatusObj[params.row.status] || {}
            return h('Tag', { props: { color: obj.color } }, obj.label)
          }
        },
        {
          title: '提货时间',
          width: 200,
          align: 'center',
          render (h, params) {
            return h('span', formatTime(params.row.drawTime))
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getPickUpList',
        postdata: this.searchContent,
        success: (res) => {
          this.totalSize = res.data.total
          this.tableData = res.data.records
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },

    handleDateChange (createTime) {
      if (
        createTime &&
        createTime.length == 2 &&
        createTime[0] &&
        createTime[1]
      ) {
        this.searchContent.timeHead = new Date(createTime[0]).getTime()
        this.searchContent.timeTail =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.timeHead = ''
        this.searchContent.timeTail = ''
      }
    }
  },
  created () {
    if (!this.isBrand) {
      this.columns.splice(2, 0, {
        title: '品牌方',
        key: 'brandName',
        width: 150,
        align: 'center'
      })
    }
    this.requestData()
  }
}
</script>

<style lang="less">
.self-draw-table-con .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>
