<template>
    <div>
        <div class="simple-container">
            <simple-form
                :form="table_form"
                @search="handleSearch"
            ></simple-form>
            <simple-table
                :list="table_list"
                :config="table_config"
                :loading="table_loading"
                :handle-row="table_handle_row"
                @detail="handleVisible"
                @edit="handleVisible"
            ></simple-table>
            <simple-pagination
                :page="page"
                :total="total"
                @change="handleChange"
            ></simple-pagination>
        </div>
        <simple-dialog
            title="查看"
            width="1200px"
            @cancel="handleVisible"
            @confirm="handleVisible"
            :visible="template_visible"
        >
            <analysis />
        </simple-dialog>
    </div>
</template>

<script>
import analysis from "./analysis.vue";
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
import simpleDialog from "./components/dialog.vue";
import simplePagination from "./components/pagination.vue";
export default {
    components: {
        analysis,
        simpleTable,
        simpleDialog,
        simpleForm,
        simplePagination,
    },
    data() {
        return {
            page: 1,
            rows: 10,
            total: 0,
            template_visible: false,
            table_loading: false,
            table_search: {},
            table_form: [
                {
                    label: "模板名称",
                    props: "template_name",
                    type: "select",
                    dictionary: [
                        {
                            label: "GS",
                            value: "GS",
                        },
                        {
                            label: "KPI",
                            value: "KPI",
                        },
                    ],
                },
                {
                    label: "截止日期",
                    props: "date",
                    type: "date",
                },
            ],
            table_list: [],
            table_handle_row: [
                {
                    label: "查看",
                    props: "detail",
                },
                {
                    label: "修改",
                    props: "edit",
                },
                {
                    label: "撤回",
                    props: "delete",
                    popconfirm: true,
                },
            ],
            table_config: [
                {
                    label: "绩效类型",
                    props: "performance_type",
                },
                {
                    label: "模板名称",
                    props: "template_name",
                },
                {
                    label: "填报事由",
                    props: "reason",
                },
                {
                    label: "填报注意事项",
                    props: "note",
                },
                {
                    label: "截止时间",
                    props: "date",
                },
                {
                    label: "接收人",
                    props: "receiver",
                },
            ],
        };
    },
    methods: {
        async handleInit() {
            this.table_loading = true;
            const data = [];
            let index = 0;
            while (index < 10) {
                data.push({
                    performance_type: `GS`,
                    template_name: `信息技术中心2021年度部门GS绩效计划(${index})`,
                    reason: `填报事由${index}`,
                    note: `填报注意事项${index}`,
                    date: `2021.02.01`,
                    receiver: `邱钰、郭鹏`,
                });
                index = index + 1;
            }
            this.total = index;
            this.table_list = data;
            this.table_loading = false;
        },
        handleSearch({ template_name }) {
            this.table_search = { template_name };
            this.handleReset();
            this.handleInit();
        },
        handleChange(page) {
            this.page = page;
            this.handleInit();
        },
        handleVisible() {
            this.template_visible = !this.template_visible;
        },
        handleReset() {
            this.page = 1;
        },
    },
    mounted() {
        this.handleInit();
    },
};
</script>

<style></style>
