<template>
    <div class="pd10">
        <div v-if="flag">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-button @click="AddClick()" type="primary" icon="el-icon-plus">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table
                stripe
                :data="totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :height="height"
                border
                v-loading="isLoading"
                style="width: 100%"
                header-cell-class-name="table_header"
                highlight-current-row
            >
                <template v-for="(item, index) in tableHeaderTotal">
                    <el-table-column :prop="item.prop" :label="item.label" :key="index">
                        <template v-for="(item, index) in item.children">
                            <el-table-column :prop="item.prop" :label="item.label" :key="index"></el-table-column>
                        </template>
                    </el-table-column>
                </template>
                <el-table-column min-width="200" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="QueryClick(scope.row)" type="primary" size="mini" icon="el-icon-view">
                            模板内容查看
                        </el-button>
                        <el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                            模板修改
                        </el-button>

                        <!-- @click="DeleteClick(scope.row)" -->
                        <el-button @click="departmentFlag(scope.row)" type="warning" size="mini" icon="el-icon-share">
                            模板绑定
                        </el-button>
                        <el-button @click="DeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                            模板删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalData.length"
                class="mt10"
            ></el-pagination>
        </div>
        <templateFile
            @close="close"
            :id="id"
            :title="RowName"
            :name="formdata.templateName"
            :deptId="formdata.deptId"
            :reportType="formdata.reportType"
            :valList="valList"
            v-else
        />
        <department
            class="mbbd"
            :valList="valList"
            v-if="dialogVisible"
            @handleClose="dialogVisible = false"
            @binding="
                dialogVisible = false
                steady()
            "
            :dialogVisible="dialogVisible"
        />
    </div>
</template>

<script>
import templateFile from '@/views/components/templateFile.vue'
import department from '@/views/components/department.vue'
// import { pvTree } from "@/api/AccountOperation";
import { dicData } from '@/assets/commjs/dictypeData'
import { updateTemplateActive, getTemplateList, delTemplate } from '@/api/templateConfiguration'
export default {
    name: 'reportingmanagerdd',
    components: { templateFile, department },
    data() {
        return {
            dialogVisible: false,
            id: '',
            title: '',
            flag: true,
            vh: '',
            form: {},
            valList: {},
            currentPage: 1,
            pageSize: 20,
            RowName: '',

            classificationData: [],

            formdata: {
                value: '',
                props: '',
                valueTitle: '',
                accordion: false,
                defaultExpandedKey: [],
                reportType: '',
                //区域
                options: [],
                default: {
                    value: 'id',
                    children: 'children',
                    label: 'name'
                },
                templateName: ''
            },
            height: null,
            isLoading: false,
            //稳态指标超标统计
            tableHeaderTotal: [
                { prop: 'name', label: '模板名称' },
                { prop: 'createBy', label: '创建用户' },
                { prop: 'updateBy', label: '更新用户' },
                { prop: 'createTime', label: '创建时间' },
                { prop: 'updateTime', label: '更新时间' }
            ],
            totalData: [],
            device: ''
        }
    },
    created() {
        this.getclassificationData()
        this.steady()
        // this.area();
        // this.dictionaries()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 98 + 'px'
        },
        isjh(e) {
            updateTemplateActive({ tempId: e.id, deptId: e.deptId }).then(res => {
                if (res.message == '修改激活状态,成功') {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    })
                    this.steady()
                }
            })
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Report_Type'
            this.classificationData = dicData(code, ['Load_Type'])

            //console.log(`123`, this.classificationData);
        },

        area() {
            pvTree().then(res => {
                // console.log(res);
                if (res.code == 'A0000') {
                    this.formdata.options = res.data
                }
            })
        },
        // 切换选项
        handleNodeClick(data) {
            this.formdata.deptId = data.id
            this.$refs.selectTree1.blur()
            this.formdata.valueTitle = data.name
            this.formdata.defaultExpandedKey = []
        },

        close() {
            this.flag = true
            this.steady()
        },
        QueryClick(val) {
            this.id = val.id
            this.RowName = '模板内容'
            this.flag = false
            // this.$router.push({
            //   name: "CustomReport",
            //   params: {
            //     currentYearProportion: val.currentYearProportion
            //   }
            // });
        },
        EditClick(val) {
            this.id = val.id

            // this.area();
            //console.log(val, "editval");
            this.RowName = '修改报表模板'
            this.flag = false
            this.valList = val
            // this.dialogFormVisible = true;
            // // console.log(val,'valll');
            // this.formdata.valueTitle = val.deptName;
            // this.formdata.templateName = val.name;
            // this.formdata.createby = val.id;
            // this.formdata.deptId = val.deptId;
        },

        submit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.title = '新增'
                    this.flag = false
                    // this.$router.push({
                    //   name: "CustomReport",
                    //   params: { currentYearProportion: this.formdata ,
                    //  RowName: this.RowName},
                    // });
                } else {
                    //console.log("error submit!!");
                    return false
                }
            })
            // console.log(this.formdata, "formdata");
        },
        acceptTree(val) {
            // console.log(val, "val");
        },
        AddClick() {
            // this.area();
            this.title = '新增'
            this.flag = false
            this.RowName = '新增报表模板'
        },

        //方法调用获取稳态指标超标统计数据接口
        steady() {
            this.isLoading = true
            //获取报表模板信息
            getTemplateList({}).then(res => {
                this.isLoading = false

                this.totalData = res.data
                this.totalData.forEach(i => {
                    if (i.activation == 0) {
                        i.activation = '未激活'
                        i['isjihuo'] = false
                        // console.log(i, "iiii");
                    } else {
                        i.activation = '激活'
                        i['isjihuo'] = true
                    }
                })
                //console.log(this.totalData, "sdsdsdsdsd");
            })
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.currentPage = 1
            this.pageSize = val
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.currentPage = val
        },
        // 刪除
        DeleteClick(e) {
            this.$confirm('是否删除模板?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delTemplate({ tempId: e.id, deptId: e.deptId }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.steady()
                })
            })
        },
        //绑定部门开关
        departmentFlag(e) {
            this.valList = e
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 1000px;
    padding: 0;
    overflow: hidden;
    overflow-y: hidden;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

ul li > .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}

.el-tree-node__label {
    font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
    font-weight: 700;
    color: #409eff;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
    font-weight: normal;
    color: #606266;
}

.el-popper {
    z-index: 9999;
}
.ification_col {
    display: inline-block;
    width: 20px;
    height: 10px;
}
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 48%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }
            .el-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
::v-deep.mbbd.el-dialog .el-dialog__body {
    max-height: 70vh;
    padding: 20px 10px 10px 10px !important;
    //overflow-y: auto;
}
</style>
