<template>
    <div class="records-page">
        <Card>
        <div class="top-info">
           <h3>{{labelName}}</h3>
        </div>
        <div class="search-con">
        <Input
          placeholder="请输入交易对方地址"
          class="search-input"
          v-model="searchContent.oppositeAddress"
          style="width: 200px"
          clearable
        />

          <Select
          placeholder="请选择交易类型"
          class="search-input"
          style="width:200px"
          v-model="searchContent.tradeType"
        >
           <Option value>全部</Option>
           <Option v-for="(item, index) in TradType" :value="item" :key="index">{{TradTypeObj[item]}}</Option>
        </Select>
         <DatePicker
        placeholder="开始时间至结束时间"
        v-model="createTime"
        type="daterange"
        placement="bottom-start"
        class="search-input"
        @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"
        editable
        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'
import { TradTypeObj, TradType } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      labelName: '',
      searchContent: {
        commodityPassId: '',
        oppositeAddress: '',
        tradeType: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],
      columns: [
        { title: '编号', key: 'commodityPassId', minWidth: 200, align: 'center' },
        { title: '对方地址', key: 'oppositeAddress', width: 200, align: 'center' },

        { title: '交易数量', key: 'tradeNumber', width: 100, align: 'center' },
        { title: '交易类型',
          key: 'tradeType',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', TradTypeObj[params.row.tradeType])
          }
        },
        { title: '入库时间',
          key: 'createTime',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', formatTime(params.row.createTime))
          }
        }
      ],
      totalSize: 0,
      tableData: [],
      loading: false,
      TradType,
      TradTypeObj
    }
  },
  methods: {
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleCurrentChange () {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleDateChange (createTime) {
      if (createTime && createTime.length == 2 && createTime[0] && createTime[1]) {
        this.searchContent.startTime = new Date(createTime[0]).getTime()
        this.searchContent.endTime =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.startTime = ''
        this.searchContent.endTime = ''
      }
    },
    handleRefresh () {
      this.reload()
    },
    requestData () {
      this.loading = true
      this.api({
        apiName: 'externalTokenTradeList',
        postdata: this.searchContent,
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        },
        complete: () => {
          this.loading = false
        }
      })
    }
  },
  created () {
    let { commodityPassId, labelName } = this.$route.query
    this.labelName = labelName
    this.searchContent.commodityPassId = commodityPassId
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
.records-page {
    .search-con {
        padding: 10px 0;
    }
    .search-input {
        margin-right: 10px;
    }
}
</style>
