<template>
    <div class="left">
        <div class="name">科室名称</div>
        <div>
            <el-input v-model="querydepartmen.departmentName" placeholder="请输入科室名称" clearable
                @keyup.enter.native="Departmentlist" />
        </div>
        <div class="listitem">
            <div :class="itemid == null ? 'allactive' : 'all'" @click="itemdata()">
                全部
            </div>
            <span class="count">{{ count }}</span>
        </div>
        <div class="listitem" v-for="(item, index) in DepartmentoList" :key="index" @click="itemdata(item)">
            <div :class="itemid == item.id ? 'allactive' : 'all'">
                {{ item.departmentName }}
            </div>
            <span class="count">{{ item.countNum }}</span>
        </div>
    </div>
</template>

<script>
import { listOperationNum } from "@/api/operationInfo/operationInfo";
export default {
    name: "DepartmentList",
    data() {
        return {
            //校验
            itemid: null,
            // 表格数据
            DepartmentoList: [],
            count: '',
            // 查询参数
            querydepartmen: {
                departmentName: "",
            },
        };
    },
    created() {
        this.Departmentlist();
    },
    watch: {
        name(val) {
            this.querydepartmen.departmentName = val
            this.Departmentlist();
        },
    },
    mounted() {
    },
    methods: {
        // 左侧科室
        itemdata(item) {
            if (item) {
                this.itemid = item.id
            } else {
                this.itemid = null
            }
        },
        // 左侧科室
        Departmentlist() {
            listOperationNum(this.querydepartmen).then(response => {
                this.DepartmentoList = response.data;
                let sum = 0;
                this.DepartmentoList.forEach((item) => {
                    if (item.countNum != null) {
                        sum += item.countNum;
                    }
                    this.count = sum;
                });
            });
        },
    }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

.left {
    // height: calc(100vh - 119px);
    height: 100%;
    overflow: auto;

    .name {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .listitem {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #dcdfe6;

        .count {
            display: inline-block;
            position: relative;
            // right: -172px;
            left: 210px;
            color: #a4a6aa;
            top: -35px;
            font-size: 13px;
        }

        .all {
            height: 50px;
            line-height: 50px;
            padding-left: 13px;
        }

        .allactive {
            background: #e8f4ff;
            height: 50px;
            line-height: 50px;
            padding-left: 13px;
            border-left: 3px solid #4d9de7;
        }
    }
}
</style>