<template>
    <div class="header">
        <div class="leftheader">
            <div class="item" v-for="(item, index) in namelist" :key="index" @click="clicknameitem(item, index)"
                :class="index == itemindex ? 'selectitem' : ''">
                <div class="name">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="rightheader" v-if="categorylist.length > 0">
            <div class="richtext" v-if="itemindex == 1">
                <div class="text" style="font-size: 20px;"> 手动创建任务:</div>
                <div v-for="item in categorylist" :key="item.manageRouteId" style="margin: 0 auto 30px;">
                    <div class="texts">
                        <div class="text">
                            任务名称: {{ item.routeName }}
                        </div>
                        <div class="text">
                            适用范围: {{ item.suitRange == 'IN_THE_HOSPITAL' ? '在院' : '' }}
                            {{ item.suitRange == 'DISCHARGE' ? '出院' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? '门诊+出院' : "" }}
                        </div>
                    </div>
                    <div v-for="uitem in item.nodeList" :key="uitem.id">
                        <div class="texts">
                            <div class="text" style="font-size:14px;font-weight: 400;">
                                任务内容：{{ uitem.taskType == 'PHONE_OUTBOUND' ? "电话外呼" : "" }}
                                {{ uitem.taskType == 'QUESTIONNAIRE_SCALE' ? "问卷量表" : "" }}
                                {{ uitem.taskType == 'PROPAGANDA_ARTICLE' ? "宣教文案" : "" }}
                                {{ uitem.taskType == 'TEXT_REMIND' ? "文字提醒" : "" }}
                                {{ uitem.taskType == 'ARTIFICIAL_FOLLOW_UP' ? "人工随访" : "" }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PHONE_OUTBOUND'">
                                话术模板：{{ uitem.phoneTemplateName }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'">
                                问卷模板：{{ uitem.questionnaireName }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'">
                                问卷有效期：{{ uitem.questionExpirationDate }}天
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PROPAGANDA_ARTICLE'">
                                宣教模板：{{ uitem.propagandaTitle }}
                            </div>
                            <div class="textarea" v-if="uitem.taskType == 'TEXT_REMIND'">
                                提醒内容：{{ uitem.textRemindContent }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'ARTIFICIAL_FOLLOW_UP'">
                                人工随访模板：{{ uitem.questionnaireName }}
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'ARTIFICIAL_FOLLOW_UP'">
                                人工随访详情：<el-button @click="lookquestion(uitem)" style="padding: 6px 10px;">预览</el-button>
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'">
                                问卷模板详情：<el-button @click="lookquestion(uitem)" style="padding: 6px 10px;">预览</el-button>
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PROPAGANDA_ARTICLE'">
                                宣教模板详情：<el-button @click="lookpropaganda(uitem)"
                                    style="padding: 6px 10px;">预览</el-button>
                            </div>
                            <div class="text" style="font-size:14px;font-weight: 400;"
                                v-if="uitem.taskType == 'PHONE_OUTBOUND'">
                                话术模板详情：<el-button @click="lookphone(uitem)" style="padding: 6px 10px;">预览</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="richtext" v-if="itemindex == 0">
                <div class="text" style="font-size: 20px;">专病管理路径:</div>
                <div v-for="item in categorylist" :key="item.manageRouteId" style="margin: 0 auto 30px;">
                    <div class="texts">
                        <div class="text">
                            路径名称: {{ item.routeName }}
                        </div>
                        <div class="text">
                            适用范围: {{ item.suitRange == 'IN_THE_HOSPITAL' ? '在院' : '' }}
                            {{ item.suitRange == 'DISCHARGE' ? '出院' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                            {{ item.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? '门诊+出院' : "" }}
                        </div>
                        <div class="text">
                            路径详情: <el-button @click="lookspecialDiseaseNode(item)"
                                style="padding: 6px 10px;">预览</el-button>
                        </div>
                        <div class="text">
                        </div>
                        <div class="text">
                            触发条件:
                        </div>
                        <div class="text">
                        </div>
                        <div v-for="uitem in item.specialDiseaseRoute.triggerConditionList" :key="uitem.id" class="text"
                            style="font-weight: 400;width:100%">
                            <div class="tagtitle">
                                <span>
                                    {{ uitem.triggerConditionName == 'DIAGNOSIS' ? '诊断' : '' }}
                                    {{ uitem.triggerConditionName == 'DRESSING_CHANGE_DATE' ? '换药日期' : '' }}
                                    {{ uitem.triggerConditionName == 'TREATMENT_METHOD' ? '治疗方式' : '' }}
                                    {{ uitem.triggerConditionName == 'SURGICAL_NAME' ? '手术名称' : '' }}
                                    {{ uitem.triggerConditionName == 'DRUG_NAME' ? '药品名称' : '' }}
                                </span>
                                <span style="padding: 0;">
                                    {{ uitem.triggerConditionOperator == 'CONTAIN' ? '包含' : '' }}
                                    {{ uitem.triggerConditionOperator == 'NOT_CONTAIN' ? '不包含' : '' }}
                                    {{ uitem.triggerConditionOperator == 'EQUAL_TO' ? '等于' : '' }}
                                    {{ uitem.triggerConditionOperator == 'NOT_EQUAL_TO' ? '不等于' : '' }}
                                </span>
                                <span style="padding: 0;">
                                    {{ uitem.triggerConditionValue }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-empty description="暂无" style="width: 100%;" v-else></el-empty>
        <!-- 话术预览弹框 -->
        <el-dialog title="话术预览" :visible.sync="phoneopen" width="30%" :before-close="openfalse">
            <img style="width:200px" :src="baseUrl + lookitem.scriptFilePath" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="phoneopen = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 宣教预览弹框 -->
        <el-dialog title="宣教预览" :visible.sync="propagandaopen" width="30%" :before-close="openfalse">
            <div class="bodytop">
                <div class="titletop">文章模板:{{ lookitem.propagandaTitle }}</div>
                <div class="titledata">{{ lookitem.propagandaTitle }}</div>
                <img :src="baseUrl + lookitem.propagandaCoverPath" alt="" />
                <div class="know">知识卡片</div>
                <div v-html="lookitem.propagandaContent"></div>
            </div>
        </el-dialog>
        <!-- 问卷预览弹框 -->
        <questionopen ref="question" :lookitem="lookitem"></questionopen>
        <!-- 专病节点预览 -->
        <el-dialog title="专病节点预览" :visible.sync="specialDiseaseNodeopen" width="90%" v-if="specialDiseaseNodeopen">
            <specialDiseaseNodeopen :lookitem="lookitem">
            </specialDiseaseNodeopen>
        </el-dialog>
    </div>
</template>
<script>
import {
    getList
} from '@/api/manage/healthEducation'
import questionopen from './questionopen.vue';
import specialDiseaseNodeopen from './specialDiseaseNodeopen.vue';
export default {
    components: {
        questionopen,
        specialDiseaseNodeopen
    },
    name: "RehabilitationPlanandRecords",
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            //左侧list
            itemindex: 0,
            manageRouteId:'',
            namelist: [
                {
                    name: '专病管理路径'
                },
                {
                    name: '手动创建任务'
                },
            ],
            categorylist: [],
            query: {
                patientId: '',
                routeCheckStatus: 'AGREE',
                taskCreateType: 'MANUAL_MATCHE'
            },
            lookitem: {},
            phoneopen: false,
            propagandaopen: false,
            specialDiseaseNodeopen: false,
            loading: null,
        };
    },
    mounted() {
        this.info(0);
    },
    methods: {
        //查看专病节点
        lookspecialDiseaseNode(item) {
            this.lookitem = {
                routeName: item.routeName,
                suitRange: item.suitRange,
                id: item.specialDiseaseRoute.specialDiseaseRouteId,
                manageRouteId:this.manageRouteId,

            }
            this.specialDiseaseNodeopen = true
        },
        //查看宣教模板
        lookpropaganda(item) {
            this.lookitem = item.detailInfo
            this.propagandaopen = true
        },
        //查看话术模板
        lookphone(item) {
            this.lookitem = item.detailInfo
            this.phoneopen = true
        },
        //查看问卷模板
        lookquestion(item) {
            this.lookitem = item.detailInfo
            this.$refs.question.questionopentrue()
        },
        //关闭预览
        openfalse() {
            this.phoneopen = false
            this.propagandaopen = false
            this.lookitem = {}
        },
        clicknameitem(item, index) {
            this.loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            if (index == 1) {
                this.query.taskCreateType = 'MANUAL_CREATE'
            } else {
                this.query.taskCreateType = 'MANUAL_MATCHE'
            }
            this.info(index);
        },
        info(index) {
            this.loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            this.query.patientId = this.$route.query.patientId
            getList(this.query).then(res => {
                this.itemindex = index
                this.loading.close();
                this.categorylist = res.data
                this.manageRouteId=this.categorylist[0].manageRouteId
            })
        },
    }
};
</script>
<style lang="scss" scoped>
.bodytop {
    width: 96%;
    margin: 0 auto;

    .titletop {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0px 0 0;
    }

    .titledata {
        margin: 30px 0px 15px 0;
        font-size: 16px;
    }

    img {
        margin: 20px 0;
        width: 100%;
    }

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

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

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

.header {
    background-color: #fff !important;
    padding: 0 !important;
    display: flex;
    justify-content: space-between;

    .rightheader {
        width: 75%;
        padding-top: 20px;

        .tagtitle {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            margin: 0px;
            color: black;

            span {
                padding-left: 10px;
            }
        }

        .texts {
            margin: 16px 0 20px;
            flex-wrap: wrap;
            width: 100%;
            display: flex;
            font-size: 14px;

            .text {
                margin-bottom: 10px;
                width: 50%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
        }

        .richtext {
            overflow: scroll;
            // 隐藏表头的滚动条
            overflow-x: hidden !important;
            width: 100%;
            margin: 0 auto;
            height: 550px;

            .textarea {
                font-size: 14px;
                font-weight: 400;
                margin-bottom: 10px;
                width: 100%;
            }

            .text {
                font-size: 16px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
            }
        }
    }

    .leftheader {
        width: 20%;
        margin-top: 20px;
        height: 450px;
        overflow: scroll;
        // 隐藏表头的滚动条
        overflow-x: hidden !important;

        .selectitem {
            background-color: #D2E9FC;
            border-left: 2px solid #1890ff !important;
            border-bottom: 1px solid #fff !important;
        }

        .item {
            padding: 25px 10px;
            position: relative;
            border-left: 2px solid #fff;
            border-bottom: 1px solid #E7E7E7;

            .name {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
}
</style>
