<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="15"
        ><div class="grid-content bg-purple">
          <div class="userInfo">
            <div class="userInfo">
              <el-avatar
                :size="60"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <span class="userName">用户名：{{ userInfo.userName }}</span>
            </div>
            <div>
              <el-button
                @click="$router.push({ name: 'bank-card-index' })"
                type="primary"
                round
                >绑定银行卡</el-button
              >
              <el-button @click="addWithdrawal" type="primary" round
                >发起提现</el-button
              >
            </div>
          </div>
          <div class="userInfo">
            <el-card class="box-card">
              <div style="font-size: 18px; font-weight: 600">可用金额</div>
              <div style="margin-top: 20px; font-size: 18px">
                ￥{{
                  userInfo.availableAmount ? userInfo.availableAmount : "0"
                }}
              </div>
              <div class="userTime">{{ userInfo.updateTime }}</div>
            </el-card>
            <el-card class="box-card">
              <div style="font-size: 18px; font-weight: 600">冻结金额</div>
              <div style="margin-top: 20px; font-size: 18px">
                ￥{{ userInfo.freezeAmount ? userInfo.freezeAmount : "0" }}
              </div>
              <div class="userTime">{{ userInfo.updateTime }}</div>
            </el-card>
          </div>
          <div style="margin: 10px">
            <div style="font-size: 16px; margin: 0 0 20px 0; font-weight: 600">
              钱包提现记录
            </div>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="申请状态">
                <el-select
                  style="width: 140px"
                  size="mini"
                  v-model="formInline.cashOutStatus"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in [
                      {
                        label: '审核中',
                        value: '1',
                      },
                      {
                        label: '审核不通过',
                        value: '2',
                      },
                      {
                        label: '审核成功',
                        value: '3',
                      },
                      {
                        label: '提现中',
                        value: '4',
                      },
                      {
                        label: '提现失败',
                        value: '5',
                      },
                      {
                        label: '提现成功',
                        value: '6',
                      },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请时间">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  style="width: 260px"
                  @change="changeTime"
                  v-model="value1"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="getWithdrawalRecord"
                  >查询</el-button
                >
                <el-button size="mini" type="primary" @click="Reset"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
            <div>
              <el-table
                border
                height="47vh"
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column
                  align="center"
                  prop="cashOutOrderNumber"
                  label="提现申请订单号"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="cashOutAmount"
                  label="提现申请金额"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="cashOutStatus"
                  label="申请状态"
                >
                  <template slot-scope="scope">
                    <span>{{ getStatus(scope.row.cashOutStatus) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="cashOutTime"
                  label="提现申请时间"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="remark"
                  label="审核原因"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="tradeReceivedTime"
                  label="交易到账时间"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pagination-container">
            <el-pagination
              :current-page="query.pageNumber"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="query.pageSize"
              :total="total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="9"
        ><div class="grid-content bg-purple">
          <div style="margin: 9px 0">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="订单时间">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  style="width: 260px"
                  @change="changeTimeTwo"
                  v-model="value2"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" @click="init"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-card class="box-cardTwo">
            <div class="cardTwo-item">
              <div>
                <div style="font-size: 18px; font-weight: 600">总收入</div>
                <div style="margin-top: 20px; font-size: 18px">
                  ￥{{ TotalData.totalIncome ? TotalData.totalIncome : "0" }}
                </div>
              </div>
              <div>
                <div style="font-size: 18px; font-weight: 600">总支出</div>
                <div style="margin-top: 20px; font-size: 18px">
                  ￥{{
                    TotalData.totalExpenditure
                      ? TotalData.totalExpenditure
                      : "0"
                  }}
                </div>
              </div>
            </div>
          </el-card>
          <div style="margin: 10px 0">
            <div style="font-size: 16px; margin: 0 0 20px 0; font-weight: 600">
              钱包账单
            </div>
            <div
              style="
                background: #fff;
                padding: 10px;
                height: 51vh;
                min-width: 400px;
                overflow-y: scroll;
              "
            >
              <div
                v-for="item in billList"
                :key="item.id"
                style="
                  min-width: 380px;
                  background: #f1f8fe;
                  padding: 10px;
                  border-radius: 10px;
                  margin-bottom: 10px;
                "
              >
                <div style="font-size: 18px">{{ item.billOrderTime }}</div>
                <div class="wallet-item">
                  <div>订单号：{{ item.billOrderNumber }}</div>
                  <div>订单状态：{{ getBillStatus(item.billStatus) }}</div>
                </div>
                <div class="wallet-item">
                  <div>{{ item.billTypeName }}：{{ item.billAmount }}</div>
                  <div>余额：{{ item.amountAfterChange }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination-container">
            <el-pagination
              :current-page="form.pageNumber"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="form.pageSize"
              :total="totalTwo"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChangeTwo"
              @current-change="handleCurrentChangeTwo"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 提现 -->
    <withdrawal
      @init="init"
      @getWithdrawalRecord="getWithdrawalRecord"
      ref="withdrawal"
    ></withdrawal>
  </div>
</template>

<script>
import withdrawal from "./popup/withdrawal";
export default {
  components: { withdrawal },
  data() {
    return {
      value2: [],
      value1: [],
      userInfo: {},
      tableData: [],
      TotalData: {},
      billList: [],
      query: {
        pageNumber: 1,
        pageSize: 10,
      },
      formInline: {
        cashOutStatus: "",
        startCashOutTime: "",
        endCashOutTime: "",
      },
      form: {
        pageNumber: 1,
        pageSize: 10,
      },
      formTimeData: {},
      total: 0,
      totalTwo: 0,
    };
  },
  created() {
    this.init();
    this.getWithdrawalRecord();
  },
  methods: {
    init() {
      console.log("1213");
      this.$api.wallet.myWallet().then((res) => {
        this.userInfo = res.data.data;
      });
      this.$api.wallet
        .totalAmount({ amountChangeType: "", ...this.formTimeData })
        .then((res) => {
          this.TotalData = res.data.data;
        });
      this.$api.wallet
        .getBankInfo({ ...this.form, ...this.formTimeData })
        .then((res) => {
          console.log(res, "bull");
          this.billList = res.data.data.data;
          this.totalTwo = Number(res.data.data.total);
        });
    },
    getWithdrawalRecord() {
      this.$api.wallet
        .WithdrawalRecord({ ...this.query, ...this.formInline })
        .then((res) => {
          this.tableData = res.data.data.data;
          this.total = Number(res.data.data.total);
        });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getWithdrawalRecord();
    },
    handleCurrentChange(val) {
      this.query.pageNumber = val;
      this.getWithdrawalRecord();
    },
    handleSizeChangeTwo(val) {
      this.form.pageSize = val;
      this.init();
    },
    handleCurrentChangeTwo(val) {
      this.form.pageNumber = val;
      this.init();
    },
    Reset() {
      this.value1 = [];
      this.formInline = {};
      this.getWithdrawalRecord();
    },
    addWithdrawal() {
      this.$api.mer_admin
        .bankCardPage({
          pageNumber: 1,
          pageSize: 10,
          linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
            ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
            : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
          status: "1",
        })
        .then((res) => {
          if (res.data.data.data.length > 0) {
            this.$refs.withdrawal.toggle().add(this.userInfo.availableAmount);
          } else {
            this.$message.error("请先绑定银行卡");
          }
        })
        .catch((err) => {
          this.$message.error("获取银行卡失败");
        });
    },
    getStatus(row) {
      if (row == 1) {
        return "审核中";
      } else if (row == 2) {
        return "审核不通过";
      } else if (row == 3) {
        return "审核成功";
      } else if (row == 4) {
        return "提现中";
      } else if (row == 5) {
        return "提现失败";
      } else if (row == 6) {
        return "提现成功";
      }
    },
    changeTime(e) {
      if (e) {
        this.formInline.startCashOutTime = e[0];
        this.formInline.endCashOutTime = e[1];
      } else {
        this.formInline.startCashOutTime = "";
        this.formInline.endCashOutTime = "";
      }
    },
    changeTimeTwo(e) {
      if (e) {
        this.formTimeData.startBillOrderTime = e[0];
        this.formTimeData.endBillOrderTime = e[1];
      } else {
        this.formTimeData.startBillOrderTime = "";
        this.formTimeData.endBillOrderTime = "";
      }
    },
    getBillStatus(row) {
      if (row == 1) {
        return "待同步";
      } else if (row == 2) {
        return "同步中";
      } else if (row == 3) {
        return "同步成功";
      } else if (row == 4) {
        return "同步失败";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #f1f8fe;
}
.grid-content {
  border-radius: 4px;
  padding: 20px;
  height: 85vh;
  overflow: auto;
}
.userInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.userName {
  margin-left: 30px;
  font-size: 16px;
  color: #303e9f;
}
.box-card {
  margin: 20px;
  width: 50%;
  height: 200px;
  border-radius: 10px;
  position: relative;
}
.userTime {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 16px;
}
.box-cardTwo {
  margin-bottom: 30px;
  height: 200px;
  border-radius: 10px;
}
.cardTwo-item {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.wallet-item {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
</style>
