<template>
  <div class="collect-record-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入用户手机号"
          class="search-input"
          v-model="searchContent.phone"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="活动状态"
          class="search-input"
          v-model="searchContent.status"
          style="width: 200px"
        >
          <Option value="">全部</Option>
          <Option
            v-for="(item, index) in RecordState"
            :value="item"
            :key="'state-option-' + index"
          >
            {{ RecordStateObj[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>
      <div class="total-con">总计：{{ totalSize }} 条记录</div>
      <tables
        ref="tables"
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    const RecordState = {
      SUCCESS: 1,
      WAIT: 2,
      FAIL: 3
    }
    const RecordStateObj = {
      [RecordState.SUCCESS]: {
        label: '成功',
        color: 'success'
      },
      [RecordState.WAIT]: {
        label: '处理中',
        color: 'default'
      },
      [RecordState.FAIL]: {
        label: '失败',
        color: 'warning'
      }
    }
    return {
      RecordState,
      RecordStateObj,

      searchContent: {
        couponDeliveryId: '',
        phone: '',
        status:'',
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        { title: '编号', key: 'couponDeliveryRecordId', minWidth: 180 },
        { title: '手机号', key: 'phone', minWidth: 180 },
        { title: '应发数量', key: 'number', minWidth: 180 },
        { title: '实发数量', key: 'succeedNumber', minWidth: 180 },
        // { title: '订单编号', key: 'oid', minWidth: 180 },
        // { title: '通证编号', key: 'tokenId', minWidth: 180 },
        {
          title: '状态',
          key: 'status',
          width: 120,
          render: (h, params) => {
            let obj = RecordStateObj[params.row.status]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        {
          title: "备注",
          key: "remark",
          minWidth: 150,
          render: (h, { row }) => {
            return h("span", row.remark ? row.remark : "--");
          },
        },
        {
          title: '开始时间',
          minWidth: 180,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: true
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.searchContent.phone = this.searchContent.phone.trim()
      this.api({
        apiName: 'getCouponDeliveryRecordList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.searchContent.couponDeliveryId = this.$route.query.couponDeliveryId
    this.requestData()
  }
}
</script>

<style lang="less">
.collect-record-list-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;
      }
    }
  }
  .total-con {
    margin-bottom: 10px;
  }
}
</style>
