<template>
  <div class="finance_page">
    <!-- 顶部卡片 -->
    <div class="topCard">
      <el-card class="topCard">
        <div slot="header" class="clearfix">
          <span class="leftText">财务数据</span>
          <span class="leftTip">所有交易成功的金额，微信侧将收取6‰的交易手续费</span>
          <el-button class="rightBtn" type="primary" @click="handleWithdrawal">提现</el-button>
        </div>
        <div>
          <div style="font-size: 18px;font-weight: bold;">基本数据</div>
          <div style="display: flex;justify-content: space-around;align-items: center;text-align: center;">
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.turnover || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">累计营业额（元）</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.frozenMoney || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">冻结金额（元）</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.withdrawableMoney || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">可提现金额（元）</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.withdrawableStayMoney || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">提现中（元）</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.presenterVoucher || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">赠送代金券</div>
            </div>
          </div>
        </div>
        <div>
          <div class="correlation" style="font-size: 18px;font-weight: bold;">
            <span>消费金相关</span>
            <el-tooltip placement="top" effect="light">
              <div slot="content" style="font-size: 18px;">
                消费金说明：<br />
                消费金提现比例：{{ financialData.beeCoinRatio * 100 }}%<br />
                可提现：客户已支付已核销订单的消费金可提现金额（按照提现比例折算）；<br />
                待到账冻结：客户已支付未核销订单的消费金支付金额；<br /></div>
              <div class="icon">
                <i class="el-icon-warning-outline" :size="34"></i>
              </div>
            </el-tooltip>
          </div>
          <div style="display: flex;justify-content: space-around;align-items: center;text-align: center;">
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.beeTurnover || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">营业额</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.beeWithdrawal || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">可提现</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.beeFreeze || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">待到账冻结</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.withdrawn || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">已提现</div>
            </div>
            <div style="padding: 16px;">
              <div style="font-size: 30px;font-weight: bold;color: #ffae11;margin-bottom: 20px;">
                {{ financialData.withdrawalIn || '0' }}
              </div>
              <div style="font-size: 16px;color: #333333;">提现中</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 选项卡 -->
    <div class="cardList">
      <div class="rightSearch">
        <el-date-picker v-model="formInline.time" type="month" placeholder="选择日期" value-format="yyyy-MM"
          @change="getList()" />
      </div>
      <el-tabs v-model="formInline.condition" @tab-click="getList()">
        <el-tab-pane label="日汇款" name="1" />
        <el-tab-pane label="月汇款" name="2" />
        <!-- <el-tab-pane label="交易金流水" name="3" /> -->
      </el-tabs>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table ref="multipleTable" :data="financialData.finances" border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="日期" width="220">
            <template slot-scope="scope">{{ scope.row.time }}</template>
          </el-table-column>
          <el-table-column prop="income" label="收入（元）" width="220" />
          <el-table-column prop="expenditure" label="支出（元）" show-overflow-tooltip />
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="btnList">
                <el-button type="text" @click="seeMore(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="提现" :visible.sync="isVisible" width="50%">
      <el-form v-if="show" ref="formData" :model="formData" label-width="120px" size="small" :rules="rules">
        <p class="text_tip">
          <span>提现至：</span>
          <span v-if="Number(privacyTime) === 0">
            {{ bankDetails.bankCard && bankDetails.bankCard.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "$1 **** **** $2") }}
          </span>
          <span v-else>{{ bankDetails.bankCard }}</span>
          <span style="margin-left: 40px;">{{ bankDetails.bankName }}</span>
        </p>
        <el-form-item label="提现类型" prop="withdrawalType">
          <el-radio-group v-model="formData.withdrawalType">
            <el-radio :label="1">正常支付订单</el-radio>
            <el-radio :label="2">交易金</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提现金额" prop="withdrawalMoney">
          <el-col :span="16">
            <el-input v-model="formData.withdrawalMoney" maxlength="9"
              :placeholder="`可提现金额：${formData.withdrawalType === 1 ? financialData.withdrawableMoney : formData.withdrawalType === 2 ? financialData.beeWithdrawal : '--'}`" />
          </el-col>
          <el-col :span="6" style="text-align:center">
            <span class="sub_text" @click="getAllwithdrawalAmount">全部提现</span>
          </el-col>
        </el-form-item>
      </el-form>
      <p v-else class="tips">您的账户尚未绑定银行卡，无法提现</p>
      <p slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm()">确定</el-button>
        <el-button @click="isVisible = false">取消</el-button>
      </p>
    </el-dialog>

    <el-dialog title="账单详情" :visible.sync="moneydio" width="80%">
      <div class="content">
        <div class="toolbar">
          <el-form inline :model="moneyForm">
            <el-form-item label="汇总日期时间">
              <el-date-picker v-model="moneyForm.time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="收支类型">
              <el-select v-model="moneyForm.income" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option label="收入" value="1" />
                <el-option label="支出" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="流水类型">
              <el-select v-model="moneyForm.state" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option label="支付" value="支付" />
                <el-option label="退款" value="退款" />
                <el-option label="提现" value="提现" />
              </el-select>
            </el-form-item>
            <el-form-item label-width="0">
              <el-button type="primary" plain @click="getInfo">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="content_table">
          <div class="table">
            <el-table :data="tableDatas" border :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
              style="width: 100%">
              >
              <el-table-column prop="waterType" label="流水类型" />
              <el-table-column prop="orderFormid" label="订单ID" />
              <el-table-column prop="incomeType" label="收支类型" />
              <el-table-column prop="money" label="金额(元)" />
              <el-table-column prop="balance" label="余额(元)" />
              <el-table-column prop="time" label="入账时间" />
            </el-table>
            <div class="fenye">
              <el-pagination :current-page="moneyForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="(val) => ((moneyForm.pageSize = val) && getInfo())"
                @current-change="(val) => ((moneyForm.page = val) && getInfo())" />
            </div>
          </div>
        </div>
      </div>
      <p slot="footer" class="dialog-footer">
        <el-button type="primary" @click="moneydio = false">确定</el-button>
      </p>
    </el-dialog>
  </div>
</template>

<script>
import {
  getFinanceCount,
  getBank,
  withdrawal,
  getDetails
} from '@/api/finance'
export default {
  name: 'List',
  data() {
    return {
      moneydio: false,
      financialData: {
        finances: [],
        turnover: 0,
        frozenMoney: 0,
        withdrawableMoney: 0,
        withdrawableStayMoney: 0,
        presenterVoucher: 0,
        beeTurnover: 0,
        beeWithdrawal: 0,
        beeFreeze: 0,
        withdrawn: 0,
        withdrawalIn: 0
      },
      formData: {
        withdrawalType: 1,
        withdrawalMoney: ''
      },
      moneyForm: {
        time: '',
        income: '',
        state: '',
        page: 1,
        pageSize: 10
      },
      total: 1,
      rules: {
        withdrawalType: [{ required: true, message: '请选择提现类型', trigger: 'blur' }],
        withdrawalMoney: [{ required: true, message: '请输入提现金额', trigger: 'blur' }]
      },
      formInline: {
        condition: '1', // 时间条件 1-日汇总 2-月汇总
        time: '' // 时间值
      },
      tableDatas: [],
      isVisible: false,
      bankDetails: {},
      show: false,
      privacyTime: 0
    }
  },
  created() {
    this.privacyTime = localStorage.getItem('privacyTime')
    this.getList()
  },
  methods: {
    seeMore(row) {
      this.moneydio = true
      this.moneyForm.time = row.time
      this.moneyForm.page = 1
      this.total = 1
      this.tableDatas = []
      this.getInfo()
    },
    // 提现
    async handleWithdrawal() {
      this.isVisible = true
      this.formData.withdrawalMoney = ''
      // const res = await getWithdrawalDetails(this.formInline);
      const res = await getBank({})
      if (JSON.stringify(res.data) === '{}') {
        this.show = false
      } else {
        this.show = true
        this.bankDetails = res.data
      }
    },
    // 提现确定
    async handleConfirm() {
      if (this.show) {
        if (this.formData.withdrawalMoney <= 0) {
          this.$message({
            message: '请输入正确的提现金额',
            type: 'warning'
          })
          return false
        }
        if (!this.formData.withdrawalType) {
          this.$message({
            message: '请选择提现类型',
            type: 'warning'
          })
          return false
        }
        const res = await withdrawal({
          shopName: this.bankDetails.shopName, // 店铺名称
          shopCode: this.bankDetails.shopCode, // 店铺编码
          bankName: this.bankDetails.bankName, // 银行名称
          bankCard: this.bankDetails.bankCard, // 银行卡号
          collectionName: this.bankDetails.collectionName, // 收款人姓名
          withdrawalType: this.formData.withdrawalType, // 提现类型
          withdrawalMoney: this.formData.withdrawalMoney // 提现金额
        })
        if (res.code === '') {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.isVisible = false
        }
      } else {
        this.isVisible = false
        this.$router.push({
          path: 'account'
        })
      }
    },
    // 全部提现
    getAllwithdrawalAmount() {
      if (this.formData.withdrawalType === 1) {
        this.formData.withdrawalMoney = this.financialData.withdrawableMoney || 0
      } else if (this.formData.withdrawalType === 2) {
        this.formData.withdrawalMoney = this.financialData.beeWithdrawal || 0
      }
    },
    // 初始化查询所有数据
    async getList() {
      const res = await getFinanceCount(this.formInline)
      if (res.code === '') this.financialData = res.data
    },
    // 查询明细
    async getInfo() {
      const res = await getDetails(this.moneyForm)
      if (res.code === '') {
        this.tableDatas = res.data.list
        this.total = res.data.total
      }
    }
  }
}
</script>

<style scoped lang='scss'>
@import url("../../../styles/elDialog.scss");

.finance_page {
  width: 100%;
  height: 100%;

  .leftText {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
  }

  .leftTip {
    font-size: 14px;
    color: #999999;
    margin-left: 20px;
  }

  .rightBtn {
    width: 100px;
    height: 48px;
    background: #3a68f2;
    border-radius: 4px;
    color: #ffffff;
    float: right;
  }
}

.tableBox {
  padding: 20px;
}

.cardList {
  padding-left: 30px;
}

.rightSearch {
  position: absolute;
  right: 20px;
  z-index: 999;
}

.text_tip {
  margin-left: 50px;
}

.sub_text {
  cursor: pointer;
}

.correlation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0px;

  .icon {
    color: rgb(255, 174, 17);
    font-size: 24px;
    cursor: pointer;
  }
}
</style>
