<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="70px">
            <el-form-item prop="year">
                <el-date-picker v-model="queryForm.year" clearable type="year" value-format="yyyy" style="width: 100%"
                    placeholder="选择年度">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增 </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格数据 -->
        <el-table v-loading="loading" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }" :data="budgetList"
            style="font-size: 14px" stripe>
            <el-table-column label="年度" prop="year" align="center" width="100px" />
            <el-table-column label="科室" prop="deptName" align="center" />
            <el-table-column label="填报人" prop="informant" align="center" />
            <el-table-column label="分管领导" prop="leadershipName" align="center" />
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column label="填报时间" prop="tbTime" align="center" />
            <el-table-column label="当前任务" prop="state" align="center">
                <template slot-scope="{ row }">
                    {{ row.state === '0' ? "未提交" :
                        row.state === '1' ? "分管领导审核" :
                            row.state === '2' ? "审核通过" :
                                "审核不通过" }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200px">
                <template slot-scope="scope">
                    <div v-if="scope.row.state === '0'">
                        <!-- 未提交状态 -->
                        <el-button size="mini" type="text" icon="el-icon-s-promotion"
                            @click="submitApply(scope.row)">提交申请</el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                    <div v-else>
                        <!-- 审核中、审核通过、审核不通过状态 -->
                        <el-button size="mini" type="text" icon="el-icon-search"
                            @click="handleLook(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />

        <!-- 添加/编辑对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1350px">
            <div class="dialog-footer btn">
                <el-button class="btnup" type="primary" @click="submitForm">确 定</el-button>
                <el-button class="btnup" @click="cancel">取 消</el-button>
            </div>
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="90px">
                <div>
                    <div class="title">
                        <input v-model="postForm.year" type="text" class="kstitle-inputn">年
                        <input v-model="postForm.deptName" type="text" class="kstitle-inputks
                        " />科室预算
                    </div>
                    <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">单位:万元</div>
                </div>

                <!-- 表格数据 -->
                <el-button class="el-icon-plus" size="mini" @click="addLine()">增加</el-button>
                <el-table border :data="xzTable" ref="xzTable" class="xzTable" :rules="rules">
                    <el-table-column label="序号" type="index" align="center" />
                    <el-table-column prop="projectName" label="*项目名称" width="150" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.projectName" placeholder="请输入内容" required></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="*申报政策依据、理由及主要内容" width="300" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.content" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="projectExpenditures" label="*项目支出明细" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.projectExpenditures" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="*是否政府采购" prop="isGovernmentPurchase" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.isGovernmentPurchase" placeholder="请选择" filterable
                                default-first-option ref="selectInput">
                                <el-option label="是" value="0"></el-option>
                                <el-option label="否" value="1"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>>
                    <el-table-column label="*申请金额" align="center" prop="applyMoney">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.applyMoney" :controls="false" :min="0" :precision="4"
                                readonly></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template>
                            <el-button class="el-icon-circle-close" size="mini" @click="deleteLine">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-row style="margin-top: 15px;margin-left: 20px;">
                    <el-col :span="14">
                        <span class="uploadname" style="font-size: 16px;font-weight: bold;">填报人 :
                            {{ postForm.informant }}
                        </span>
                    </el-col>
                    <el-col :span="10">
                        <!-- <el-form-item label="分管领导" prop="handUserName2"> -->
                        <!-- <el-input :value="postForm.handUserName2" placeholder="请选择分管领导"
                                @focus="openSelect('选择分管领导', 'leaderList', 2)"></el-input> -->
                        <span class="uploadname" style="font-size: 16px;font-weight: bold;">分管领导:
                            <span style="display: inline-block; width: 100px;height: 20px;"
                                @click="openSelect('选择分管领导', 'leaderList', 2)">{{ postForm.handUserName2 }}
                            </span>
                        </span>
                        <!-- </el-form-item> -->
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 查看对话框 -->
        <el-dialog :title="title" :visible.sync="openLook" width="80%">
            <div class="dialog-footer btn">
                <el-button class="btnup" @click="cancel">关 闭</el-button>
            </div>
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="90px">
                <div>
                    <h2 class="title">{{ postForm.year }}年{{ postForm.deptName }}科室预算</h2>
                    <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">单位:万元</div>
                </div>
                <!-- 表格数据 -->
                <el-table border :data="lookTable" ref="table" class="lookTable">
                    <el-table-column label="序号" width="60" type="index" align="center" />
                    <el-table-column prop="projectName" label="项目名称" align="center" />
                    <el-table-column prop="content" label="申报政策依据、理由及主要内容" width="300" align="center" />
                    <el-table-column label="项目支出明细" prop="projectExpenditures" align="center" />
                    <el-table-column label="是否政府采购" prop="isGovernmentPurchase" align="center" width="200" />
                    <!-- <el-table-column label="申请金额" prop="applyMoney" align="center" width="200" /> -->
                    <el-table-column label="申请金额" prop="applyMoney" align="center" width="200">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.applyMoney" :controls="false" :min="0" :precision="4"
                                :disabled="true" class="readonly-input"></el-input-number>
                        </template>
                    </el-table-column>

                    <el-table-column label="备注" prop="remark" align="center" width="200" />

                </el-table>
                <el-row style="margin-top: 15px;margin-left: 20px;">
                    <el-col :span="14">
                        <span class="uploadname" style="font-size: 16px;font-weight: bold;">填报人 :
                            {{ postForm.informant }}
                        </span>
                    </el-col>
                    <el-col :span="10">
                        <span class="uploadname" style="font-size: 16px;font-weight: bold;">分管领导:
                            {{ postForm.leadershipName }}
                        </span>
                    </el-col>
                </el-row>
            </el-form>

        </el-dialog>
        <!-- 选择对应处理人 -->
        <SelectUser :id="selectHandles.id" :open.sync="selectHandles.open" :title="selectHandles.title"
            :width="selectHandles.width" :execute="selectHandles.method" @select="selectUser"></SelectUser>

    </div>
</template>

<script>
import {
    adddeBudget,// 新增预算填报
    editdeBudget,// 修改预算填报
    queryDepart,//查看预算填报列表;
    getdeBudgetList,//查看本单位预算填报列表;
    deleteDepart,// 删除预算填报
    submitApply,//提交
    departUser,//获取当前登录人
} from '@/api/smartSchool/officialWork/budgetFilling'
import {
    getLeaderList,//获取校领导下拉框
} from "@/api/smartSchool/personWork/auditoriumReservation";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import { MessageBox } from "element-ui";
import SelectUser from "./components/SelectUser";
import moment from 'moment';

export default {
    name: "budgetFilling",
    components: {
        Treeselect,
        SelectUser
    },
    data() {
        return {
            handUserName2: "",
            title: '',
            // 填报人
            informant: "",
            // 查询表单
            queryForm: {
                budgetYear: '',// 预算年度
                deptId: null,// 部门ID科室
                budgetName: '',// 项目名称
                isGov: '',// 是否政府采购
                remark: '',// 备注
                giveMoney: '',// 批复金额
                budgetDetailed: '',//项目支出明细
                pageNum: 1,
                pageSize: 10
            },
            // 遮罩层
            loading: false,
            total: 0,
            // 信息列表
            budgetList: [],
            // 新增/编辑表单
            postForm: {
                schoolBudgetDetailsList: [],
                applyMoney: '',
            },
            // 新增表格
            xzTable: [



            ],
            form: {},
            //后端传校领导列表
            schoolLeaderList: [],
            // 部门树选项
            deptOptions: undefined,
            teacherSelect: '教师信息',
            teacherSelectDialog: false,
            // 弹出层标题
            dialogTitle: "",
            dialogTeacherLeaveView: false,
            dialogViewTeacherLeave: false,
            dialogTeacherLeave: false,
            options: "",
            // 审批人
            entrust: {
                open: false,
                title: '选择审批人'
            },
            // 选择对应处理人
            selectHandles: {
                id: null,
                open: false,
                title: '',
                width: '50%',
                method: null,
                type: null // 处理类型： 1 级部/处室； 2 分管； 3 主管
            },
            // 查看表格
            lookTable: [],
            // 是否显示弹出层
            open: false,
            // 查看弹窗
            openLook: false,
            // 校验规则
            rules: {
                budgetYear: [{ required: true, message: '年度不能为空', trigger: 'blur' }],
                deptName: [{ required: true, message: '科室不能为空', trigger: 'blur' }],
                budgetName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
                isGov: [{ required: true, message: '是否政府采购不能为空', trigger: 'blur' }],
                giveMoney: [{ required: true, message: '批复金额不能为空', trigger: 'blur' }],
                projectName: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
            },
            
            // 弹出层标题
            title: '',
            // 是否禁用删除按钮--项目明细
            multiple: false,
            // 选中数据的值数组
            selectItems: [],
            // 科室列表
            deptOptions: [],
            // 年
            year: "",
            // 预算单位名称
            deptName: "",
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/budgetDetails/importExcel"
            },
        }
    },




    created() {
        this.getList();

    },
    methods: {
        handleApplyMoneyInput(row, event) {
            let value = event.trim();

            // 如果输入的值非空且符合数字格式，则保留四位小数
            if (value !== '' && /^\d+(\.\d{1,4})?$/.test(value)) {
                row.applyMoney = parseFloat(value).toFixed(4);
            } else {
                row.applyMoney = value;
            }
        },


        // 新增空行数据
        addLine() {
            const newLine = {
                projectName: "",
                content: "",
                projectExpenditures: "",
                isGovernmentPurchase: "",
                applyMoney: "",
                remark: "",
            };
            this.xzTable.push(newLine);
        },
        // 删除空行数据
        deleteLine() {
            if (this.xzTable.length > 0) {
                MessageBox.confirm("是否确认删除本行数据？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.xzTable.pop();
                    })
                    .catch(() => {
                        // 用户取消删除操作
                    });
            }
        },
        confirm() {
            this.dialogViewTeacherLeave = false;
        },
        openViewTeacherLeaveForm(row) {
            this.reset();
            const id = row.id || this.ids
            getTeacherLeave(id).then(response => {
                this.form = response.data;
                this.dialogViewTeacherLeave = true;
            });
        },
        dialogOpenApproveHistory(row) {
            this.dialogApproveHistory = true
            this.getApproveHistoryList(row)
        },
        getApproveHistoryList(row) {
            listHistory({ instanceId: row.instanceId }).then(res => {
            })
        },
        openTeacherSelect() {
            this.teacherSelectDialog = true
        },
        // 新增操作
        setTeacherInfo(data) {
            this.teacherSelectDialog = false;
            this.$set(this.form, 'teacherName', data.teacherName);
            this.$set(this.form, 'teacherId', data.id);
            this.dialogTeacherAward = true;
            this.title = "新增请假信息";
        },
        /** 获取教师信息列表 */
        getTeacherList(queryForm, callback) {
            listInform(queryForm).then(response => {
                callback(response.rows, response.total);
            }).catch(error => {
                callback([], 0);
            })
        },
        //获校领导下拉框、
        schoolLeader() {
            getLeaderList().then(((res) => {
                if (res.code == 200) {
                    this.schoolLeaderList = res.rows
                }

            }))
        },
        handleDeputyLeader(data) {
            const { handUserName2, handUserId2 } = data;
            this.form.handUserName2 = handUserName2;
            this.form.handUserId2 = handUserId2;
        },

        // 处理精度
        handlePrecision(value, precision) {
            if (typeof value === 'number') {
                return value.toFixed(precision);
            }
            return value;
        },

        // 获取列表
        getList() {
            this.loading = true;
            getdeBudgetList(this.queryForm).then(response => {
                this.loading = false;
                this.budgetList = response.rows;
                console.log(111, response.rows);
                this.total = response.total;
            }).catch(err => {
                this.loading = false;
            })
        },
        readNodes(nodes = [], arr = []) {
            for (let item of nodes) {
                arr.push({ id: item.id, label: item.label })
                if (item.children && item.children.length) this.readNodes(item.children, arr)
            }
            return arr
        },

        // 选择处理人:打开对话框
        openSelect(title, method, type) {
            console.log(1);
            this.selectHandles.open = true;
            this.selectHandles.title = title;
            this.selectHandles.method = method;
            this.selectHandles.type = type;

        },
        // 选择处理人
        selectUser(select) {
            // 这种写法存在一定危险，后续最好是可以有更好的字段名对应
            this.$set(this.form, `handUserName${this.selectHandles.type}`, select.name);
            this.$set(this.form, `handUserId${this.selectHandles.type}`, select.id);
            this.postForm.handUserName2 = select.name;
            console.log(124, this.postForm.handUserName2);
            this.postForm.leadershipId = select.id;
        },

        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },


        // 搜索按钮
        handleQuery() {
            this.getList();
        },

        // 重置按钮
        resetQuery() {
            this.queryForm = {
                budgetYear: '',// 预算年度
                deptId: null,// 部门ID科室
                budgetName: '',// 项目名称
                isGov: '',// 是否政府采购
                remark: '',// 备注
                giveMoney: '',// 批复金额
                budgetDetailed: '',//项目支出明细
                pageNum: 1,
                pageSize: 10
            };
            this.resetForm("queryForm");
            this.handleQuery();
        },


        // 编辑按钮
        handleUpdate(row) {
            this.open = true;
            console.log('row.id', row.id);
            queryDepart(row.id).then(response => {
                console.log(11122, response.data);
                this.postForm.id = response.data.id
                this.xzTable = response.data.schoolDepartmentBudgetProjectmxList;
                this.postForm.informant = response.data.informant;
                this.postForm.year = response.data.year;
                this.postForm.deptName = response.data.deptName;
                this.postForm.handUserName2 = response.data.leadershipName;
                this.postForm.handUserName2 = response.data.leadershipName;
                // this.postForm.projectName = tresponse.data.schoolDepartmentBudgetProjectmxList.projectName;
                // this.postForm.content = response.data.schoolDepartmentBudgetProjectmxList.content;
                // this.postForm.projectExpenditures = response.data.schoolDepartmentBudgetProjectmxList.projectExpenditures;
                // this.postForm.isGovernmentPurchase = response.data.schoolDepartmentBudgetProjectmxList.isGovernmentPurchas;
                this.$modal.closeLoading();
            }).catch(err => {

            })
        },
        // 提交按钮
        submitApply(row) {
            this.$confirm('确认要提交申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    submitApply(row.id).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            })
                            this.getList()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    })
                })
        },
        // 查看按钮
        handleLook(row) {
            queryDepart(row.id).then(response => {
                this.lookTable = response.data.schoolDepartmentBudgetProjectmxList;
                console.log(111, this.lookTable);
                this.postForm.informant = this.$store.state.user.name;
                console.log(222, this.$store.state.user);
                this.postForm.leadershipName = response.data.leadershipName;
                this.postForm.year = response.data.year;
                this.postForm.deptName = response.data.deptName;
                this.openLook = true;
                this.$modal.closeLoading();
            }).catch(err => {

            })
        },

        // 新增按钮
        handleAdd() {
            this.reset();
            this.xzTable = [{
                projectName: "",
                content: "",
                projectExpenditures: "",
                isGovernmentPurchase: "",
                applyMoney: "",
                remark: "",
            }];
            departUser().then(response => {
                this.postForm.informant = response.data.userName;
                this.postForm.deptName = response.data.deptName;
                console.log(111, response.data);
                this.postForm.year = moment().add(1, 'years').format('YYYY');

                if (response.hasOwnProperty('total') && typeof response.total === 'number' && !isNaN(response.total)) {
                    this.total = response.total;
                } else {
                    this.total = 0;

                }
            })


            this.open = true;
            this.postForm.informant = this.$store.state.user.name;
            this.title = '新增预算批复信息'
        },

        // 删除按钮操作
        handleDelete(row) {
            this.throttle(() => {
                this.$modal.confirm(`是否确认删除此条数据？`).then(() => {
                    this.$modal.loading('正在处理数据，请稍等...');
                    return deleteDepart(row.id);
                }).then(() => {
                    this.$modal.closeLoading();
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                    this.$modal.closeLoading();
                });
            }
            )
        },

        // 提交表单
        submitForm() {
            this.throttle(() => {
                this.$refs["postForm"].validate(valid => {
                    if (valid) {
                        this.$modal.loading('正在上传数据，请稍等...');
                        if (this.xzTable[0].id != null) {
                            const newObj = {
                                id: this.postForm.id,
                                year: this.postForm.year,
                                leadershipId: this.postForm.leadershipId,
                                schoolDepartmentBudgetProjectmxList: this.xzTable
                            };
                            console.log('newObj', newObj)
                            // 编辑
                            editdeBudget(newObj).then(response => {
                                this.$modal.closeLoading();
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            }).catch(err => {
                                this.$modal.closeLoading();
                            });
                        } else {
                            // let fromData = {
                            //     year: "",
                            //     leadershipId: "",
                            // };
                            // fromData.schoolDepartmentBudgetProjectmxList = [];
                            // this.bzjData.forEach((element) => {
                            //     fromData.schoolDepartmentBudgetProjectmxList.push(element.obj);
                            // });
                            // fromData.earthTaskXIdList = this.earthTaskXIdList;
                            // fromData.rwrq = self.form.rwrq;
                            // fromData.rwlx = self.form.rwlx;
                            // fromData.xmid = self.form.xmid;
                            // fromData.jfjg = self.form.jfjg;

                            // 新增
                            // const newObj = {};
                            // newObj.leadershipName = this.postForm.handUserName2;
                            // newObj.leadershipId = this.postForm.leadershipId;
                            // newObj.xzTable = this.schoolDepartmentBudgetProjectmxList;
                            // newObj.year = this.postForm.year;
                            // newObj.deptName = this.postForm.deptName;
                            // console.log('newObj.deptName', newObj.deptName);
                            // newObj.projectName = this.xzTable[0].projectName;
                            // newObj.content = this.xzTable[0].content;
                            // newObj.projectExpenditures = this.xzTable[0].projectExpenditures;
                            // newObj.isGovernmentPurchase = this.xzTable[0].isGovernmentPurchas;
                            // newObj.applyMoney = this.xzTable[0].applyMoney;
                            // newObj.remark = this.xzTable[0].remark;
                            // console.log('newObj', newObj)


                            const newObj = {
                                year: this.postForm.year,
                                leadershipId: this.postForm.leadershipId,
                                schoolDepartmentBudgetProjectmxList: this.xzTable
                            };

                            console.log('xzTable', this.xzTable);
                            console.log('newObj', newObj);
                            // if (Array.isArray(this.schoolDepartmentBudgetProjectmxList) && this.schoolDepartmentBudgetProjectmxList.length > 0) {
                            //     for (let i = 0; i < this.schoolDepartmentBudgetProjectmxList.length; i++) {
                            //         let project = {};
                            //         project.projectName = this.schoolDepartmentBudgetProjectmxList[i].projectName;
                            //         project.content = this.schoolDepartmentBudgetProjectmxList[i].content;
                            //         project.projectExpenditures = this.schoolDepartmentBudgetProjectmxList[i].projectExpenditures;
                            //         project.isGovernmentPurchase = this.schoolDepartmentBudgetProjectmxList[i].isGovernmentPurchase;
                            //         project.applyMoney = this.schoolDepartmentBudgetProjectmxList[i].applyMoney;
                            //         project.remark = this.schoolDepartmentBudgetProjectmxList[i].remark;
                            //         newObj.xzTable.push(project);
                            //     }
                            // }
                            console.log('newObj', newObj);
                            adddeBudget(newObj).then(response => {
                                this.$modal.closeLoading();
                                console.log(this);
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            }).catch(err => {
                                this.$modal.closeLoading();
                            });


                        }
                    }
                });
            })
        },
        // 重置
        reset() {
            this.postForm = {
                projectName: "",
                content: "",
                projectExpenditures: "",
                isGovernmentPurchase: "",
                applyMoney: "",
                remark: "",
            }
            this.resetForm('postForm');
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.openLook = false;
            this.reset();
            this.resetForm('postForm');
        },

        // 多选框选择数据
        handleSelectionChange(selection) {
            this.selectItems = selection.map(item => item.budgetDetailed);
            this.multiple = selection.length;

        },

        // 新增明细
        addDetail() {
            this.postForm.schoolBudgetDetailsList.push({
                budgetDetailed: '',
                moneyDetailed: '',
                remark: ''
            })
        },

        // 删除明细
        deleteDetail() {
            this.selectItems.forEach(selectItem => {
                const index = this.postForm.schoolBudgetDetailsList.findIndex(item => item.budgetDetailed === selectItem);
                this.postForm.schoolBudgetDetailsList.splice(index, 1);
            })
            this.selectIndexs = [];
        },

        //  合并单元格
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            const spanArr = this.getSpanArr(this.budgetList);
            if (columnIndex !== 3 && columnIndex !== 4) {
                const _row = spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        // 合并相邻行之前存在相同项目的数据
        getSpanArr(data) {
            // data就是我们从后台拿到的数据
            let spanArr = [];
            let pos = 0;

            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    //设置table表格行号、设置合并参数，以便相同参数合并
                    spanArr.push(1);
                    pos = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].budgetName === data[i - 1].budgetName) {
                        spanArr[pos] += 1;
                        spanArr.push(0);
                    } else {
                        spanArr.push(1);
                        pos = i;
                    }
                }
            }
            return spanArr;
        },

        // 选择科室
        selectDept(node, instanceId) {
            this.postForm.deptId = node.id;
            this.postForm.deptName = node.label;
        },




    }
}
</script>

<style lang="scss" scoped>
::v-deep .inline-table .cell {
    padding: 0;
}

.title {
    font-size: 20px;
    text-align: center;
    color: #606266;

}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: end;


}

.uploadname {
    font-size: 16px;
    font-weight: bold;
}

.btnup {
    margin-left: 12px;
    padding: 9px 25px;
    border-radius: 6px;
    background-color: rgba(15, 64, 245, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    text-align: center;
    font-family: PingFang SC;

}

.xzTable {
    ::v-deep input {
        border-top: none;
        border-left: none;
        border-right: none;
    }

    margin-top: 20px;
}


.kstitle-inputn {
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 80px;
    color: #606266;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #d7dbe3;



}

.kstitle-inputks {
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 180px;
    color: #606266;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #d7dbe3;



}




.lookTable {
    ::v-deep input {
        border-top: none;
        border-left: none;
        border-right: none;
    }
}


.xzTable ::v-deep .el-table__header-wrapper .el-table__cell {
    font-size: 16px !important;
}

.lookTable ::v-deep .el-table__header-wrapper .el-table__cell {
    font-size: 16px !important;
}

.readonly-input .el-input input {
    background-color: #ffffff;
    border-color: #ffffff;
    cursor: not-allowed;
}
</style>
