<template>
<div style="height:95%">
  <el-button  v-if="$local.isRoot()" size="small" @click="exportData()" plain>导出数据</el-button>
  <div style="float:right">
    <el-date-picker
      v-model="search_month"
      type="daterange"
      align="right"
      size="small"
      style="margin-right:5px;width: 200px;"
      start-placeholder="申请日期"
      end-placeholder="申请日期">
    </el-date-picker>
    <el-select style="width:150px;" v-model="search_info.status" size='small' clearable placeholder="请选择处理状态">
      <el-option
        v-for="item in search_status"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select style="width:150px;" v-model="search_info.is_agent" size='small' clearable placeholder="请选择用户类型">
      <el-option
        v-for="item in user_type"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-input
      placeholder="请输入操作人员登陆名称"
      style="width:200px;"
      size='small'
      v-model="search_info.op_user">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-input
      placeholder="请输入用户名"
      style="width:18%;"
      size='small'
      v-model="search_info.username">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-button size='small' @click="search()" type="primary" icon="el-icon-search">搜索</el-button>
  </div>
  <el-table :row-class-name="tableRowClassName" :show-overflow-tooltip="true" :data="tableData" height="calc(100% - 120px)">
    <el-table-column prop="username" label="用户" width="100"> </el-table-column>
    <el-table-column prop="money" label="提现金额" width="100"> </el-table-column>
    <el-table-column prop="apply_reason" label="提现理由"> </el-table-column>
    <el-table-column prop="alipay_account" label="支付宝账号"> </el-table-column>
    <el-table-column prop="cash_no" label="账单号"> </el-table-column>
    <el-table-column prop="alipay_no" label="支付宝转帐订单号"> </el-table-column>
    <el-table-column prop="remark" label="备注"> </el-table-column>
    <el-table-column prop="status" label="状态"> </el-table-column>
    <el-table-column prop="op_user" label="处理人"> </el-table-column>
    <el-table-column show-overflow-tooltip prop="create_time" label="提现时间"> </el-table-column>
    <el-table-column show-overflow-tooltip prop="update_time" label="处理时间"> </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button v-show="scope.row.status == '待处理'" @click="handleClick(scope.row)" type="text" size="small">处理</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    v-if="count !== 0"
    :current-page="pageNum"
    style="top:91%"
    layout="prev, pager, next"
    :page-size = "50"
    @prev-click="prev_page"
    @next-click="next_page"
    @current-change="handleCurrentChange"
    :total="count">
  </el-pagination>

  <el-dialog title="详细记录" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户" :label-width="formLabelWidth">
        <el-input disabled v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="提现金额" :label-width="formLabelWidth">
        <el-input disabled v-model="form.money" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="提现理由" :label-width="formLabelWidth">
        <el-input disabled v-model="form.apply_reason" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账号" :label-width="formLabelWidth">
        <el-input disabled v-model="form.alipay_account" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注" :label-width="formLabelWidth" :rules="[
        { required: true, message: '备注不能为空'}
      ]">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="status" label="处理结果" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="请选择处理结果">
          <el-option label="待处理" value="0"></el-option>
          <el-option label="同意" value="1"></el-option>
          <el-option label="拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button :disabled="clickOk" type="primary" @click="submit(form)">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      count: 0,
      pageNum: 1,
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      row_info: '',
      clickOk: false,
      search_status: [{
        value: '0',
        label: '待处理'
      }, {
        value: '1',
        label: '同意'
      }, {
        value: '2',
        label: '拒绝'
      }],
      user_type: [{
        value: '0',
        label: '普通会员'
      }, {
        value: '1',
        label: '代理商'
      }],
      search_info: {
        username: null,
        op_user: null,
        status: null,
        is_agent: null,
        create_time: {
          st: null,
          et: null
        }
      },
      search_month: ''
    }
  },

  created () {
    this.$store.commit('setCurrentNav', '订单管理>>提现处理')
    this.getData()
  },
  methods: {
    handleClick (row) {
      this.clickOk = false
      this.$api.post(this.$api.phpURL + 'order/CashOutAdmin/getOneInfo', {id: row.id}).then(res => {
        this.form = res.data
      })
      this.row_info = row
      this.dialogFormVisible = true
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.status === '同意') {
        return 'success-row'
      } else if (row.status === '拒绝') {
        return 'error-row'
      }
      return ''
    },
    getData () {
      this.$api.get(this.$api.phpURL + 'order/CashOutAdmin/getData').then(res => {
        this.tableData = res.data
        this.count = parseInt(res.count)
      })
    },
    prev_page () {
      this.$api.get(this.$api.phpURL + 'order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    next_page () {
      this.$api.get(this.$api.phpURL + 'order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    handleCurrentChange: function (currentPage) {
      this.pageNum = currentPage
      this.$api.get(this.$api.phpURL + 'order/CashOutAdmin/pageList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    submit (info) {
      this.clickOk = true
      if (info.remark == null) {
        this.$message.error('请填写备注')
        return false
      }
      this.$api.post(this.$api.phpURL + 'order/CashOutAdmin/handle', {info}).then(res => {
        this.dialogFormVisible = false
        this.row_info.status = this.dealStatus(this.form.status)
        // eslint-disable-next-line eqeqeq
        if (res.Code == 30000) {
          this.$message.error('支付宝信息填写错误')
        }
      })
    },
    search () {
      if (this.search_month && this.search_month.length === 2) {
        this.search_info.create_time.st = this.search_month[0]
        this.search_info.create_time.et = this.search_month[1]
      }
      this.$api.post(this.$api.phpURL + 'order/CashOutAdmin/search', {data: this.search_info}).then(res => {
        this.tableData = res.data
        this.count = parseInt(res.count)
      })
    },
    exportData () {
      if (this.search_month && this.search_month.length === 2) {
        this.search_info.create_time.st = this.search_month[0]
        this.search_info.create_time.et = this.search_month[1]
      }
      this.$api.getDownloadFile(this.$api.phpURL + 'order/CashOutAdmin/export', {data: this.search_info}, '提现处理.csv')
    },
    dealStatus (info) {
      switch (info) {
        case '0':
          info = '待处理'
          break
        case '1':
          info = '同意'
          break
        case '2':
          info = '拒绝'
          break
      }
      return info
    }
  }
}
</script>

<style>

  .el-table .success-row {
    background: #d7f8c5;
  }

  .el-table .error-row {
    background: #f1c6c6;
  }
</style>
