
<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <div class="user-panel" v-loading="loading">
        <el-table
        :data="tableData"
        style="min-height:400px;"
        v-loading="loading"
        stripe
        >
            <el-table-column  prop="curAccumulate"  label="本月累计到账金额"></el-table-column>
            <el-table-column  prop="currentAmount"  label="本次到账金额"></el-table-column>
            <el-table-column  prop="createTime"  label="本次到账时间" width="200"></el-table-column>
            <el-table-column  prop="createName"  label="操作人"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="{row}">
                <el-link type="primary" @click="handleEdit(row)">修改</el-link>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="text-align:center"
            :current-page.sync="pageIndex"
            :total="totalElements"
            :page-sizes="pageSizeList"
            @current-change="changePage"
            @size-change="pageSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
      </span>
      <incomeModifyRecord-detail
        v-if="showModal"
        :businessKey2="businessKey2"
        :title="modalTitle"
        @close="onDetailModalClose"
      ></incomeModifyRecord-detail>
    </el-dialog>

  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import incomeModifyRecordApi from "@/api/base/incomeModifyRecord";
  import incomeModifyRecordDetail from "./incomeModifyRecord-detail"
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
            showPwd: true,
            ruleValidate: {
                title: [
                { required: true, message: "标题不能为空", trigger: "blur" },
                ],
                type: [
                { required: true, message: "模板类型不能为空", trigger: "blur" },
                ],
            },
            roleList: [],
            formModel: {},
            showDialog: true,
            loading: false,
            submitting: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 10,
            totalPages: 0,
            totalElements: 0,
            field: "",
            direction: "",
            pageSizeList: [10, 20, 30],
            multipleSelection: [],
            showModal:false,
            modalTitle:"",
            flag:false,
      };
    },
    created() {
    },
    methods: {
      closeDialog() {
        this.$emit("close", false,this.flag);
      },
      handleSubmit() {
        var self = this;
  
        this.$refs["form"].validate((valid) => {
          if (valid) {
            (function () {
              var id = self.formModel.id;
  
              if (id == null || id.length == 0) {
                return incomeModifyRecordApi.add(self.formModel);
              } else {
                return incomeModifyRecordApi.update(self.formModel);
              }
            })().then(function (response) {
              var jsonData = response.data;
  
              if (jsonData.result) {
                self.$message({
                  message: "保存成功!",
                  type: "success",
                });
  
                self.$emit("close", true);
              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });
  
                self.$emit("close", false);
              }
            });
          }
        });
      },
      changePage(pageIndex,flag) {
        var self = this;

        self.pageIndex = pageIndex;
        var formData = new FormData();

        formData.append("pageIndex", self.pageIndex);
        formData.append("pageSize", self.pageSize);
        formData.append("incomeId", self.businessKey);

        incomeModifyRecordApi
            .pageList(formData)
            .then(function(response) {

                var jsonData = response.data.data;

                self.tableData = jsonData.data;
                self.totalPages = jsonData.totalPages;
                self.totalElements = jsonData.recordsTotal;
            })
            .catch(error => {
            // self.$message.error(error + "");
            });
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;

            this.$nextTick(()=>{
                this.changePage(this.pageIndex,null);
            });
        },
        handleEdit(record) {
        var self = this;
        
        self.modalTitle = "编辑用户";
        self.businessKey2 = record.id;
        self.showModal = true;
      },
        onDetailModalClose(refreshed) {
          this.showModal = false;
          if(refreshed) {
            this.flag = true;
            this.changePage(this.pageIndex);
          }
        },
    },
    async mounted() {
      this.changePage(1,null);
    },
    components: {
      "incomeModifyRecord-detail":incomeModifyRecordDetail,
    }
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  </style>