<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="leftscript" 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="100px">
                        <el-form-item label="通用话术名称" prop="commonScriptName">
                            <el-input v-model="queryParams.commonScriptName" placeholder="请输入通用话术名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="话术名称" prop="scriptName">
                            <el-input v-model="queryParams.scriptName" placeholder="请输入话术名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="话术ID" prop="scriptId">
                            <el-input v-model="queryParams.scriptId" placeholder="请输入话术ID" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="平台ID" prop="platformId">
                            <el-input v-model="queryParams.platformId" 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="scriptList" @row-dblclick="handleselect">
                        <el-table-column label="序号" align="center" prop="sort" type="index" />
                        <el-table-column label="通用话术名称" align="center" prop="commonScriptName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="话术名称" align="center" prop="scriptName" :show-overflow-tooltip="true" />
                        <el-table-column label="话术ID" align="center" prop="scriptId" :show-overflow-tooltip="true" />
                        <el-table-column label="平台ID" align="center" prop="platformId" :show-overflow-tooltip="true" />
                        <el-table-column label="话术简介" align="center" prop="scriptIntroduction"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="病种名称" align="center" prop="diseaseTypeName"
                            :show-overflow-tooltip="true" />
                        <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.textMessageId">选择</el-button>
                                <el-button size="mini" type="text" @click="nohandleselect(scope.row)"
                                    v-if="handleselectId == scope.row.textMessageId">取消选择</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 { listScript, getScript, delScript, addScript, updateScript, departmentDisease, department, listDisease, listScriptNum } from "@/api/manage/script";
import stationAcatar from "../../system/stationAvatar/index.vue";
export default {
    components: { stationAcatar },
    name: "Script",
    data() {
        return {
            handleselectName: '',
            handleselectId: '',
            classificationOpen: false,
            itemname: null,
            departmentName: null,
            diseaseTypeName: null,
            name: '',
            departmentId: null,
            count: '',//全部
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 话术信息表格数据
            scriptList: [],
            DepartmentoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //分类管理
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                departmentId: null,
                departmentName: null,
                diseaseTypeId: null,
                diseaseTypeName: null,
                commonScriptName: null,
                scriptName: null,
                scriptId: null,
                platformId: null,
                scriptStatus: "NORMAL",
                scriptIntroduction: null,
                scriptSort: null,
                scriptRemark: null,
            },
            querydepartmen: {
                departmentName: "",
                // pageNum: 1,
                // pageSize: 10,
            },
        };
    },
    created() {
        this.getList();
        this.Departmentlist();
    },
    watch: {
        name(val) {
            this.querydepartmen.departmentName = val
            this.Departmentlist();
        }
    },
    methods: {
        nohandleselect() {
            this.handleselectId = ''
            this.handleselectName = ''
            this.$emit("on-template", { templateId: '', templateName: '', templateContent: "" });
        },
        handleselect(item) {
            this.handleselectId = item.id
            this.handleselectName = item.commonScriptName
            this.$emit("on-template", { templateId: item.id, templateName: item.commonScriptName, templateContent: item.scriptIntroduction });
            this.classificationOpen = false
        },
        classificationOpenfalse() {
            this.classificationOpen = false
        },
        // 左侧科室
        Departmentlist() {
            this.loading = true;
            this.querydepartmen.scriptStatus = "NORMAL"
            listScriptNum(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.scriptStatus = "NORMAL"
            listScript(this.queryParams).then(response => {
                this.scriptList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.departmentId = null;
            this.itemname = null;
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                departmentId: null,
                departmentName: null,
                diseaseTypeId: null,
                diseaseTypeName: null,
                commonScriptName: null,
                scriptName: null,
                scriptId: null,
                platformId: null,
                scriptStatus: 'NORMAL',
                scriptIntroduction: null,
                scriptSort: null,
                scriptRemark: null,
            }
            this.resetForm("queryForm");
            this.getList();
        },
    }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}

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

::v-deep .el-textarea__inner {
    width: 206px;
}

.leftscript {
    // width: 30%;
    height: 650px;
    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>