<template>
  <ElDialog
    title="消费记录"
    width="80%"
    :before-close="handleClose"
    class="amount-log-dialog"
    :visible.sync="visible">
    <div class="form-wrap">
      <div class="searchBox">
        <el-form
          ref="form"
          :model="form"
          :inline="true"
          label-width="100px">
          <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-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>
        <div class="btn-wrap">
          <el-button @click="reset">重置</el-button>
          <el-button
            type="primary"
            @click="getAmountLog">搜索</el-button>
        </div>
      </div>

      <div class="tableBox">
        <div class="block-title">分销商：{{ otaSourceName }}</div>
        <el-table
          :data="tableData"
          v-loading="loading">
          <el-table-column
            label="#"
            type="index"
            min-width="60">
          </el-table-column>
          <el-table-column label="消费类型">
            <template slot-scope="scope">
              {{ scope.row.type | filterOtaAmountType }}
            </template>
          </el-table-column>

          <el-table-column
            label="金额(￥)"
            prop="amount">
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :current-page.sync="form.pageNum"
          @current-change="getAmountLog"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <div class="dialog-btn-wrap">
        <el-button
          @click="handleClose">关闭</el-button>
      </div>
    </div>
  </ElDialog>
</template>

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

export default {
  props: {
    otaItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      tableData: [],
      otaSourceName: '',
      form: {
        otaSourceId: '',
        type: '',
        amount: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  filters: {
    filterOtaAmountType (value) {
      if (value === 1) {
        return '充值'
      } else if (value === 2) {
        return '扣款'
      } else if (value === 3) {
        return '消费'
      }
      return ''
    }
  },
  watch: {
  },
  methods: {
    show (data) {
      this.visible = true
      this.reset()
      this.otaSourceName = data.otaSourceName
      this.form.otaSourceId = data.otaSourceId
      this.getAmountLog()
    },
    handleClose () {
      this.visible = false
      this.reset()
    },
    reset () {
      this.form.otaSourceId = ''
      this.otaSourceName = ''
      this.form.pageNum = 1
      this.form.type = ''
      this.form.amount = ''
      this.tableData = []
      this.total = 0
    },
    getAmountLog () {
      this.loading = true
      getOtaPaymentAmountLog(this.form).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss">
.amount-log-dialog {
  .form-wrap {
    padding-bottom: 20px;
    .searchBox {
      .el-form-item {
        display: inline-block;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.btnWrapper{
  margin-left:50px;
  span{
    font-size: 12px;
  }
}

</style>
