<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="150px">
        <el-form-item
          label="创建起始时间"
          prop="createTimeBegin">
          <el-date-picker
            v-model="form.createTimeBegin"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="创建截止时间"
          prop="createTimeEnd">
          <el-date-picker
            v-model="form.createTimeEnd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="分销商名称"
          prop="otaSourceId"
        >
          <el-select
            v-model="form.otaSourceId"
            placeholder="请选择"
            filterable>
            <el-option
              label="全部"
              value="">
            </el-option>
            <el-option
              v-for="item in otaList"
              :key="item.id"
              :label="item.otaSourceName"
              :value="item.otaSourceId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="消费类型"
          prop="type">
          <el-select
            clearable
            v-model="form.type">
            <el-option
              value=""
              label="全部"></el-option>
            <el-option
              :value="1"
              label="充值"></el-option>
            <el-option
              :value="2"
              label="扣款"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="金额"
          prop="amount">
          <el-input-number
            :step="0.01"
            :precision="2"
            v-model="form.amount"></el-input-number>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button @click="reset">重置</el-button>
        <el-button
          type="primary"
          @click="getData($event,true)">搜索</el-button>
      </div>
    </div>

    <div class="tableBox">
      <!-- <div class="block-title">
        查询结果
      </div> -->
      <el-table
        :data="tableData"
        row-class-name="is-center"
        v-loading="loading">
        <el-table-column
          prop="otaSourceCode"
          label="编码">
        </el-table-column>
        <el-table-column
          prop="otaSourceName"
          label="分销商">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型">
          <template slot-scope="scope">
            <el-tag :type="getType(scope.row.type).color">
              {{ getType(scope.row.type).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="金额">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        @current-change="getData"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getOtaPaymentAmountLog, getOtaProjectList } from '@/api/ota'
import moment from 'moment'

export default {
  name: 'otaPaymentAmountLog',
  data () {
    return {
      ticketTypeList: [],
      total: 0,
      projectName: localStorage.getItem('otaProject'),
      form: {
        createTimeBegin: moment().subtract(7, 'days').startOf('day'),
        createTimeEnd: moment().endOf('day'),
        pageNum: 1,
        pageSize: 10,
        type: '', // type
        amount: '', // 金额
        otaSourceId: '' // 分销商ID
      },
      tableData: [],
      loading: false,
      otaList: [],
      exportLoading: false
    }
  },
  computed: {
    queryClear () {
      return this.$store.state.user.permissionList.includes('stats:clearwx_query')
    }
  },
  created () {
    this.getOtaProjectList()
    this.getData()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    getType (input) {
      let obj = {
        1: { name: '充值', color: 'success' },
        2: { name: '退款', color: 'danger' },
        3: { name: '消费', color: 'primary' }
      }
      return obj[input]
    },
    // 获取票种列表
    // getTicketTypeList () {
    //   return getTicketTypeList({
    //     pageNum: 1,
    //     pageSize: 999
    //   }).then(res => {
    //     this.ticketTypeList = res.list
    //   })
    // },
    async getOtaProjectList () {
      const res = await getOtaProjectList({ pageSize: -1, pageNum: 1, otaSourceId: '' })
      this.otaList = res.data.records || []
    },
    getData (e, goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)
      if (this.form.createTimeBegin) {
        this.form.createTimeBegin = moment(this.form.createTimeBegin).format('YYYY-MM-DD HH:mm:ss')
      }
      if (this.form.createTimeEnd) {
        this.form.createTimeEnd = moment(this.form.createTimeEnd).format('YYYY-MM-DD HH:mm:ss')
      }
      getOtaPaymentAmountLog(this.form).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total || 0
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
