<template>
    <div>
        <div class="simple-container">
            <simple-form
                :form="table_form"
                :handle="table_handle"
                @search="handleSearch"
                @add="handleVisible('add')"
            ></simple-form>
            <simple-table
                :list="table_list"
                :config="table_config"
                :loading="table_loading"
                :handle-row="table_handle_row"
                @issue="handleVisible('issue')"
                @detail="handleVisible('template')"
            ></simple-table>
            <simple-pagination
                :page="page"
                :total="total"
                @change="handleChange"
            ></simple-pagination>
        </div>
        <simple-dialog
            title="查看模板"
            width="1200px"
            @cancel="handleVisible('template')"
            @confirm="handleVisible('template')"
            :visible="template_visible"
        >
            <analysis />
        </simple-dialog>
        <simple-dialog
            title="下发"
            width="500px"
            @cancel="handleVisible('issue')"
            @confirm="handleVisible('issue')"
            :visible="issue_visible"
        >
            <el-form label-width="100px" :model="form">
                <el-form-item label="填报事由">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="填报注意事项">
                    <el-input v-model="form.region"></el-input>
                </el-form-item>
                <el-form-item label="截止时间">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-upload
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div>上传附件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
        </simple-dialog>
        <simple-dialog
            title="新增模板"
            :visible="add_visible"
            :reload="reload"
            width="1200px"
            @confirm="handleVisible('add')"
            @cancel="handleVisible('add')"
        >
            <simple-sheet />
        </simple-dialog>
        <simple-dialog
            title="权限设置"
            :visible="power_visible"
            :reload="reload"
            width="1200px"
            @confirm="handleVisible('power')"
            @cancel="handleVisible('power')"
        >
            <el-form :model="form" label-width="100px">
                <el-form-item label="可编辑列"
                    ><el-input v-model="form.editrows"
                /></el-form-item>
                <el-form-item label="权限规则">
                    <el-select v-model="form.rule">
                        <el-option
                            v-for="item in ruleoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option> </el-select
                ></el-form-item>
                <el-form-item label="负责人">
                    <el-cascader-panel
                        v-model="form.charge"
                        :options="charge_options"
                        clearable
                        @change="handleCascader"
                    ></el-cascader-panel
                ></el-form-item>
            </el-form>
        </simple-dialog>
    </div>
</template>

<script>
import analysis from "./analysis.vue";
import simpleForm from "./components/form.vue";
import simpleSheet from "./components/sheet.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,
        simpleSheet,
        simplePagination,
    },
    data() {
        return {
            page: 1,
            rows: 10,
            total: 0,
            form: {},
            reload: 0,
            ruleoptions: [
                {
                    value: "按行号",
                    label: "按行号",
                },
                {
                    value: "按科室分配",
                    label: "按科室分配",
                },
                {
                    value: "按负责人分配",
                    label: "按负责人分配",
                },
                {
                    value: "所有人员",
                    label: "",
                },
            ],
            charge_options: [
                {
                    label: "科室名称1",
                    value: "科室名称1",
                    children: [
                        {
                            label: "负责人",
                            value: "负责人",
                            children: [{ label: "尹强", value: "尹强" }],
                        },
                    ],
                },
            ],
            add_visible: false,
            power_visible: false,
            template_visible: false,
            issue_visible: false,
            table_loading: false,
            table_search: {},
            table_form: [
                {
                    label: "模板名称",
                    props: "template_name",
                    type: "input",
                },
            ],
            table_list: [],
            table_handle: [
                {
                    label: "新增模板",
                    props: "add",
                },
            ],
            table_handle_row: [
                {
                    label: "下发",
                    props: "issue",
                },
                {
                    label: "查看",
                    props: "detail",
                },
                {
                    label: "删除",
                    props: "delete",
                    popconfirm: true,
                },
            ],
            table_config: [
                {
                    label: "模板名称",
                    props: "template_name",
                },
                {
                    label: "配置时间",
                    props: "template_date",
                },
                {
                    label: "配置工号",
                    props: "template_number",
                },
                {
                    label: "模板分类",
                    props: "template_class",
                },
                {
                    label: "模板状态",
                    props: "template_status",
                },
                {
                    label: "模板类型",
                    props: "template_type",
                },
            ],
        };
    },
    methods: {
        async handleInit() {
            this.table_loading = true;
            const data = [];
            let index = 0;
            while (index < 10) {
                data.push({
                    template_name: `模板${index}`,
                    template_date: "2021-12-01 12:00:00",
                    template_number: `NUMBER${index}`,
                    template_class: `部门绩效${index}`,
                    template_status: `在用`,
                    template_type: `科室绩效${index}`,
                });
                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();
        },
        handleAdd() {},
        // 级联选择
        handleCascader(data) {
            console.log(data, "data");
        },
        handleChange(page) {
            this.page = page;
            this.handleInit();
        },
        handleVisible(props) {
            switch (props) {
                case "add":
                    this.add_visible = !this.add_visible;
                    break;
                case "power":
                    this.power_visible = !this.power_visible;
                    break;
                case "template":
                    this.template_visible = !this.template_visible;
                    break;
                case "issue":
                    this.issue_visible = !this.issue_visible;
            }
        },
        handleReset() {
            this.page = 1;
        },
    },
    mounted() {
        this.handleInit();
    },
};
</script>

<style></style>
