<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 prop="projectName">
                <el-input clearable v-model="queryForm.projectName" placeholder="项目名称"
                    @keyup.enter.native="handleQuery"></el-input>
            </el-form-item>
            <el-form-item prop="deptName">
                <el-input v-model="queryForm.deptName" placeholder="科室" clearable> </el-input>
            </el-form-item>
            <el-form-item prop="isGovernmentPurchase">
                <el-select v-model="queryForm.isGovernmentPurchase" placeholder="是否政府采购" style="width: 100%">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </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="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</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" />
            <el-table-column label="科室" prop="deptName" align="center" />
            <el-table-column label="项目名称" prop="projectName" align="center" />
            <el-table-column label="申报政策依据、理由及主要内容" prop="content" width="300px" align="center" />
            <el-table-column label="项目明细" prop="projectExpenditures" align="center" />
            <el-table-column label="申报金额（万元）" prop="applyMoney" align="center" />
            <el-table-column label="是否政府采购" prop="isGovernmentPurchase" align="center">
                <template slot-scope="scope">
                    {{ scope.row.isGovernmentPurchase === '1' ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" align="center" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleLook(scope.row)">查看
                    </el-button>

                </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="openLook" width="80%">
            <el-form ref="form" :model="form" :rules="rules" label-width="110px">
                <div class="dialog-footer btn">
                    <el-button class="btnup" @click="cancel">关 闭</el-button>
                </div>
                <div>
                    <h2 class="title">{{ form.year }}年{{ form.deptName }}科室预算</h2>
                    <div style="display: flex;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">
                        <template slot-scope="scope">
                            {{ scope.row.isGovernmentPurchase === '1' ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="申请金额" prop="applyMoney" align="center" width="200" />
                    <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;">填报人:
                            {{ form.informant }}
                        </span>
                    </el-col>
                    <el-col :span="10">
                        <span class="uploadname" style="font-size: 16px;font-weight: bold;">分管领导:
                            {{ form.leadershipName }}
                        </span>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    getksBudgetList,//查询科室预算填报项目明细列表
    depBudget//查看详情
} from '@/api/smartSchool/logisticsManage/departmentBudgetview'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "departmentBudgetview",
    computed: {
        isGovConvert: {
            get() {
                return this.queryForm.isGov === '0' ? '是' : '否'
            },
            set(val) {
                this.queryForm.isGov = val
            }
        }
    },
    data() {
        return {
            // 是否政府采购
            // isGovConvert: "",
            // 年
            year: "",
            // 科室名
            deptName: "",
            form: {
                year: "",
                deptName: "",
            },
            // 查询表单
            queryForm: {
                budgetYear: '',// 预算年度
                deptId: null,// 部门ID科室
                budgetName: '',// 项目名称
                isGov: '',// 是否政府采购
                remark: '',// 备注
                giveMoney: '',// 批复金额
                budgetDetailed: '',//项目支出明细
                pageNum: 1,
                pageSize: 10
            },
            // 遮罩层
            loading: false,
            total: 0,
            // 信息列表
            budgetList: [],
            // 新增/编辑表单
            postForm: {
                schoolBudgetDetailsList: []
            },
            // 新增表格
            xzTable: [
                {},
            ],
            // 查看表格
            lookTable: [],
            options: [],
            // 是否显示弹出层
            open: false,
            // 查看弹窗
            openLook: false,
            // 校验规则
            rules: {

            },
            // 弹出层标题
            title: '',
            // 是否禁用删除按钮--项目明细
            multiple: false,
            // 选中数据的值数组
            selectItems: [],
            // 科室列表
            deptOptions: [],

        }
    },



    created() {
        this.getList();
        // 获取科室信息

    },
    methods: {




        // 获取列表
        getList() {
            getksBudgetList(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;
            })
        },


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

        // 重置按钮
        resetQuery() {
            this.queryForm = {
                year: '',// 预算年度
                projectName: null,//项目名称
                deptName: '',// 项目名称
                isGovernmentPurchase: '',// 是否政府采购
                pageNum: 1,
                pageSize: 10
            };
            this.resetForm("queryForm");
            this.handleQuery();
        },

        // 查看按钮
        // handleLook(row) {
        //     this.openLook = true;
        //     const id = row.id || this.ids
        //     depBudget(id).then(response => {
        //         console.log(222, response.data);
        //         this.lookTable = [{
        //             projectName
        //         }]
        //         this.lookTable.projectName = response.data.projectName;
        //         console.log('this.lookTable.projectName', this.lookTable.projectName);
        //         this.lookTable.content = response.data.content;
        //         console.log('this.content', this.lookTable.content);
        //         this.lookTable.projectExpenditures = response.data.projectExpenditures;
        //         this.lookTable.isGovernmentPurchase = response.data.isGovernmentPurchase;
        //         this.lookTable.applyMoney = response.data.applyMoney;
        //         this.lookTable.remark = response.data.remark;
        //         this.form.year = response.data.year;
        //         this.form.deptName = response.data.deptName;
        //         this.form.informant = response.data.informant;
        //         this.form.leadershipName = response.data.leadershipName;
        //     }).catch(err => {
        //     })
        // },
        handleLook(row) {
            this.openLook = true;
            const id = row.id || this.ids;
            depBudget(id).then(response => {
                console.log(222, response.data);
                this.lookTable = [{
                    projectName: response.data.projectName,
                    content: response.data.content,
                    projectExpenditures: response.data.projectExpenditures,
                    isGovernmentPurchase: response.data.isGovernmentPurchase,
                    applyMoney: response.data.applyMoney,
                    remark: response.data.remark
                }];
                console.log(1119, this.lookTable);
                this.form.year = response.data.year;
                this.form.deptName = response.data.deptName;
                this.form.informant = response.data.informant;
                this.form.leadershipName = response.data.leadershipName;
            }).catch(err => {
                // 错误处理
            });
        },




        // 重置
        reset() {
            this.postForm = {
                budgetYear: '',// 预算年度
                deptId: null,// 部门ID科室
                deptName: '',
                budgetName: '',// 项目名称
                isGov: '',// 是否政府采购
                remark: '',// 备注
                giveMoney: '',// 批复金额
                schoolBudgetDetailsList: []
            }
            this.resetForm('postForm');
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.openLook = false;
            this.reset();
            this.resetForm('postForm');
        },
        // 导出
        handleExport() {
            this.download('/departmentBudgetProjectmx/export', {
                ...this.queryParams
            }, `科室预算查看_${Date.now()}.xlsx`)
        }








    }
}
</script>

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

.title {
    font-size: 20px;
    text-align: center;
}

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


}

.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-input {
    outline: none;
    border-top: none;
    border-left: none;
    border-right: none;
    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;
}
</style>
