<template>
  <container-tit>
    <div slot="headr">
      <el-button type="primary" @click="submit">提交审核</el-button>
    </div>
    <!--    <el-card shadow="hover">-->
    <!--      <div slot="header">-->
    <!--        <span>条件筛选</span>-->
    <!--      </div>-->
    <!--      <el-form size="small" inline label-width="100px">-->
    <!--        <el-form-item label="订单完结时间">-->
    <!--          <el-date-picker-->
    <!--            v-model="search_form.time"-->
    <!--            clearable-->
    <!--            type="daterange"-->
    <!--            value-format="timestamp"-->
    <!--            range-separator="-"-->
    <!--            start-placeholder="开始日期"-->
    <!--            end-placeholder="结束日期"-->
    <!--            @change="timeChange"-->
    <!--          ></el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label-width="0">-->
    <!--          <el-radio-group v-model="search_form.time_region">-->
    <!--            <el-radio-button :label="0">全部</el-radio-button>-->
    <!--            <el-radio-button :label="1">上月</el-radio-button>-->
    <!--            <el-radio-button :label="2">上周</el-radio-button>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="结算方式">-->
    <!--          <el-select v-model="search_form.pay_type" 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>-->
    <!--    </el-card>-->
    <el-card shadow="hover">
      <div slot="header">
        <span>结算信息</span>
      </div>
      <div class="settlement-box">
        <div class="settlement-left">
          <p class="settlement-box-tit">结算金额</p>
          <ul class="data-secbox">
            <li class="data-item">
              <p class="data-label">
                <span>可提现金额（元）</span>
                <el-tooltip effect="light" placement="top">
                  <div slot="content">
                    子商户可申请结算的商品订单金额总和（已完结订单）
                  </div>
                  <i class="el-icon-question help-icon"></i>
                </el-tooltip>
              </p>
              <p class="data-num">{{ balance.balance.balance }}</p>
              <p class="data-subval">订单数：{{ balance.balance.num }}</p>
            </li>
            <li class="data-item">
              <p class="data-label">
                <span>预计打款（元）</span>
                <el-tooltip effect="light" placement="top">
                  <div slot="content">
                    预计打款金额 = 可提现金额 * 抽成比率
                    <br />
                    预计打款金额仅供参考
                  </div>
                  <i class="el-icon-question help-icon"></i>
                </el-tooltip>
              </p>
              <p class="data-num">
                {{
                  $NP.divide(
                    $NP.times(balance.balance.balance, audit.fee.rate),
                    100
                  )
                }}
              </p>
              <p class="data-subval">抽成比例：{{ audit.fee.rate }}%</p>
            </li>
          </ul>
        </div>
        <div class="settlement-right">
          <p class="settlement-box-tit">结算方式</p>
          <div class="data-right-main">
            <el-form
              ref="dataForm"
              size="small"
              :model="data_form"
              label-width="100px"
              :rules="data_rules"
            >
              <el-form-item label="结算方式" prop="type">
                <el-select
                  v-model="data_form.type"
                  style="width: 300px"
                  placeholder="请选择"
                >
                  <el-option
                    v-if="pay_type.indexOf(1) > -1"
                    label="微信钱包"
                    :value="1"
                  ></el-option>
                  <el-option
                    v-if="pay_type.indexOf(2) > -1"
                    label="支付宝"
                    :value="2"
                  ></el-option>
                  <el-option
                    v-if="pay_type.indexOf(3) > -1"
                    label="银行卡"
                    :value="3"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="data_form.name"
                  style="width: 300px"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="data_form.type === 1"
                label="微信号"
                prop="wxCode"
              >
                <el-input
                  v-model="data_form.wxCode"
                  style="width: 300px"
                  placeholder="请输入微信号"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="data_form.type === 2"
                prop="alipayCode"
                label="支付宝账号"
              >
                <el-input
                  v-model="data_form.alipayCode"
                  style="width: 300px"
                  placeholder="请输入支付宝账号"
                ></el-input>
              </el-form-item>
              <div v-if="data_form.type === 3">
                <el-form-item prop="bank" label="选择银行">
                  <el-select
                    v-model="data_form.bank"
                    style="width: 300px"
                    placeholder="请选择银行"
                  >
                    <el-option
                      v-for="(item, index) in bank_card"
                      :key="index"
                      :label="item.card_name"
                      :value="item.card_name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="bankAccount" label="银行卡号">
                  <el-input
                    v-model="data_form.bankAccount"
                    style="width: 300px"
                    placeholder="请输入银行卡号"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover">
      <div slot="header">
        <span>资金变动记录</span>
      </div>
      <el-table :data="changes_list" style="width: 100%" border>
        <el-table-column
          prop="originNo"
          label="源单号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="originMoney"
          label="原金额"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="changeMoney " label="变动金额" min-width="80">
          <template slot-scope="scope">
            <span :class="scope.row.type === 4 ? 'outMoney' : 'inMoney'">
              {{ scope.row.type === 4 ? "-" : "+" }}{{ scope.row.changeMoney }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nowMoney"
          label="变动后金额"
          min-width="80"
        ></el-table-column>
        <el-table-column prop="address" label="时间" min-width="120">
          <template slot-scope="scope">
            {{ $_common.formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="source " label="类型" min-width="80">
          <template slot-scope="scope">
            {{ scope.row.source === 1 ? "支付结算" : "商户提现" }}
          </template>
        </el-table-column>
      </el-table>
      <FooterPage
        :page-size="pageSize"
        :total-page.sync="total"
        :current-page.sync="page"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></FooterPage>
    </el-card>
    <!--    <el-card shadow="hover">-->
    <!--      <div slot="header">-->
    <!--        <span>订单列表</span>-->
    <!--      </div>-->
    <!--      <el-table :data="order_list" border>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="订单信息"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="商品总计"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="订单金额"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="可结算金额"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="预计抽成"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          prop="id"-->
    <!--          label="预计打款"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--        <el-table-column-->
    <!--          label="订单完结时间"-->
    <!--          min-width="120"-->
    <!--          align="center"-->
    <!--        ></el-table-column>-->
    <!--      </el-table>-->
    <!--    </el-card>-->
  </container-tit>
</template>

<script>
  import {
    MerchantWithdrawAdd,
    getMerchantWithdraw,
    MerchantGetSettingField,
    Merchantlog,
  } from "@/api/Merchants.js";
  export default {
    name: "SettlementDetail",
    data() {
      return {
        order_list: [],
        changes_list: [],
        data_rules: {
          type: [
            { required: true, message: "请选择结算方式", trigger: "change" },
          ],
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          wxCode: [
            { required: true, message: "请输入微信号", trigger: "blur" },
          ],
          alipayCode: [
            { required: true, message: "请输入支付宝账号", trigger: "blur" },
          ],
          bank: [{ required: true, message: "请选择银行", trigger: "change" }],
          bankAccount: [
            { required: true, message: "请输入银行卡号", trigger: "blur" },
          ],
        },
        search_form: {
          time: [],
          start: "",
          end: "",
          time_region: 0,
          pay_type: 0,
        },
        data_form: {
          type: "",
          bank: "",
          wxCode: "",
          alipayCode: "",
          name: "",
          bankAccount: "",
        },
        balance: { balance: {} },
        audit: { fee: {}, estimate: {} },
        pay_type: [],
        bank_card: [],
        total: 0,
        page: 1,
        pageSize: 10,
      };
    },
    created() {
      this.getMerchantWithdraw();
      this.MerchantGetSettingField();
      this.Merchantlog();
    },
    methods: {
      pageChange(val) {
        this.page = val;
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      timeChange(val) {
        if (val && val.length) {
          this.search_form.start = val[0] / 1000;
          this.search_form.end = val[1] / 1000 + 86399;
        } else {
          this.search_form.start = "";
          this.search_form.end = "";
        }
        // this.pageChange(1);
      },
      async MerchantGetSettingField() {
        const { data } = await MerchantGetSettingField();
        this.bank_card = data.bank_card || [];
        this.pay_type = data.shop_price_examine || [];
      },
      async getMerchantWithdraw() {
        const { data } = await getMerchantWithdraw();
        this.balance = data.balance;
        this.audit = data.audit;
      },
      // 资金变动记录
      async Merchantlog() {
        const data = await Merchantlog({
          page: this.page,
          pageSize: this.pageSize,
          isPlatform: 4,
        });
        this.changes_list = data.data;
        this.total = data.pageTotal;
      },
      async submit() {
        if (this.balance.balance.balance <= 0) {
          this.$message.warning("抱歉，没有可提现金额");
          return;
        }
        this.$refs["dataForm"].validate(async (valid) => {
          if (valid) {
            const { data } = await MerchantWithdrawAdd({
              type: this.data_form.type,
              accountContent: {
                bank: 1,
                wxCode: this.data_form.wxCode,
                alipayCode: this.data_form.alipayCode,
                name: this.data_form.name,
                bankAccount: this.data_form.bankAccount,
              },
              money: this.balance.balance.balance,
              orderNum: this.balance.balance.num,
            });
            this.$message.success("已提交申请");
            this.getMerchantWithdraw();
          }
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .inMoney {
    color: #67c23a;
    font-weight: bold;
  }
  .outMoney {
    color: #f56c6c;
    font-weight: bold;
  }
  .settlement-box {
    display: flex;
    .settlement-left {
      flex: 2;
      border-right: 1px solid #f5f5f5;
    }
    .settlement-right {
      flex: 2;
      padding-left: 24px;
    }
    .settlement-box-tit {
      font-weight: 700;
      padding-bottom: 30px;
      color: #666666;
    }
    .data-secbox {
      display: flex;
      .data-item {
        flex: 2;
        text-align: center;
        .data-label {
          font-size: 14px;
          color: #666;
          line-height: 16px;
          margin-bottom: 24px;
          font-weight: 700;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .help-icon {
            color: #999999;
            margin-left: 5px;
          }
        }
        .data-num {
          font-size: 30px;
          line-height: 30px;
          color: #333;
          font-weight: 700;
        }
        .data-subval {
          font-size: 12px;
          color: #666;
          line-height: 40px;
        }
      }
    }
  }
</style>
