<template>
    <basic-container>
        <!-- 重点项目统计分析 -->
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad"></avue-crud>
    </basic-container>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            data: [],
            form: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            option: {
                height: 'auto',
                calcHeight: 32,
                tip: false,
                size: 'medium',
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: false,
                viewBtn: false,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                editBtnText: '修改',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                viewBtnText: '详情',
                labelWidth: 120,
                searchLabelWidth: 120,
                menu: false,
                menuWidth: 220,
                dialogWidth: 1200,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                columnSort: true,
                excelBtn: true,
                columnSort: true,
                showOverflowTooltip: true,
                column: [
                    {
                        label: '日期',
                        prop: 'month',
                        type: 'month',
                        search: true,
                        hide: true,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入日期',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '制单部门',
                        prop: 'fpName',
                        search: false,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入制单部门',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '应完成项',
                        prop: 'totalItem',
                        search: false,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入应完成项',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '实际完成项',
                        prop: 'okTotalItem',
                        search: false,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入实际完成项',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '完成率(%)',
                        prop: 'punctuality',
                        search: false,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入完成率(%)',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '备注',
                        prop: 'memo',
                        search: false,
                        sortable: true,
                        overHidden: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入备注',
                                trigger: 'blur',
                            },
                        ],
                    },
                ]
            }
        }
    },
    mounted() {

    },
    methods: {
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            // this.query = params;
            // this.page.currentPage = 1;
            // this.onLoad(this.page, params);
            done();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad() {
            this.data = [
                {
                    "fpName": "化学镀镍一班崔胜伟",
                    "memo": "1111,111",
                    "okTotalItem": 0,
                    "punctuality": "100%",
                    "totalItem": 2
                }
            ]
            this.page.total = this.data.length
        }
    }
}
</script>

<style></style>