<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="left" 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="wechatTemplateName" label-width="100px">
                            <el-input v-model="queryParams.wechatTemplateName" placeholder="请输入模版名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="模板ID" prop="templateId">
                            <el-input v-model="queryParams.templateId" placeholder="请输入模板ID" clearable
                                @keyup.enter.native="handleQuery" />
                        </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="templateList" @row-dblclick="handleselect">
                        <el-table-column type="index" width="55" align="center" label="序号" />
                        <el-table-column label="微信模版名称" align="center" prop="wechatTemplateName" />
                        <el-table-column label="模板ID" align="center" prop="templateId" />
                        <el-table-column label="模板来源" align="center" prop="templateSource">
                            <template slot-scope="scope">
                                {{ scope.row.templateSource == "WE_CHAT_APPLET" ? "小程序" : "" }}
                                {{ scope.row.templateSource == "WE_CHAT_OFFICIAL_ACCOUNT" ? "公众号" : "" }}
                            </template>
                        </el-table-column>
                        <el-table-column label="适用任务类型" align="center" prop="suitTaskTypeName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
                        <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.templateId">选择</el-button>
                                <el-button size="mini" type="text" @click="nohandleselect(scope.row)"
                                    v-if="handleselectId == scope.row.templateId">取消选择</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 { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, listWechatTemplateNum, typelist } from "@/api/manage/template";
export default {
    props: ['templateId', 'templateName'],
    name: "miniProgram",
    data() {
        return {
            handleselectName: '',
            handleselectId: '',
            classificationOpen: false,
            count: '',//全部
            itemname: null,
            departmentName: null,
            diseaseTypeName: null,
            name: '',
            departmentId: null,
            DepartmentoList: [],//左侧数组
            // 左侧传值
            querydepartmen: {
                departmentName: "",
            },
            options: [{
                value: 'WE_CHAT_APPLET',
                label: '小程序'
            }, {
                value: 'WE_CHAT_OFFICIAL_ACCOUNT',
                label: '公众号'
            },],
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 微信模板信息表格数据
            templateList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                wechatTemplateName: null,
                departmentId: null,
                departmentName: null,
                diseaseTypeId: null,
                diseaseTypeName: null,
                templateId: null,
                templateContent: null,
                templateSource: null,
                templateSort: null,
                templateRemark: null,
            },
        };
    },
    watch: {
        name(val) {
            this.querydepartmen.departmentName = val
            this.Departmentlist();
        },
        templateId(newValue, oldValue) {
            this.handleselectId = newValue;
        },
        templateName(newValue, oldValue) {
            this.handleselectName = newValue;
        }
    },
    mounted() {
        this.handleselectId = this.templateId;
        this.handleselectName = this.templateName;
    },
    created() {
        this.getList();
        this.Departmentlist();
    },
    methods: {
        classificationOpenfalse() {
            this.classificationOpen = false
        },
        nohandleselect() {
            this.handleselectId = ''
            this.handleselectName = ''
            this.$emit("on-template", { templateId: '', templateName: '', templateContent: "" });
        },
        handleselect(item) {
            this.handleselectId = item.id
            this.handleselectName = item.wechatTemplateName
            this.$emit("on-template", { templateId: item.id, templateName: item.wechatTemplateName, templateContent: item.textMessageContent });
            this.classificationOpen = false
        },
        /** 查询微信模板信息列表 */
        getList() {
            this.loading = true;
            this.queryParams.templateSource = "WE_CHAT_APPLET"
            listTemplate(this.queryParams).then(response => {
                this.templateList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 左侧科室列表
        Departmentlist() {
            this.loading = true;
            this.querydepartmen.templateSource = "WE_CHAT_APPLET"
            listWechatTemplateNum(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()
            }
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.departmentId = null;
            this.itemname = null;
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

.app-container {
    display: inline-block;
    padding: 0 !important;
}

.left {
    height: 530px;
    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;
}
</style>