<template>
  <div class="wrapper">
    <card _Title="资金管理"/>

    <div class="box">
      <div class="mb_20 account-price">
        <span class="subTips">账户余额：</span>
        <span class="global_color mr_10" style="font-size:26px">￥{{ memberDeposit | unitPrice }}</span>
        <span class="subTips">冻结金额：</span>
        <span class="">￥{{ frozenDeposit | unitPrice }}</span>
      </div>
      <div class="account-btns">
        <Button type="primary" @click="recharge">在线充值</Button>
        <Button @click="withdrawalApply">申请提现</Button>
      </div>
    </div>
    <Modal v-model="modal" width="530">
      <p slot="header">
        <Icon type="edit"></Icon>
        <span>充值金额</span>
      </p>
      <div>
        <Form
          ref="formData"
          :label-width="100"
          :model="formData"
          :rules="formValidate"
          label-position="left"
        >
          <FormItem label="充值金额" prop="price">
            <Input v-model="formData.price" maxlength="9" number size="large"
            ><span slot="append">元</span></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" style="text-align: center">
        <Button size="large" type="success" @click="rechargePrice">充值</Button>
      </div>
    </Modal>
    <!-- 提现申请 -->
    <Modal v-model="withdrawApplyModal" width="530">
      <p slot="header">
        <Icon type="edit"></Icon>
        <span>提现金额</span>
      </p>
      <div>
        <Form
          ref="withdrawApplyFormData"
          :label-width="120"
          :model="withdrawApplyFormData"
          :rules="withdrawApplyFormValidate"
        >
          <FormItem label="提现类型" prop="type">
            <Select v-model="withdrawApplyFormData.type" disabled>
              <Option value="ALI">支付宝</Option>
              <Option value="WECHAT">微信</Option>
            </Select>
          </FormItem>
          <FormItem label="提现金额" prop="price">
            <Input
              v-model="withdrawApplyFormData.price"
              maxlength="9"
              number
              size="large"
            ><span slot="append">元</span></Input>
            <span style="color: red">最低提现金额 {{ withdrawApplyFormData.minPrice }}元</span>
          </FormItem>
          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="真实姓名" prop="realName">
            <Input
              v-model="withdrawApplyFormData.realName"
              maxlength="9"
              number
              size="large"
            ></Input>
          </FormItem>
          <FormItem v-if="withdrawApplyFormData.type === 'ALI'" label="第三方登录账号" prop="connectNumber">
            <Input
              v-model="withdrawApplyFormData.connectNumber"
              maxlength="9"
              number
              size="large"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" style="text-align: center">
        <Button size="large" type="success" @click="withdrawal">提现</Button>
      </div>
    </Modal>
    <!-- 余额日志 -->
    <Tabs value="log" @on-click="tabPaneChange">
      <TabPane label="余额日志" name="log">
        <Table :columns="logColumns" :data="logColumnsData.records"></Table>
        <!-- 分页 -->
        <div class="page-size">
          <Page
            :current="walletForm.pageNumber"
            :page-size="walletForm.pageSize"
            :page-size-opts="[10, 20, 50]"
            :total="logColumnsData.total"
            show-sizer
            show-total
            size="small"
            transfer
            @on-change="changePage"
            @on-page-size-change="changePageSize"
          ></Page>
        </div>
      </TabPane>
      <!-- 充值记录 -->
      <TabPane label="充值记录" name="recharge">
        <Table
          :columns="rechargeListColumns"
          :data="rechargeListData.records"
        ></Table>
        <!-- 分页 -->
        <div class="page-size">
          <Page
            :current="rechargeForm.pageNumber"
            :page-size="rechargeForm.pageSize"
            :page-size-opts="[10, 20, 50]"
            :total="rechargeListData.total"
            show-sizer
            show-total
            size="small"
            transfer
            @on-change="rechargeChangePage"
            @on-page-size-change="rechargeChangePageSize"
          ></Page>
        </div>
      </TabPane>

      <TabPane label="提现记录" name="withdrawApply">
        <Table
          :columns="withdrawApplyColumns"
          :data="withdrawApplyColumnsListData.records"
        ></Table>
        <!-- 分页 -->
        <div class="page-size">
          <Page
            :current="withdrawApplyForm.pageNumber"
            :page-size="withdrawApplyForm.pageSize"
            :page-size-opts="[10, 20, 50]"
            :total="withdrawApplyColumnsListData.total"
            show-sizer
            show-total
            size="small"
            transfer
            @on-change="withdrawChangePage"
            @on-page-size-change="withdrawChangePageSize"
          ></Page>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
import {withdrawalSettingVO} from "@/api/pay";

export default {
  name: 'MoneyManagement',
  data() {
    return {
      frozenDeposit: 0, // 冻结余额
      memberDeposit: 0, // 余额

      modal: false, // 余额充值
      withdrawApplyModal: false, // 提现申请
      formData: {
        // 充值金额
        price: 1
      },
      // 提现金额
      withdrawApplyFormData: {
        price: 1,
        minPrice: 1,
        type: '',
        realName: '',
        connectNumber: '',
      },
      // 余额日志
      walletForm: {
        // 搜索框初始化对象
        pageNumber: 1,
        pageSize: 10
      },
      // 充值记录
      rechargeForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      // 提现记录
      withdrawApplyForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      // 提现申请校验
      withdrawApplyFormValidate: {
        price: [
          {required: true, message: '请输入大于0小于9999的合法提现金额'},
          {
            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
            message: '请输入大于0小于9999的合法提现金额',
            trigger: 'change'
          }
        ],
        realName: [
          {required: true, message: '请输入真实姓名'},
        ],
        connectNumber: [
          {required: true, message: '请输入第三方登录账号'},
        ],
      },
      formValidate: {
        price: [
          {required: true, message: '请输入大于等于1小于9999的合法充值金额'},
          {
            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
            message: '请输入大于等于1小于9999的合法充值金额',
            trigger: 'change'
          }
        ]
      },
      // 余额日志
      logColumns: [
        {
          title: '时间',
          width: 190,
          key: 'createTime'
        },
        {
          title: '金额',
          key: 'money',
          width: 180,
          render: (h, params) => {
            if (params.row.money > 0) {
              return h('div', [
                h(
                  'span',
                  {
                    style: {
                      color: 'green'
                    }
                  },
                  this.$options.filters.unitPrice(params.row.money, '+ ¥')
                )
              ]);
            } else if (params.row.money < 0) {
              return h('div', [
                h(
                  'span',
                  {
                    style: {
                      color: 'red'
                    }
                  },
                  this.$options.filters.unitPrice(0 - params.row.money, '- ¥')
                )
              ]);
            }
          }
        },
        {
          title: '变动日志',
          key: 'detail'
        }
      ],
      logColumnsData: {}, // 余额日志
      // 充值记录
      rechargeListColumns: [
        {
          title: '充值时间',
          key: 'createTime',
          width: 168
        },
        {
          title: '支付单号',
          key: 'rechargeSn',
          width: 200
        },
        {
          title: '充值金额',
          key: 'rechargeMoney',
          render: (h, params) => {
            if (params.row.payStatus === 'PAID') {
              return h('div', [h('span', {
                style: {
                  color: 'green'
                }
              }, this.$options.filters.unitPrice(params.row.rechargeMoney, '+ ¥'))]);
            } else {
              return h('div', [h('span', this.$options.filters.unitPrice(params.row.rechargeMoney, '¥'))]);
            }
          }
        },
        {
          title: '支付状态',
          key: 'payStatus',
          render: (h, params) => {
            if (params.row.payStatus === 'PAID') {
              return h('div', [h('span', {}, '已付款')]);
            } else if (params.row.payStatus === 'UNPAID') {
              return h('div', [h('span', {}, '未付款')]);
            } else if (params.row.payStatus === 'CANCEL') {
              return h('div', [h('span', {}, '已取消')]);
            }
          }
        },
        {
          title: '支付方式',
          key: 'rechargeWay',
          render: (h, params) => {
            if (params.row.rechargeWay === 'ALIPAY') {
              return h('div', [h('span', {}, '支付宝')]);
            } else if (params.row.rechargeWay === 'WECHAT') {
              return h('div', [h('span', {}, '微信')]);
            } else if (params.row.rechargeWay === 'BANK_TRANSFER') {
              return h('div', [h('span', {}, '线下转账')]);
            } else {
              return h('div', [h('span', {}, '')]);
            }
          }
        },
        {
          title: '支付时间',
          key: 'payTime',
          width: 180
        }
      ],
      rechargeListData: {}, // 充值记录数据
      // 提现记录
      withdrawApplyColumns: [
        {
          title: '申请时间',
          key: 'createTime',
          width: 168
        },
        {
          title: '提现单号',
          key: 'sn',
          width: 200
        },
        {
          title: '提现金额',
          key: 'applyMoney',
          width: 110,
          render: (h, params) => {
            if (params.row.applyStatus === 'VIA_AUDITING') {
              return h('div', [h('span', {
                style: {
                  color: 'green'
                }
              }, this.$options.filters.unitPrice(params.row.applyMoney, '+ ¥'))]);
            } else {
              return h('div', [h('span', this.$options.filters.unitPrice(params.row.applyMoney, '¥'))]);
            }
          }
        },
        {
          title: '提现状态',
          key: 'applyStatus',
          width: 95,
          render: (h, params) => {
            if (params.row.applyStatus === 'APPLY') {
              return h('div', [h('span', {}, '申请中')]);
            } else if (params.row.applyStatus === 'VIA_AUDITING') {
              return h('div', [h('span', {}, '提现成功')]);
            } else if (params.row.applyStatus === 'ERROR') {
              return h('div', [h('span', {}, '提现失败')]);
            } else {
              return h('div', [h('span', {}, '审核拒绝')]);
            }
          }
        },
        {
          title: '审核时间',
          key: 'inspectTime',
          width: 168
        },
        {
          title: '审核备注',
          key: 'inspectRemark',
          tooltip: true

        }
      ],
      withdrawApplyColumnsListData: {} // 提现记录
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      getMembersWallet().then((res) => {
        this.frozenDeposit = res.result.memberFrozenWallet;
        this.memberDeposit = res.result.memberWallet;
      });
      getDepositLog(this.walletForm).then((res) => {
        if (res.message === 'success') {
          this.logColumnsData = res.result;
        }
      });
    },
    tabPaneChange(v) {
      // 如果查询充值记录
      if (v === 'recharge') {
        this.getRechargeData();
      }
      // 如果是余额日志
      if (v === 'log') {
        this.init();
      }
      // 如果是提现记录
      if (v === 'withdrawApply') {
        this.getWithdrawApplyData();
      }
    },
    // 充值记录
    getRechargeData() {
      getRecharge(this.rechargeForm).then((res) => {
        if (res.message === 'success') {
          this.rechargeListData = res.result;
        }
      });
    },
    // 提现记录
    getWithdrawApplyData() {
      getWithdrawApply(this.withdrawApplyForm).then((res) => {
        if (res.message === 'success') {
          this.withdrawApplyColumnsListData = res.result;
        }
      });
    },
    // 余额日志
    changePage(v) {
      this.walletForm.pageNumber = v;
      this.init();
    },
    changePageSize(v) {
      this.walletForm.pageNumber = 1;
      this.walletForm.pageSize = v;
      this.init();
    },
    // 充值记录
    rechargeChangePage(v) {
      this.rechargeForm.pageNumber = v;
      this.getRechargeData();
    },
    rechargeChangePageSize(v) {
      this.rechargeForm.pageNumber = 1;
      this.rechargeForm.pageSize = v;
      this.getRechargeData();
    },
    // 提现记录
    withdrawChangePage(v) {
      this.withdrawApplyForm.pageNumber = v;
      this.getWithdrawApplyData();
    },
    withdrawChangePageSize(v) {
      this.withdrawApplyForm.pageNumber = 1;
      this.withdrawApplyForm.pageSize = v;
      this.getWithdrawApplyData();
    },
    // 弹出在线充值框
    recharge() {
      this.formData.price = 1;
      this.modal = true;
    },
    // 在线充值
    rechargePrice() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          recharge(this.formData).then((res) => {
            if (res.message === 'success') {
              this.$router.push({
                path: '/payment',
                query: {orderType: 'RECHARGE', sn: res.result.rechargeSn}
              });
            }
          });
        }
      });
    },
    // 申请提现弹出框
    withdrawalApply() {
      this.withdrawApplyModal = true;
      this.withdrawApplyFormData.minPrice = 1;
      this.withdrawApplyFormData.price = 1;
      this.withdrawApplyFormData.type = '';
      this.withdrawApplyFormData.realName = '';
      this.withdrawApplyFormData.connectNumber = '';
      withdrawalSettingVO().then((res) => {
        if (res.code === 200) {
          this.withdrawApplyFormData.minPrice = res.result.minPrice;
          this.withdrawApplyFormData.type = res.result.type;
          this.withdrawApplyFormData.price = 1;
        }
      });
    },
    // 提现
    withdrawal() {
      this.$refs['withdrawApplyFormData'].validate((valid) => {
        if (valid) {
          withdrawalApply(this.withdrawApplyFormData).then((res) => {
            if (res && res.success) {
              this.$Message.success('提现申请成功，关注提现状态');
              this.withdrawApplyModal = false;
              this.init(); // 余额查询
              this.getWithdrawApplyData(); // 提现记录
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 0;
}

.page-size {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.account-price {
  font-weight: bold;
}

.subTips {
  margin-left: 10px;
}

.account-btns {
  margin: 10px 0;
}

.ivu-btn {
  margin: 0 4px;
}

</style>
