<template>
    <div class="app-container">
        <el-button size="small" @click="classificationOpen = true" style="width: 200px;font-size:14px;text-align:left"
            :style="handleselectName ? 'color:black' : 'color:#C0C4CC'">{{ handleselectName ? handleselectName :
                '选择宣教模板' }}</el-button>
        <el-dialog title="宣教库模板选择" :visible.sync="classificationOpen" width="70%"
            :before-close="classificationOpenfalse">
            <el-row :gutter="20">
                <!--部门数据-->
                <el-col :span="6" :xs="24">
                    <div class="leftpro" ref="box">
                        <div class="name">科室名称</div>
                        <div>
                            <el-input v-model="name" placeholder="请输入科室名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </div>
                        <div class="listitem">
                            <div :class="itemname == 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="itemname == item.id ? 'allactive' : 'all'">
                                {{ item.departmentName }}
                            </div>
                            <span class="count">{{ item.countNum }}</span>
                        </div>
                    </div>
                </el-col>
                <!--用户数据-->
                <el-col :span="18" :xs="24">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="宣教名称" prop="propagandaTitle">
                            <el-input v-model="queryParams.propagandaTitle" placeholder="请输入宣教名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="宣教类型" prop="propagandaType">
                            <el-select v-model="queryParams.propagandaType" placeholder="请选择">
                                <el-option v-for="item in optionstype" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="loading" :data="propagandaList" @row-dblclick="handleselect">
                        <el-table-column label="序号" align="center" prop="id" type="index" />
                        <el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
                        <el-table-column label="宣教名称" align="center" prop="propagandaTitle"
                            :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="宣教ID" align="center" prop="propagandaCode"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="宣教类型" align="center" prop="propagandaType">
                            <template slot-scope="scope">
                                {{ scope.row.propagandaType == "MEDICATION_KNOWLEDGE" ? "用药知识" : "" }}
                                {{ scope.row.propagandaType == "DISEASE_POPULARIZATION" ? "疾病科普" : "" }}
                                {{ scope.row.propagandaType == "SPORT_NUTRITION" ? "运动营养" : "" }}
                                {{ scope.row.propagandaType == "OTHER_KNOWLEDGE" ? "其他知识" : "" }}
                                {{ scope.row.propagandaType == "CUSTOMIZED_CONTENT" ? "定制内容" : "" }}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" align="center" prop="createTime" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleselect(scope.row)"
                                    v-if="handleselectId != scope.row.id">选择</el-button>
                                <el-button size="mini" type="text" @click="nohandleselect(scope.row)"
                                    v-if="handleselectId == scope.row.id">取消选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { listPropaganda, getPropaganda, delPropaganda, addPropaganda, updatePropaganda, selectNumByDept, copy, updateStatus } from "@/api/manage/propaganda";
import stationAcatar from "../../system/stationAvatar/index.vue";
export default {
    name: "propaganda",
    props: ['templateId', 'templateName'],
    components: { stationAcatar },
    data() {
        return {
            handleselectName: '',
            handleselectId: '',
            classificationOpen: false,
            itemname: null,
            departmentName: null,
            name: '',
            count: '',//全部
            DepartmentoList: [],//左侧数组
            // 左侧传值
            querydepartmen: {
                departmentName: "",
                // pageNum: 1,
                // pageSize: 10,
            },
            optionstype: [{
                value: 'MEDICATION_KNOWLEDGE',
                label: '用药知识'
            }, {
                value: 'DISEASE_POPULARIZATION',
                label: '疾病科普'
            }, {
                value: 'SPORT_NUTRITION',
                label: '运动营养'
            }, {
                value: 'OTHER_KNOWLEDGE',
                label: '其他知识'
            }, {
                value: 'CUSTOMIZED_CONTENT',
                label: '定制内容'
            }],
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 患者宣教信息表格数据
            propagandaList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                patientId: null,
                propagandaId: null,
                departmentName: null,
                createTimeStart: null,
                createTimeEnd: null,
                propagandaTitle: null,
                propagandaType: null,
                propagandaCode: null,
                propagandaContent: null,
                propagandaCoverPath: null,
                articleSummary: null,
                voicebroadcast: null,
                diseaseTypeName: null,
                propagandaLink: null,
                propagandaBarcodePath: null,
            },
        };
    },
    mounted() {
        this.handleselectId = this.templateId
        this.handleselectName = this.templateName
    },
    watch: {
        templateId(newValue, oldValue) {
            this.handleselectId = newValue;
        },
        templateName(newValue, oldValue) {
            this.handleselectName = newValue;
        }
    },
    computed: {
        pickerStartTime() {
            return {
                disabledDate: (time) => {
                    if (this.queryParams.createTimeEnd) {
                        let edtTime = this.queryParams.createTimeEnd.replace(/-/g, "/");
                        return time.getTime() > new Date(edtTime);
                    }
                },
            };
        },
        pickerEndTime() {
            return {
                disabledDate: (time) => {
                    if (this.queryParams.createTimeStart) {
                        let startTime = this.queryParams.createTimeStart.replace(/-/g, "/");
                        return time.getTime() < new Date(startTime);
                    }
                },
            };
        },
    },
    created() {
        this.Departmentlist();
        this.getList();
    },
    watch: {
        name(val) {
            this.querydepartmen.departmentName = val
            this.Departmentlist();
        }
    },
    methods: {
        nohandleselect() {
            this.handleselectId = ''
            this.handleselectName = ''
            this.$emit("on-template", { templateId: '', templateName: '' });
        },
        handleselect(item) {
            this.handleselectId = item.id
            this.handleselectName = item.propagandaTitle
            this.$emit("on-template", { templateId: item.id, templateName: item.propagandaTitle });
            this.classificationOpen = false
        },
        classificationOpenfalse() {
            this.classificationOpen = false
        },
        // 开始时间
        changecreateTimeStart(e) {
            this.queryParams.createTimeStart = e
        },
        // 结束时间
        changecreateTimeEnd(e) {
            this.queryParams.createTimeEnd = e
        },
        // 左侧科室列表
        Departmentlist() {
            this.loading = true;
            this.querydepartmen.propagandaStatus = 'APPROVED'
            selectNumByDept(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;
                });
                this.loading = false;
            });
        },
        // 左侧科室
        itemdata(item) {
            if (item) {
                this.itemname = item.id
                // this.departmentName = item.departmentName
                this.loading = true;
                this.queryParams.departmentId = item.id
                this.getList()
            } else {
                this.queryParams.departmentId = ''
                this.itemname = null
                this.getList()
            }
        },
        /** 查询患者宣教信息列表 */
        getList() {
            this.loading = true;
            this.queryParams.propagandaStatus = 'APPROVED'
            listPropaganda(this.queryParams).then(response => {
                this.propagandaList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
};
</script>
<style lang="scss" scoped>
.app-container {
    padding: 0 !important;
}

.propagandaselect {
    width: 100px;
    height: 100px;
    background: #fafafa;

    .add {
        color: #b6b6b7;
        font-size: 22px;
        line-height: 100px;
        text-align: center; //水平居中
        // margin: 0 auto;
    }
}

.leftpro {
    height: 760px;
    overflow: auto;

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

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

        .count {
            display: inline-block;
            position: absolute;
            left: 210px;
            color: #a4a6aa;
            top: 10px;
            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;
        }
    }
}

.button {
    display: inline-block;
    position: relative;
    left: 20px;
    top: -11px;
}

audio {
    width: 350px;

    // background: #4d9de7;
}

.titletop {
    font-size: 16px;
    font-weight: 700;
}

.bodytop {
    position: relative;
    top: 20px;
    height: 500px;
    overflow: auto;
    border: 1px solid #e2e2e2;

    .titledata {
        margin: 30px 0px 15px 30px;
        top: 14px;
        font-size: 20px;
    }

    .audiotop {
        margin: 10px 0px 10px 30px;
    }

    img {
        // width: 100%;
        // width: 362px;
        // height: 127px;
        margin: 0px 0px 0px 30px;
    }

    .know {
        margin: 11px 0px 10px 30px;
        font-size: 16px;
    }

    .knowlist {
        margin: 10px 0px 10px 30px;
        font-size: 16px;
    }
}

.viewbody {
    width: 100%;
    height: 500px;
    // background: #409eff;
    display: flex;

    .left {
        overflow: auto;
        width: 77%;
        height: 500px;

        // background: #989992;
        video {
            height: 500px;
            width: 100%;
        }
    }

    img {
        // height: 100%;
        // width: 100%;
    }

    .right {
        width: 20%;
        // background: red;
        overflow: auto;
        margin-left: 30px;

        .nametitle {
            font-size: 14px;
            font-weight: 600;
        }

        .nameitem {
            color: #959595;
            margin: 13px;
        }
    }
}

.bodytopxj {
    width: 100%;
    display: flex;
    white-space: wrap;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;

    // align-content: space-between;
    .bodylist {
        width: 31%;
        height: 221px;
        border: 2px solid #e2e3e5;
        border-radius: 10px;
        position: relative;
        // margin-bottom: 10px;
        margin: 6px;

        .texttitle {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 700;
            margin: 5px 0px 5px 10px;
        }

        //
        .dataliat {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0px 0px 5px 10px;
            font-size: 12px;
            color: #989992;
        }

        .bq {
            width: 155px;
        }

        img {
            width: 100%;
            height: 100px;
        }

        .label {
            position: absolute;
            right: 18px;
            color: #409eff;
            bottom: 23px;
            font-size: 13px;
        }
    }
}
</style>