<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 style="padding: 10px 0;">
                            <el-input v-model="departmentName" placeholder="请输入科室名称" clearable
                                @keyup.enter.native="getTreeselect" />
                        </div>
                        <div class="listitem" v-for="(item, index) in deptOptions" :key="index"
                            @click="clickDepartmenitem(item)">
                            <div :class="queryParams.departmentId == 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" label-width="70px">
                        <el-form-item label="问卷标题" prop="questionnaireName">
                            <el-input v-model="queryParams.questionnaireName" placeholder="请输入问卷标题" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="病种名称" prop="diseaseTypeName">
                            <el-input v-model="queryParams.diseaseTypeName" placeholder="请输入病种名称" 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="questionList" @row-dblclick="handleselect">
                        <el-table-column label="序号" type="index" width="55" align="center" />
                        <el-table-column label="问卷模板名称" align="center" prop="questionnaireName" />
                        <el-table-column label="问题个数" align="center" prop="questionCount" />
                        <el-table-column label="问卷模板ID" align="center" prop="questionnaireId" />
                        <el-table-column label="问卷状态" align="center" prop="questionnaireStatus">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.questionnaireStatus" active-color="#13ce66"
                                    inactive-color="#ff4949" active-value="PUBLISHED" inactive-value="UNPUBLISHED"
                                    disabled @change="switchstatus($event, scope.row)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <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.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 { listQuestion, getQuestion, delQuestion, addQuestion, updateQuestion, getDepartmentList, selectUserDepartment, diseaseList, updateclassification } from "@/api/system/question";

export default {
    name: "Question",
    props: ['templateId', 'templateName'],
    data() {
        return {
            classificationOpen: false,
            //科室名称
            departmentName: '',
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 部门树选项
            deptOptions: undefined,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 问卷基本信息表格数据
            questionList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                departmentId: null,
                departmentName: null,
                diseaseTypeName: null,
                questionnaireName: null,
                questionnaireStatus: "PUBLISHED",
            },
            handleselectId: '',
            handleselectName: null,
        };
    },
    watch: {
        // 根据名称筛选部门树
        departmentName(val) {
            // this.getTreeselect()
        }
    },
    created() {
        this.getTreeselect();
        this.getList();
    },
    mounted() {
        this.handleselectId = this.templateId
        this.handleselectName = this.templateName
    },
    watch: {
        templateId(newValue, oldValue) {
            if (newValue) {
                this.handleselectId = newValue;
            }
        },
        templateName(newValue, oldValue) {
            if (newValue) {
                this.handleselectName = newValue;
            }
        }
    },
    methods: {
        clickDepartmenitem(item) {
            this.loading = true;
            this.queryParams.departmentId = item.id;
            this.getList();
        },
        nohandleselect() {
            this.handleselectId = ''
            this.handleselectName = ''
            this.$emit("on-template", { templateId: '', templateName: '' });
        },
        handleselect(item) {
            this.handleselectId = item.id
            this.handleselectName = item.questionnaireName
            this.$emit("on-template", { templateId: item.id, templateName: item.questionnaireName });
            this.classificationOpen = false
        },
        classificationOpenfalse() {
            this.classificationOpen = false
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.departmentId = data.id;
            this.handleQuery();
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 查询科室下拉树结构 */
        getTreeselect() {
            getDepartmentList({
                departmentName: this.departmentName,
                questionnaireStatus: "PUBLISHED",
            }).then(response => {
                // response.data.forEach(e => {
                //     e.label = e.departmentName
                // })
                this.deptOptions = response.data;
            });
        },
        /** 查询问卷基本信息列表 */
        getList() {
            this.loading = true;
            listQuestion(this.queryParams).then(response => {
                this.questionList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
};
</script>
<style scoped lang="scss">
.app-container {
    padding: 0 !important;
}

.left {
    height: 500px;
    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: 50%;
            transform: translateY(-50%);
            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>