<template>
  <div class="putForward">
    <el-form :model="search" class="demo-form-inline" inline label-width="80px">
      <el-form-item label="提现单号">
        <el-input v-model="search.withdraw_no" placeholder="提现单号"></el-input>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input v-model="search.out_trade_no" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="search.user_id" placeholder="用户ID"></el-input>
      </el-form-item>
      <el-form-item label="提现金额">
        <el-input v-model="search.money" placeholder="提现金额"></el-input>
      </el-form-item>
      <el-form-item label="提现时间">
        <el-date-picker
          type="datetimerange"
          v-model="search.payTime"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="" v-if="$store.state.import">
        <el-upload
          :show-file-list="false"
          :onSuccess="fileSuccess"
          :headers="uploadHeader"
          :data="{param_token:param_token}"
          action="/api/admin/pay/users/import ">
          <el-button type="primary" plain>批量提现</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="exportTable" v-if="$store.state.export">导出</el-button>
        <el-button type="primary" v-if="$store.state.import" @click="manualPutForward">手动提现</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="search.status" type="card" style="background: white;padding-top: 10px" @tab-click="onSearch">
      <el-tab-pane label="提现成功" name="1"/>
      <el-tab-pane label="申请中" name="0"/>
      <el-tab-pane label="申请失败" name="2"/>
      <el-tab-pane label="全部" name="-1"/>
    </el-tabs>
    <el-table
      :data="tableData"
      border fixed
      style="width: 100%">
      <el-table-column
        prop="withdraw_no"
        label="提现单号"
      >
      </el-table-column>
      <el-table-column
        prop="out_trade_no"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        label="用户"
        width="200"
        className="f-c"
      >
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column
        prop="user_mobile"
        label="手机号"
      >
      </el-table-column>
      <el-table-column
        label="提现金额"
      >
        <template slot-scope="scope">
          {{ scope.row.money | moneyYuan}}
        </template>
      </el-table-column>
      <el-table-column
        label="提现状态">
        <template slot-scope="scope">
                    <span :class="{status:true,red:scope.row.status === 2,green:scope.row.status === 1}">
                    {{ scope.row | filterStatus}}
                    </span>
        </template>
      </el-table-column>
      <el-table-column
        label="提现成功时间"
      >
        <template slot-scope="scope">
          {{ scope.row.success_at }}
        </template>
      </el-table-column>
      <el-table-column
        label="提现时间">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="reason"
        label="失败原因"
      >
      </el-table-column> -->
      <el-table-column
        prop="desc"
        label="备注"
      >
      </el-table-column>
      <el-table-column
        label="操作" fixed="right"
        v-if="!$store.state.readonly">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 0"
            @click="checkMoney(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            审核
          </el-button>
          <el-button
            @click="addDesc(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            添加备注
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog :title="dialogTitle" v-if="showDialog" :visible.sync="showDialog">
      <el-form ref="saveuser" :model="nowObj" label-width="70px">
        <el-form-item label="订单状态" v-if="!showDesc">
          <template>
            <el-radio-group v-model="nowObj.status">
              <el-radio :label="1">提现成功</el-radio>
              <el-radio :label="2">提现失败</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="失败理由" v-if="nowObj.status === 2 &&  !showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.reason" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" v-if="showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.desc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSave(showDesc)">保 存</el-button>
        <el-button @click="showDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="手动提现" v-if="putForwardDialog.show" :visible.sync="putForwardDialog.show">
      <el-form :model="putForwardDialog" :rules="rules" ref="refPutForward" label-width="80px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="用户" prop="userLabel">
              <el-input readonly v-model="putForwardDialog.userLabel" placeholder="请选择用户"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button style="float: right" type="primary" @click="userDialog.show = true">选择用户</el-button>
          </el-col>
        </el-row>

        <el-form-item label="提现金额" prop="money">
          <el-input-number :min="0" v-model="putForwardDialog.money" placeholder="提现金额"></el-input-number>
        </el-form-item>
        <el-form-item label="提现说明" prop="desc">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="putForwardDialog.desc">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putForwardDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="confirmPutForward">确 定</el-button>
      </span>
      <el-dialog :modal="false" :visible.sync="userDialog.show">
        <el-form label-width="90px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="ID">
                <el-input v-model="searchFrom.userId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="昵称">
                <el-input v-model="searchFrom.nickName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="searchFrom.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item>
                <el-button style="float: right" type="primary" plain @click="getUserList">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="userList"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
        </el-table>
        <page :total="userDialog.total" :limit="userDialog.limit" @pageChange="onUserPageChange" @sizeChange="onUserSizeChange"/>
        <span slot="footer" class="dialog-footer">
        <el-button @click="userDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getWithdrawListApi,
    editOrderDescApi,
    withdrawApi,
    exportExcelApi,
    getUserListApi,
    payToUserApi
  } from "../../service/api";
  import Cookie from '../../util/cookie'
  import page from '../framework/page'
  import CommonJs from '../../util/common';
  import md5 from 'js-md5';

  let singjson = {
    sing: "singsingenglish21000"
  };
  export default {
    name: "putForward",
    data() {
      return {
        today: {
          text: '今天',
          onClick: (vm) => {
            vm.$emit('pick', [this.formatTime(new Date()) + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59'])
          }
        },
        yesterday: {
          text: '昨天',
          onClick: (vm) => {
            let preDate = this.formatTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
            vm.$emit('pick', [preDate + ' 00:00:00', preDate + ' 23:59:59'])
          }
        },
        last30Day: {
          text: '过去30天',
          onClick: (vm) => {
            let preDate = this.formatTime(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000));
            vm.$emit('pick', [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59']);
          }
        },
        last7Day: {
          text: '过去7天',
          onClick: (vm) => {
            let preDate = this.formatTime(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000));
            vm.$emit('pick', [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59']);
          }
        },
        uploadHeader: {token: Cookie.get('cc_token')},
        param_token: CommonJs.md5Code(),
        nowPage: 1,
        total: 0,
        limit: 10,
        search: {
          key: '',
          status: '1',
          payTime: []
        },
        liStatus: [
          {
            label: '全部',
            status: ''
          },
          {
            label: '申请中',
            status: 0
          }, {
            label: '提现成功',
            status: 1
          }, {
            label: '提现失败',
            status: 2
          }
        ],
        tableData: [],
        showDialog: false,
        showDesc: false,
        dialogTitle: '审核',
        nowObj: {
          id: '',
          status: 1,
          reason: '',
          desc: ""
        },
        page: {
          current: 1,
          pageSize: 100,
          total: 0
        },
        putForwardDialog: {
          show: false,
          user_id: '',
          userLabel: '',
          money: 0,
          desc: ''
        },
        userList: [],
        rules: {
          userLabel: [
            {required: true, message: '请选择用户', trigger: 'change'}
          ],
          money: [
            {required: true, message: '请输入提现金额', trigger: 'change'}
          ],
          desc: [
            {required: true, message: '请输入提现说明', trigger: 'change'}
          ]
        },
        searchFrom: {},
        selectUserList: [],
        userDialog: {
          show: false,
          nowPage: 1,
          total: 0,
          limit: 5
        }
      }
    },
    components: {
      page
    },
    filters: {
      moneyYuan: function (value) {
        if (!value) {
          return 0 + '元';
        }
        return value = (value / 100).toFixed(2) + '元';
      },
      filterStatus: function (value) {
        let msg = '';
        if (value.status === 0) {
          msg = '审核中'
        } else if (value.status === 1) {
          msg = '提现成功'
        } else if (value.status === 2) {
          msg = '提现失败' + '(' + value.reason + ")"
        }
        return msg;
      },
      userLabel: function (val) {
        return `${val.nickname}[${val.user_id}]`
      }
    },
    mounted: function () {
      this.getList()
    },
    methods: {
      fileSuccess() {
        this.$message({
          message: '提交成功，请稍后刷新',
          type: 'success'
        });
      },
      formatTime(date) {
        let year = date.getFullYear();
        let Month = date.getMonth() + 1;
        if (Month < 10) {
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if (Day < 10) Day = `0${Day}`;
        return `${year}-${Month}-${Day}`;
      },
      onSizeChange(val) {
        this.nowPage = 1;
        this.limit = val;
        this.getList()
      },
      exportTable() {
        let json = {};
        if (this.search.withdraw_no) {
          json.withdraw_no = this.search.withdraw_no
        }
        if (this.search.out_trade_no) {
          json.out_trade_no = this.search.out_trade_no
        }
        if (this.search.status || this.search.status === 0) {
          json.status = this.search.status
        }
        if (this.search.user_id) {
          json.user_id = this.search.user_id
        }
        if (this.search.money) {
          json.money = parseFloat(this.search.money) * 100
        }
        exportExcelApi('/api/admin/withdraw/export', json, '提现列表')
      },
      //获取列表
      getList: function () {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if (this.search.withdraw_no) {
          json.withdraw_no = this.search.withdraw_no
        }
        if (this.search.out_trade_no) {
          json.out_trade_no = this.search.out_trade_no
        }
        if (this.search.status && this.search.status !== '-1') {
          json.status = this.search.status
        }
        if (this.search.user_id) {
          json.user_id = this.search.user_id
        }
        if (this.search.payTime && this.search.payTime.length > 0) {
          json.success_start_at = this.search.payTime[0]
          json.success_end_at = this.search.payTime[1]
        }
        // if(this.search.success_start_at){
        //   json.success_start_at = this.search.success_start_at
        // }
        // if(this.search.success_end_at){
        //   json.success_end_at = this.search.success_end_at
        // }
        if (this.search.money) {
          json.money = parseFloat(this.search.money) * 100
        }
        getWithdrawListApi(json).then(res => {
          this.tableData = res.list;
          this.total = res.total;
        })
      },
      // 查询按钮
      onSearch() {
        this.nowPage = 1;
        //调用查询接口
        this.getList();
      },
      //点击审核
      checkMoney(id) {
        this.nowObj.id = id;
        this.showDesc = false;
        this.showDialog = true;

      },
      //点击备注
      addDesc(id, desc) {
        this.nowObj.id = id;
        this.nowObj.desc = desc;
        this.showDesc = true;
        this.showDialog = true;
      },
      //分页切换
      onPageChange(current) {
        this.nowPage = current;
        this.page.current = current;
        this.getList();
      },
      // 弹框请求回调
      doCallback: function () {
        this.nowObj.id = '';
        this.nowObj.status = 1;
        this.nowObj.reason = '';
        this.nowObj.desc = '';
        this.page.current = 1;
        this.showDialog = false;
        this.getList();
        this.$message({
          message: '提交成功',
          type: 'success'
        });
      },
      // 弹框保存按钮
      onSave: function (desc) {
        // 添加备注
        if (desc) {
          let data = {
            desc: this.nowObj.desc,
          };
          if (data.desc === '' || data.desc == null) {
            this.$message.error('请填写备注');
            return false
          }
          editOrderDescApi(this.nowObj.id, 'withdraw', data).then(res => {
            this.doCallback()
          });
          // 审核
        } else {
          let data = {
            reason: this.nowObj.reason,
            status: this.nowObj.status,
          };
          if ((data.reason === '' || data.reason == null) && data.status === 2) {
            this.$message.error('请填写失败理由');
            return false
          } else {
            data.reason = '';
          }
          withdrawApi(this.nowObj.id, data).then(res => {
            this.doCallback()
          })
        }
      },
      manualPutForward() {
        this.putForwardDialog.show = true;
        this.putForwardDialog.user_id = '';
        this.putForwardDialog.userLabel = '';
        this.putForwardDialog.money = 0;
        this.putForwardDialog.desc = '';
        this.getUserList();
      },
      getUserList() {
        let json = {
          limit: this.userDialog.limit,
          page: this.userDialog.nowPage
        }
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getUserListApi(json).then(res => {
          this.userList = res.list;
          this.userDialog.total = res.total;
        })
      },
      confirmPutForward() {
        let json = {
          user_id: this.putForwardDialog.user_id,
          money: this.putForwardDialog.money,
          desc: this.putForwardDialog.desc
        }
        this.$refs["refPutForward"].validate((valid) => {
          if (valid) {
            this.$confirm('确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              payToUserApi(json).then(res => {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                });
                this.getList();
                this.putForwardDialog.show = false;
              });
            });
          } else {
            return false;
          }
        });
      },
      handleSelectionChange(a) {
        this.selectUserList = a
      },
      onUserPageChange(val) {
        this.userDialog.nowPage = val
        this.getUserList()
      },
      onUserSizeChange(val) {
        this.userDialog.limit = val
        this.userDialog.nowPage = 1;
        this.getUserList()
      },
      onAdd() {
        if (this.selectUserList.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择用户!'
          });
          return
        } else if (this.selectUserList.length !== 1) {
          this.$message({
            type: 'error',
            message: '只能选择一个用户!'
          });
          return
        }
        this.putForwardDialog.userLabel = `${this.selectUserList[0].nickname}[${this.selectUserList[0].user_id}]`
        this.putForwardDialog.user_id = this.selectUserList[0].user_id
        this.userDialog.show = false
      },
    }
  }
</script>

<style scoped>
  .putForward {
    padding: 20px 0;
  }

  .status {
    color: #e9a038;
  }

  .status.red {
    color: #c30005;
  }

  .status.green {
    color: #00ac00;
  }

  .avatar {
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
    height: 50px;
  }
</style>
<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>