<template>
  <ContainerQuery>
    <!--    <div slot="left">-->
    <!--      <el-button size="small" type="primary" plain>导出</el-button>-->
    <!--    </div>-->
    <div slot="right">
      <el-form size="small" inline>
        <el-form-item label="结算单号">
          <el-input
            v-model="search_form.keyword"
            style="width: 220px"
            placeholder="请输入单号"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select
            v-model="search_form.pay_type"
            placeholder="结算方式"
            style="width: 140px"
            clearable
            @change="pageChange(1)"
          >
            <el-option label="全部" :value="0"></el-option>
            <el-option label="微信钱包" :value="1"></el-option>
            <el-option label="支付宝" :value="2"></el-option>
            <el-option label="银行卡" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="more">
      <el-form size="small" inline>
        <el-form-item label="结算单号">
          <el-input
            v-model="search_form.keyword"
            style="width: 220px"
            placeholder="请输入单号"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select
            v-model="search_form.pay_type"
            placeholder="结算方式"
            style="width: 140px"
            clearable
            @change="pageChange(1)"
          >
            <el-option label="全部" :value="0"></el-option>
            <el-option label="微信钱包" :value="1"></el-option>
            <el-option label="支付宝" :value="2"></el-option>
            <el-option label="银行卡" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <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>
    </div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="待打款" name="4"></el-tab-pane>
        <el-tab-pane label="已结算" name="2"></el-tab-pane>
        <el-tab-pane label="拒绝" name="3"></el-tab-pane>
      </el-tabs>
      <el-table :data="settlement_list" border>
        <el-table-column
          prop="no"
          label="订单信息"
          min-width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="no"
          label="商户信息"
          min-width="160"
          align="center"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.merchantName }}-子商户</p>
            <p>联系人姓名-{{ scope.row.accountContent.name }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="结算方式"
          min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click">
              <span slot="reference" class="click-div">
                {{
                  scope.row.type === 1
                    ? "微信钱包"
                    : scope.row.type === 2
                    ? "支付宝"
                    : scope.row.type === 3
                    ? "银行卡"
                    : "其他"
                }}
              </span>
              <div>
                <p>姓名：{{ scope.row.accountContent.name }}</p>
                <p v-if="scope.row.type === 1">
                  微信号：{{ scope.row.accountContent.wxCode }}
                </p>
                <p v-if="scope.row.type === 2">
                  支付宝账号：{{ scope.row.accountContent.alipayCode }}
                </p>
                <p v-if="scope.row.type === 3">
                  银行：{{ scope.row.accountContent.bank }}
                </p>
                <p v-if="scope.row.type === 3">
                  银行账号：{{ scope.row.accountContent.bankAccount }}
                </p>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          label="申请金额"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <p>金额：{{ scope.row.money }}</p>
            <p>订单：{{ scope.row.orderNum }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          label="审核通过"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <p>金额：{{ scope.row.passMoney }}</p>
            <p>订单：{{ scope.row.passOrderNum }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="rate"
          label="抽成"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <p>金额：{{ scope.row.fee }}</p>
            <p>比例：{{ scope.row.rate }}%</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="nowMoney"
          label="打款金额"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间"
          min-width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ $_common.formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="auditStatus"
          label="结算状态"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              size="small"
              :type="
                scope.row.auditStatus === 3
                  ? 'info'
                  : scope.row.auditStatus === 1
                  ? 'warning'
                  : 'primary'
              "
            >
              {{
                scope.row.auditStatus === 1
                  ? "待审核"
                  : scope.row.auditStatus === 2
                  ? "已结算"
                  : scope.row.auditStatus === 3
                  ? "已拒绝"
                  : scope.row.auditStatus === 4
                  ? "待打款"
                  : "其他"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <!--el-table-column label="操作" min-width="140" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              :disabled="scope.row.auditStatus !== 4"
              @click="MerchantUpdateAuditStatus(scope.row.id, 2)"
            >
              打款
            </el-button>
            <el-button
              type="text"
              :disabled="![1, 3].includes(scope.row.auditStatus)"
              @click="MerchantUpdateAuditStatus(scope.row.id, 4)"
            >
              审核
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.auditStatus !== 1"
              @click="MerchantUpdateAuditStatus(scope.row.id, 3)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column-->
      </el-table>
      <FooterPage
        :page-size="pageSize"
        :total-page.sync="total"
        :current-page.sync="page"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
      ></FooterPage>
    </div>
  </ContainerQuery>
</template>

<script>
  import {
    MerchantWithdrawGetAll,
    MerchantUpdateAuditStatus,
  } from "@/api/Merchants.js";
  import { mapGetters } from "vuex";
  export default {
    name: "SettlementManage",
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 0,
        activeName: "0",
        settlement_list: [],
        search_form: {
          keyword: "",
          pay_type: "",
          start: "",
          end: "",
          status: "",
          time: [],
        },
      };
    },
    computed: {
      ...mapGetters({
        storeData: "MUser/storeData",
      }),
    },
    created() {
      this.MerchantWithdrawGetAll();
    },
    methods: {
      //  订单时间
      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 MerchantWithdrawGetAll() {
        const { data, pageTotal } = await MerchantWithdrawGetAll({
          page: this.page,
          pageSize: this.pageSize,
          auditStatus: this.activeName === "0" ? "" : parseInt(this.activeName),
          startTime: this.search_form.start,
          endTime: this.search_form.end,
          type: this.search_form.pay_type,
          shopId: this.storeData.id,
        });
        this.settlement_list = data;
        this.total = pageTotal;
      },
      pageChange(page) {
        this.page = page;
        this.MerchantWithdrawGetAll();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      tabChange() {
        this.pageChange(1);
      },
      MerchantUpdateAuditStatus(id, status) {
        this.$confirm(
          `确定要${
            status === 2
              ? "打款"
              : status === 4
              ? "审核通过"
              : status === 3
              ? "拒绝申请"
              : ""
          }吗？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(async () => {
          const data = await MerchantUpdateAuditStatus(id, { status: status });
          this.$message.success("操作成功");
          this.MerchantWithdrawGetAll();
        });
      },
    },
  };
</script>

<style scoped></style>
