<template>
    <div style="background-color:#F1F3F5">
        <div slot="footer" style="float: right;padding:10px 10px 0 0;height:35px">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="auditing">审核通过</el-button>
            <el-button size="mini" type="info" @click="ignore">忽略</el-button>
        </div>
        <div class="card">
            <div class="cardleft">
                <div class="title">
                    <div style="display: flex;align-items:center">
                        <img class="headsculpture" v-if="list.sex == 'MALE'" src="../../../assets/manage/touxiang.png">
                        <img class="headsculpture" v-else src="../../../assets/manage/nvtouxiang.png">
                        <div class="name">
                            {{ list.patientName ? list.patientName : '' }}
                        </div>
                        <div class="genderandage">
                            <span> {{ list.sex == 'MALE' ? "男" : '' }}
                                {{ list.sex == 'FEMALE' ? "女" : '' }}
                            </span>
                            <span v-if="list.sex && list.age" style="padding: 0 6px;">|</span>
                            <span v-if="list.age">{{ list.age }}岁</span>
                        </div>
                    </div>
                    <div class="source">
                        <div class="situation item">
                            {{ list.visitMethod == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                            {{ list.visitMethod == 'BE_IN_HOSPITAL' ? '住院' : '' }}
                        </div>
                        <div class="item" style="color:#00E06E;border-color:#00E06E"
                            v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'">
                            <img src="../../../assets/manage/gzh.png" alt="">
                            <div>
                                公众号
                            </div>
                        </div>
                        <div class="item" style="color:#339DE5;border-color:#339DE5"
                            v-if="list.patientSource == 'WE_CHAT_APPLET'">
                            <img src="../../../assets/manage/xcx.png" alt="">
                            <div>
                                小程序
                            </div>
                        </div>
                        <div class="item" style="color:#F4881F;border-color:#F4881F"
                            v-if="list.patientSource == 'MANAGE_END'">
                            <img src="../../../assets/manage/gld.png" alt="">
                            <div>
                                管理端
                            </div>
                        </div>
                    </div>
                </div>
                <div class="texts">
                    <div class="text">
                        医院: {{ list.hospitalAgencyName ? list.hospitalAgencyName : '' }}
                    </div>
                    <div class="text">
                        科室: {{ list.departmentName ? list.departmentName : '' }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
                        入院时间: {{ list.admissionTime }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
                        出院时间: {{ list.dischargeTime }}
                    </div>
                    <div class="text" v-if="list.visitMethod == 'OUTPATIENT_SERVICE'">
                        就诊时间: {{ list.dischargeTime }}
                    </div>
                </div>
                <el-descriptions title="诊断信息" style="margin:16px auto">
                    <el-descriptions-item label="主要诊断">{{ list.mainDiagnosis }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="手术信息" style="margin:16px auto;border-top: 1px solid #e6ebf5;"
                    v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                    <el-descriptions-item label="手术名称">{{ list.surgicalName }}</el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="入院记录" name="-1">
                        <div v-html="list.inHospitalInfo"></div>
                    </el-collapse-item>
                    <el-collapse-item title="手术记录" name="-2" v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                        <div v-html="list.surgicalRecord"></div>
                    </el-collapse-item>
                    <el-collapse-item title="出院记录" name="-3" v-if="list.visitMethod != 'OUTPATIENT_SERVICE'">
                        <div v-html="list.outHospitalInfo"></div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="cardright">
                <div class="text" style="font-size: 20px;"> 任务:</div>
                <div v-for="item in nodelist" :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>
        <!-- 话术预览弹框 -->
        <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="titletop">文章模板:{{ lookitem.propagandaTitle }}</div>
            <div class="bodytop">
                <div class="titledata">{{ lookitem.propagandaTitle }}</div>
                <div>
                    <img :src="baseUrl + lookitem.propagandaCoverPath" alt="" />
                    <div class="know">知识卡片</div>
                    <div class="knowlist">
                        {{ lookitem.propagandaContent }}
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 问卷预览弹框 -->
        <questionopen ref="question" :lookitem="lookitem"></questionopen>
        <!-- <el-dialog title="问卷预览" :visible.sync="questionopen" width="30%" :before-close="openfalse">
            <div class="titletop">文章模板:{{ lookitem.propagandaTitle }}</div>
            <div class="bodytop">
                <div class="titledata">{{ lookitem.propagandaTitle }}</div>
                <div>
                    <img :src="baseUrl + lookitem.propagandaCoverPath" alt="" />
                    <div class="know">知识卡片</div>
                    <div class="knowlist">
                        {{ lookitem.propagandaContent }}
                    </div>
                </div>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import {
    getRouteNodeList,
    getByPatientId,
    audit
} from '@/api/manage/Auditing.js'
import { getAge } from "@/utils/age";
import questionopen from '../components/questionopen.vue';
export default {
    components: {
        questionopen,
    },
    name: "Auditing",
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            activeNames: ['-1', '-2', '-3'],
            list: {},
            nodelist: [],
            lookitem: {},
            phoneopen: false,
            propagandaopen: false,
        };
    },
    created() {
        this.info();
    },
    methods: {
        //查看宣教模板
        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 = {}
        },
        // 忽略
        ignore() {
            let manageRouteNodeIds = []
            this.nodelist.map(e => {
                manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
            })
            this.$prompt('请输入忽略备注信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                let obj = {
                    routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
                    routeCheckRemark: value,
                    routeCheckStatus: 'DISAGREE',
                    manageRouteNodeIds: manageRouteNodeIds
                }
                audit(obj).then(res => {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        message: '已忽略,即将返回上一页',
                        duration: 3000
                    });
                    setTimeout(() => {
                        this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                            this.$router.push({
                                path: "/task/manualReview",
                            });
                        })
                    }, 3000);
                })
            })
        },
        //审核
        auditing() {
            let manageRouteNodeIds = []
            this.nodelist.map(e => {
                manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
            })
            this.$prompt('请输入审核备注信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                let obj = {
                    routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
                    routeCheckRemark: value,
                    routeCheckStatus: 'AGREE',
                    manageRouteNodeIds: manageRouteNodeIds
                }
                audit(obj).then(res => {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        message: '审核通过,即将返回上一页',
                        duration: 3000
                    });
                    setTimeout(() => {
                        this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                            this.$router.push({
                                path: "/task/manualReview",
                            });
                        })
                    }, 3000);
                })
            })
        },
        info() {
            getByPatientId(this.$route.query.patientId).then(res => {
                res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
                this.list = res.data
            })
            getRouteNodeList({ patientId: this.$route.query.patientId, taskCreateType: 'MANUAL_CREATE', routeCheckStatus: "UNAUDITED" }).then(res => {
                this.nodelist = res.data
            })
        },
        cancel() {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                    path: "/task/manualReview",
                });
            })
        },
    }
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    font-size: 16px;
    font-weight: bold;
}

.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;
    }
}

.card {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;
    height: calc(100vh - 119px);

    .cardleft {
        width: 35%;
        background-color: #fff;
        overflow: scroll;
        padding: 20px;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .source {
                display: flex;

                .situation {
                    background-color: #F1FAF7;
                    padding: 3px 6px;
                    color: #83CAC0 !important;
                    border: 1px solid #83CAC0 !important;
                }

                .item {
                    font-size: 14px;
                    margin-left: 5px;
                    border: 1px solid #fff;
                    padding: 3px 6px;
                    border-radius: 5px;
                    justify-content: center;
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 2px;
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            .name {
                padding: 0 6px;
            }

            .genderandage {
                padding: 0 6px;
            }

            .headsculpture {
                width: 35px;
                height: 35px;
            }
        }
    }

    .cardright {
        overflow: scroll;
        background-color: #fff;
        width: 62%;
        padding: 20px;
        font-size: 14px;

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

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

.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;
    }
}
</style>
