<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div style="width: 100%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="充值明细" name="first">
            <RechangeDetails ref="rechange_details"></RechangeDetails>
          </el-tab-pane>
          <el-tab-pane label="充值汇总" name="second">
            <RechargeSummary ref="recharge_summary"></RechargeSummary>
          </el-tab-pane>
        </el-tabs>
        <div
          style="position: absolute; top: 80px; right: 40px"
          v-if="activeName == 'first'"
        >
          <el-button size="small" type="primary" @click="Add()">
            新增
          </el-button>
        </div>
      </div>
      <el-dialog
        title="新增押金"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="close"
      >
        <!-- <span>这是一段信息</span> -->
        <RechangeAd ref="add_page" v-bind="$attrs"></RechangeAd>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pass">取消</el-button>
          <el-button type="primary" @click="Submit">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import RechangeDetails from "./Template/RechargeDetails.vue";
import RechargeSummary from "./Template/RechargeSummary.vue";
import RechangeAd from "./Template/add_page.vue";
export default {
  components: {
    BreadCrumb,
    RechangeDetails,
    RechargeSummary,
    RechangeAd,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "充值详情" },
      ],
      activeName: "first",
      tableData: [{}, {}],
      total: 0,
      page: 1,
      limit: 10,
      keywords: "",
      dialogVisible: false,
      close: false,
    };
  },
  created(){
    this.search()
  },
  methods: {
    // 初始化数据
    init() {

    },

    // 查询操作
    search() {
      this.$refs['rechange_details'].search();
    },
    // 切换明细
    handleClick(tab, event) {
      // console.log(tab, event);
      if(tab.name == "first"){
        // alert("充值明细")
        this.$refs['rechange_details'].search();
      }else {
        // alert("充值汇总")
        this.$refs['recharge_summary'].search();
      }
    },
    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },

    // 流水详情
    toDetails() {
      this.$router.push({ path: "/DepositManagement/DepositDetails" });
    },

    // 新增
    Add() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs['add_page'].closePop();
        this.$refs['add_page'].getcode();
        this.$refs['add_page'].getusername();
      })
    },

    // 审核通过
    pass() {
      // this.$refs['add_page'].examine();
      this.dialogVisible = false;
    },

    // 提交
    Submit() {
      // this.$nextTick(() => {
        this.$refs['add_page'].subfrom();
        // setTimeout(() => {
        this.$refs['rechange_details'].search();
        // },500)

      // })
    },
    pli() {
      // alert("父组件被调用!")
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-tabs__header{
margin: 0 0 -15px;
}
</style>
