
<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="originalAmount"  label="原金额"></el-table-column>
            <el-table-column  prop="currentAmount"  label="修改后金额"></el-table-column>
            <el-table-column  prop="createTime"  label="修改时间"></el-table-column>
            <el-table-column  prop="createName"  label="修改人"></el-table-column>
            <el-table-column  prop="image"  label="修改凭证">
              <template slot-scope="scope">
                <el-link type="primary" :href="scope.row.image" target="_blank" :underline="false">
                <el-image
                  style="width: 40px; height: 40px"
                  v-if="scope.row.image&&isImageFile(scope.row.image)"
                  :src="scope.row.image"
                  fit="fit">
                </el-image>
                <span v-else>
                  <span v-if="scope.row.image">附件</span>
                </span>
                </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>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import budgetModifyRecordApi from "@/api/base/budgetModifyRecord";
  
  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: [],
      };
    },
    created() {
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      handleSubmit() {
        var self = this;
  
        this.$refs["form"].validate((valid) => {
          if (valid) {
            (function () {
              var id = self.formModel.id;
  
              if (id == null || id.length == 0) {
                return budgetModifyRecordApi.add(self.formModel);
              } else {
                return budgetModifyRecordApi.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) {
        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);

        budgetModifyRecordApi
            .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);
            });
        },
        isImageFile(url){
          // 获取文件扩展名
          const extension = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
          // 支持的图片扩展名列表
          const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
          // 判断当前文件扩展名是否为图片扩展名
          if (imageExtensions.includes(extension)) {
            return true;
          }
          return false;
        },
    },
    async mounted() {
      this.changePage(1);
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  </style>