<template>
    <div class="app-container">
        <el-form ref="form" :inline="true" :model="form" label-width="140px">
            <el-form-item label="编辑专病管理路径">
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button @click="back">返回</el-button>
                <el-button type="primary" @click="preserve">保存</el-button>
                <!-- <el-button type="primary">发布</el-button> -->
            </el-form-item>
        </el-form>
        <el-form ref="form" :inline="true" :model="form" label-width="100px" :rules="rules">
            <el-form-item label="路径名称" prop="routeName">
                <el-input v-model="form.routeName" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="病种名称" required>
                <div>
                    {{ $route.query.diseaseTypeName }}
                </div>
            </el-form-item>
            <el-form-item label="版本号" prop="version">
                <el-input v-model="form.version" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item style="float: right;">
                <!-- <el-button type="primary" plain size="mini">AI生成触发条件</el-button> -->
                <!-- <el-button type="primary" plain size="mini" @click="add">人工添加主路径</el-button> -->
                <el-button type="primary" plain size="mini" @click="goManageNodeInformation">人工添加触发条件</el-button>
            </el-form-item>
        </el-form>
        <el-form label-width="100px" ref="form" :model="form" :rules="rules">
            <el-form-item label="所属服务包" prop="servicePackageId">
                <el-select v-model="form.servicePackageId" placeholder="请选择所属服务包" style="width:600px" multiple>
                    <el-option v-for="item in addpackagelist" :key="item.id" :label="item.packageName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <div class="list" v-if="list">
            <div class="item">
                <div class="title">
                    <el-tag>主路径</el-tag>
                    <span>{{ list.routeName }}</span>
                </div>
                <div class="progress">
                    <span>审核进度</span>
                    <el-progress :text-inside="true" :stroke-width="13" :percentage="list.percentage"></el-progress>
                    <span>{{ list.agreeNumber + ' / ' + list.totalNumber }}</span>
                </div>
                <div class="title" style="width:240px">
                    <span>适用范围:</span>
                    <span>
                        {{ list.suitRange == 'IN_THE_HOSPITAL' ? '在院' : '' }}
                        {{ list.suitRange == 'DISCHARGE' ? '出院' : '' }}
                        {{ list.suitRange == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                        {{ list.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? '门诊+出院' : '' }}
                    </span>
                </div>
                <div>
                    <i class="el-icon-edit" @click.stop="edit"></i>
                    <!-- <i class="el-icon-delete" @click.stop="delspecialDiseaseRoute"></i> -->
                </div>
            </div>
            <div class="item" v-for="item in list.triggerConditionList" :key="item.triggerConditionId">
                <!-- @click.stop="goManageNodeInformation(item)" -->
                <div class="title">
                    <el-tag type="success">触发条件</el-tag>
                    <span>
                        {{ item.triggerConditionName == 'DIAGNOSIS' ? '诊断' : '' }}
                        {{ item.triggerConditionName == 'DRESSING_CHANGE_DATE' ? '换药日期' : '' }}
                        {{ item.triggerConditionName == 'TREATMENT_METHOD' ? '治疗方式' : '' }}
                        {{ item.triggerConditionName == 'SURGICAL_NAME' ? '手术名称' : '' }}
                        {{ item.triggerConditionName == 'DRUG_NAME' ? '药品名称' : '' }}
                    </span>
                    <span style="padding: 0;">
                        {{ item.triggerConditionOperator == 'CONTAIN' ? '包含' : '' }}
                        {{ item.triggerConditionOperator == 'NOT_CONTAIN' ? '不包含' : '' }}
                        {{ item.triggerConditionOperator == 'EQUAL_TO' ? '等于' : '' }}
                        {{ item.triggerConditionOperator == 'NOT_EQUAL_TO' ? '不等于' : '' }}
                    </span>
                    <span style="padding: 0;">
                        {{ item.triggerConditionValue }}
                    </span>
                </div>
                <div class="progress">
                </div>
                <div class="title" style="width:240px">
                    <span>适用范围:</span>
                    <span>
                        {{ list.suitRange == 'IN_THE_HOSPITAL' ? '在院' : '' }}
                        {{ list.suitRange == 'DISCHARGE' ? '出院' : '' }}
                        {{ list.suitRange == 'OUTPATIENT_SERVICE' ? '门诊' : '' }}
                        {{ list.suitRange == 'OUTPATIENT_SERVICE_DISCHARGE' ? '门诊+出院' : '' }}
                    </span>
                </div>
                <div>
                    <!-- @click.stop="goManageNodeInformation" -->
                    <i class="el-icon-edit" @click="triggerConditionedit(item)"></i>
                    <i class="el-icon-delete" @click="deltriggerCondition(item)"></i>
                </div>
            </div>
        </div>
        <!-- 添加触发条件 -->
        <el-dialog title="添加触发条件" :visible.sync="open" width="800px" append-to-body>
            <el-button type="primary" plain size="mini" @click="addtriggerCondition"
                style="float: right;">添加触发条件</el-button>
            <el-descriptions title="触发条件">
            </el-descriptions>
            <el-form ref="updata" :model="updata" :rules="rules" label-width="80px">
                <div class="node" v-for="(item, index) in updata.triggerConditionList" :key="index"
                    :style="updata.triggerConditionList.length > 1 ? '' : 'margin:0'">
                    <div style="display: inline-block;margin-right:20px">触发条件{{ index + 1 }}</div>
                    <el-select v-model="item.triggerConditionName" style="width:120px">
                        <el-option label="诊断" value="DIAGNOSIS" />
                        <el-option label="换药日期" value="DRESSING_CHANGE_DATE" />
                        <el-option label="治疗方式" value="TREATMENT_METHOD" />
                        <el-option label="手术名称" value="SURGICAL_NAME" />
                        <el-option label="药品名称" value="DRUG_NAME" />
                    </el-select>
                    <el-select v-model="item.triggerConditionOperator" style="width: 100px;">
                        <el-option label="包含" value="CONTAIN" />
                        <el-option label="不包含" value="NOT_CONTAIN" />
                        <el-option label="等于" value="EQUAL_TO" />
                        <el-option label="不等于" value="NOT_EQUAL_TO" />
                    </el-select>
                    <!-- <el-select v-model="item.suitRange" style="width: 120px;">
                        <el-option label="在院" value="IN_THE_HOSPITAL" />
                        <el-option label="出院" value="DISCHARGE" />
                        <el-option label="门诊" value="OUTPATIENT_SERVICE" />
                        <el-option label="门诊+出院" value="OUTPATIENT_SERVICE_DISCHARGE" />
                    </el-select> -->
                    <el-input v-model="item.triggerConditionValue" style="width: 300px;"
                        placeholder="请输入触发条件"></el-input>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="upload">确 定</el-button>
                <el-button @click="openfalse">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改触发条件 -->
        <el-dialog title="修改触发条件" :visible.sync="editopen" width="800px" append-to-body>
            <!-- <el-button type="primary" plain size="mini" @click="addtriggerCondition"
                style="float: right;">添加触发条件</el-button> -->
            <el-descriptions title="触发条件">
            </el-descriptions>
            <el-form ref="updataform" :model="updataform" :rules="rules" label-width="80px">
                <el-select v-model="updataform.triggerConditionName" style="width:120px">
                    <el-option label="诊断" value="DIAGNOSIS" />
                    <el-option label="换药日期" value="DRESSING_CHANGE_DATE" />
                    <el-option label="治疗方式" value="TREATMENT_METHOD" />
                    <el-option label="手术名称" value="SURGICAL_NAME" />
                    <el-option label="药品名称" value="DRUG_NAME" />
                </el-select>
                <el-select v-model="updataform.triggerConditionOperator" style="width: 100px;">
                    <el-option label="包含" value="CONTAIN" />
                    <el-option label="不包含" value="NOT_CONTAIN" />
                    <el-option label="等于" value="EQUAL_TO" />
                    <el-option label="不等于" value="NOT_EQUAL_TO" />
                </el-select>
                <!-- <el-select v-model="updataform.suitRange" style="width: 120px;">
                        <el-option label="在院" value="IN_THE_HOSPITAL" />
                        <el-option label="出院" value="DISCHARGE" />
                        <el-option label="门诊" value="OUTPATIENT_SERVICE" />
                        <el-option label="门诊+出院" value="OUTPATIENT_SERVICE_DISCHARGE" />
                    </el-select> -->
                <el-input v-model="updataform.triggerConditionValue" style="width: 300px;"
                    placeholder="请输入触发条件"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editupload">确 定</el-button>
                <el-button @click="editopenfalse">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    updateSpecialDiseaseRoute,
} from "@/api/system/specialDiseaseRoute";
import {
    specialDiseaseRoute, triggerConditiondel, specialDiseaseRoutedel, triggerConditionadd, triggerCondition, triggerConditionedit
} from "@/api/system/editorialSpecialization";
import {
    servicepackageinfo
} from '@/api/manage/signRecord.js'
export default {
    name: "editorialSpecialization",
    data() {
        return {
            form: {
                version: '',
                routeName: '',
                id: '',
                diseaseTypeName: '',
                servicePackageId: [],
                routePackageList: [],
            },
            open: false,
            updata: {
                triggerConditionList: [{
                    routeId: '',
                    routeName: '',
                    triggerConditionName: '',
                    triggerConditionOperator: '',
                    triggerConditionValue: '',
                }],
            },
            editopen: false,
            updataform: {},
            // 表单校验
            rules: {
                servicePackageId: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                routeName: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                version: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
            },
            list: {},
            addpackagelist: [],
        };
    },
    created() {
        this.form.version = this.$route.query.version
        this.form.routeName = this.$route.query.routeName
        this.form.id = this.$route.query.id
        this.form.diseaseTypeName = this.$route.query.diseaseTypeName
        this.info();
    },
    watch: {
    },
    methods: {
        info() {
            specialDiseaseRoute(this.$route.query.id).then(res => {
                this.list = res.data
                this.list.percentage = this.list.agreeNumber / this.list.totalNumber * 100
                res.data.routePackageList?.forEach(e => {
                    e.servicePackageId ? this.form.servicePackageId.push(e.servicePackageId) : ''
                })
                //服务包
                servicepackageinfo({ departmentId: res.data.departmentId }).then(res => {
                    this.addpackagelist = res.data
                })
            })
        },
        edit() {
            this.$router.push({
                path: "/specialdisease/specialDiseaseNode",
                query: {
                    routeName: this.list.routeName,
                    suitRange: this.list.suitRange,
                    id: this.list.specialDiseaseRouteId
                },
            });
        },
        add() {
            this.$router.push({
                path: "/specialdisease/specialDiseaseNode",
                query: {
                    routeName: this.list.routeName,
                    suitRange: this.list.suitRange,
                    id: this.list.specialDiseaseRouteId
                },
            });
        },
        goManageNodeInformation() {
            this.open = true
            // this.$router.push({
            //     path: "/specialdisease/ManageNodeInformation",
            //     query: {
            //         suitRange: this.list.suitRange
            //     },
            // });
        },
        addtriggerCondition() {
            this.updata.triggerConditionList.push({
                routeId: '',
                routeName: '',
                triggerConditionName: '',
                triggerConditionOperator: '',
                triggerConditionValue: '',
            })
        },
        editopenfalse() {
            this.updataform = {}
            this.editopen = false
            this.resetForm("updataform");
        },
        editupload() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            triggerConditionedit(this.updataform).then(res => {
                loading.close();
                this.$notify({
                    type: 'success',
                    title: '提示',
                    message: '修改触发条件成功',
                });
                this.info();
                this.editopenfalse();
            })
        },
        openfalse() {
            this.updata.triggerConditionList = [{
                routeId: '',
                routeName: '',
                triggerConditionName: '',
                triggerConditionOperator: '',
                triggerConditionValue: '',
            }]
            this.open = false
            this.resetForm("updata");
        },
        upload() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.updata.triggerConditionList.forEach(e => {
                e.routeId = this.$route.query.id
                e.routeName = this.$route.query.routeName
            })
            triggerConditionadd(this.updata).then(res => {
                loading.close();
                this.$notify({
                    type: 'success',
                    title: '提示',
                    message: '新增触发条件成功',
                });
                this.info();
                this.openfalse();
            })
        },
        //保存
        preserve() {
            if (this.form.servicePackageId?.length > 0 && this.addpackagelist?.length > 0) {
                let routePackageList = []
                this.addpackagelist.forEach(e => {
                    this.form.servicePackageId.forEach(el => {
                        if (e.id == el) {
                            let item = {
                                servicePackageId: el,
                                packageName: e.packageName
                            }
                            routePackageList.push(item)
                        }
                    })
                })
                this.form.routePackageList = routePackageList
            }
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.$confirm('是否确认保存?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        updateSpecialDiseaseRoute(this.form).then(response => {
                            this.$notify({
                                type: 'success',
                                title: '提示',
                                message: '保存成功,即将返回上一页',
                                duration: 3000
                            });
                            setTimeout(() => {
                                this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                                    this.$router.push({
                                        path: "/specialdisease/specialDiseaseRoute",
                                    });
                                })
                            }, 3000);
                        });
                    })
                }
            })
        },
        //触发条件修改详情
        triggerConditionedit(item) {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            triggerCondition(item.triggerConditionId).then(res => {
                loading.close();
                this.editopen = true
                this.updataform = res.data
            }).catch(() => {
                loading.close();
            });
        },
        //删除触发条件
        deltriggerCondition(item) {
            this.$confirm('确定删除此触发条件吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                triggerConditiondel([item.triggerConditionId]).then(res => {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        message: '删除成功',
                        duration: 3000
                    });
                    this.info();
                })
            })
        },
        back() {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                    path: "/specialdisease/specialDiseaseRoute",
                });
            })
        },
    },
};
</script>
<style lang="scss" scoped>
.node {
    margin-bottom: 10px;
}

.list {
    width: 100%;
    background-color: #F2F3F5;
    padding: 28px 0;

    .item {
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        background-color: #fff;
        width: 96%;
        margin: 0 auto 28px;

        .el-icon-edit {
            cursor: pointer;
        }

        .el-icon-delete {
            cursor: pointer;
            padding-left: 16px;
        }

        .progress {
            width: 450px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            ::v-deep .el-progress {
                width: 300px;
            }

            ::v-deep .el-progress-bar__innerText {
                display: none;
            }
        }

        .title {
            width: 400px;
            display: flex;
            align-items: center;
            margin: 0px;
            color: black;

            span {
                padding-left: 10px;
            }
        }
    }
}
</style>