<template>
  <div class="notice-page">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入订单编号"
          class="search-input"
          v-model="searchContent.oid"
          style="width: 180px"
          clearable
        />
        <Select
          placeholder="请选择状态"
          class="search-input"
          v-model="searchContent.recordState"
          style="width:200px"
        >
          <Option value>全部</Option>
          <Option
            v-for="(item, index) of RevenueStatus"
            :value="item"
            :key="'series-option-' + index"
            >{{RevenueStateObj[item].label}}</Option
          >
        </Select>
        <DatePicker
          placeholder="开始时间至结束时间"
          v-model="createTime"
          type="daterange"
          placement="bottom-start"
          class="search-date"
          style="width:200px"
          @on-change="handleDateChange(createTime)"
          :editable="false"
          separator=" ~ "
        ></DatePicker>
        <ButtonGroup class="search-btngroup">
          <Button type="primary" style="margin-left: 20px" @click="handleSearch">查 找</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 { RevenueStatus, RevenueStateObj, PayTypeObj } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      RevenueStatus,
      RevenueStateObj,
      PayTypeObj,
      searchContent: {
        oid: '',
        pageNum: 1,
        pageSize: 10,
        recordState: '',
        timeStart: '',
        timeEnd: ''
      },
      createTime: [],
      tableData: [],
      columns: [
        { title: '订单号', key: 'oid', align: 'left', minWidth: 180 },
        { title: '商家收益', key: 'merchantProfit', align: 'center', minWidth: 120 },
        { title: '结算方式',
          key: 'payType',
          align: 'center',
          minWidth: 120,
          render: (h, params) => {
            return h('div', PayTypeObj[params.row.payType])
          }
        },
        { title: '订单金额', key: 'orderTotal', align: 'center', minWidth: 120 },
        { title: '用户支付', key: 'userPayAmount', align: 'center', minWidth: 120 },
        { title: '商家收款', key: 'merchantCollection', align: 'center', minWidth: 120 },
        { title: '平台提成', key: 'platCommission', align: 'center', minWidth: 120 },
        { title: '商家补贴', key: 'merchantSubsidy', align: 'center', minWidth: 120 },
        { title: '平台补贴', key: 'platSubsidy', align: 'center', minWidth: 120 },
        { title: '状态',
          key: 'type',
          minWidth: 160,
          align: 'center',
          render: (h, params) => {
            let obj = RevenueStateObj[params.row.recordState]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          } },
        { title: '记录时间',
          key: 'createTime',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        }
      ],
      loading: false,
      totalSize: 0
    }
  },
  methods: {
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    requestData () {
      this.loading = true
      this.searchContent.oid = this.searchContent.oid.replace(/\s+/g, '')
      this.api({
        apiName: 'profitRecordList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleRefresh () {
      this.reload()
    },
    handleDateChange (createTime) {
      if (createTime && createTime.length == 2 && createTime[0] && createTime[1]) {
        this.searchContent.timeStart = new Date(createTime[0]).getTime()
        this.searchContent.timeEnd =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.searchContent.timeStart = ''
        this.searchContent.timeEnd = ''
      }
    },
    handleCurrentChange () {

    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style scoped lang="less">
.notice-page .search-con {
  display: flex;
  padding: 10px 0;
  .search-input {
    width: 300px;
    margin-right: 10px;
  }
}
</style>
