<template>
  <div>
    <a-card title="查询条件">
      <a-form
        class="search-box"
        :form="form"
        layout="inline"
        @submit.native.prevent="getTravelAgencyRecord(1)"
      >
        <a-form-item
          label="旅行社名称"
        >
          <a-select
            show-search
            style="width: 174px"
            v-model="form.user"
            :filter-option="filterOption"
          >
            <a-select-option key="">
              全部
            </a-select-option>
            <a-select-option
              v-for="item in userList"
              :key="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="交易类型"
        >
          <a-select
            style="width: 174px"
            v-model="form.type"
          >
            <a-select-option
              v-for="item in typeList"
              :key="item.name"
            >
              {{ item.des }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="时间范围"
        >
          <a-range-picker
            show-time
            v-model="form.timeRange"
            :ranges="{
              '今日': [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
              '本月': [moment().startOf('month'), moment().endOf('month')] }"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
          >
            搜索
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card title="交易记录">
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="orderList"
          :pagination="pagination"
          :row-key="record => record.id"
          @change="handleTableChange"
        >
          <template
            slot="trade_type"
            slot-scope="text, record"
          >
            <a-tag :color="record.trade_type==='deduction'?'red':'green'">
              {{ record.trade_type==='deduction'?'扣费':'充值' }}
            </a-tag>
          </template>

          <template
            slot="create_time"
            slot-scope="text, record"
          >
            {{ moment(record.create_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>

          <template
            slot="amount"
            slot-scope="text, record"
          >
            <b :class="record.trade_type==='deduction'?'red':'green'">
              {{ record.trade_type==='deduction'?'-':'+' }}{{ record.amount }}
            </b>
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { getTravelAgencyUser, getTravelAgencyUserTransactionRecord } from '@/api/saleChannel/travelAgency'
import moment from 'moment'

const columns = [
  {
    title: '名称',
    width: 160,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '交易类型',
    width: 100,
    dataIndex: 'trade_type',
    key: 'trade_type',
    scopedSlots: { customRender: 'trade_type' }
  },
  {
    title: '交易金额',
    width: 100,
    dataIndex: 'amount',
    key: 'amount',
    scopedSlots: { customRender: 'amount' }
  },
  {
    title: '余额',
    width: 100,
    dataIndex: 'balance',
    key: 'balance'
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'create_time',
    key: 'create_time',
    scopedSlots: { customRender: 'create_time' }
  }
]

export default {
  data () {
    return {
      columns,
      form: {
        user: '',
        type: '',
        timeRange: [moment().startOf('month'), moment().endOf('month')]
      },
      typeList: [
        { name: '', des: '全部' },
        { name: 'recharge', des: '充值' },
        { name: 'deduction', des: '扣费' }
      ],
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      userList: [],
      orderList: [],
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 13 }
      }
    }
  },
  created () {
    this.getTravelAgencyUser(1)
    this.getTravelAgencyRecord(1)
  },
  methods: {
    moment,
    getTravelAgencyUser (pageNum) {
      this.loading = true
      getTravelAgencyUser({ pageNum, pageSize: 999 }).then(res => {
        // console.log(res)
        const { list, total } = res.extraInfo
        this.userList = list
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageNum = pagination.current
      this.getTravelAgencyRecord(this.pagination.pageNum)
    },
    getTravelAgencyRecord (pageNum) {
      this.loading = true
      const { pageSize } = this.pagination
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.start = this.form.timeRange[0] ? this.form.timeRange[0].format('YYYY-MM-DD HH:mm:ss') : ''
      this.form.end = this.form.timeRange[1] ? this.form.timeRange[1].format('YYYY-MM-DD HH:mm:ss') : ''
      getTravelAgencyUserTransactionRecord(this.form).then(res => {
        const { list, total } = res.extraInfo
        this.orderList = list
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box .btn-wrap {
    padding: 10px 0 10px 88px;
}
</style>
