<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 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="80px" :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>
        <div class="list" v-if="list">
            <div class="item" @click.stop="edit">
                <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.triggerConditionOperator == 'CONTAIN' ? '包含' : '' }}
                        {{ item.triggerConditionOperator == 'NOT_CONTAIN' ? '不包含' : '' }}
                        {{ item.triggerConditionOperator == 'EQUAL_TO' ? '等于' : '' }}
                        {{ item.triggerConditionOperator == 'NOT_EQUAL_TO' ? '不等于' : '' }}
                    </span>
                    <span style="padding: 0;">
                        {{ item.triggerConditionName == 'DIAGNOSIS' ? '诊断' : '' }}
                        {{ item.triggerConditionName == 'DRESSING_CHANGE_DATE' ? '换药日期' : '' }}
                        {{ item.triggerConditionName == 'TREATMENT_METHOD' ? '治疗方式' : '' }}
                        {{ item.triggerConditionName == 'SURGICAL_NAME' ? '手术名称' : '' }}
                        {{ item.triggerConditionName == 'DRUG_NAME' ? '药品名称' : '' }}
                    </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"></i>
                    <i class="el-icon-delete"></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>
    </div>
</template>

<script>
import {
    updateSpecialDiseaseRoute,
} from "@/api/system/specialDiseaseRoute";
import {
    specialDiseaseRoute, selectSpecialDisease, triggerConditiondel, specialDiseaseRoutedel, triggerConditionadd
} from "@/api/system/editorialSpecialization";
export default {
    name: "editorialSpecialization",
    data() {
        return {
            form: {
                version: '',
                routeName: '',
                id: '',
                diseaseTypeName: '',
            },
            open: false,
            updata: {
                triggerConditionList: [{
                    routeId: '',
                    routeName: '',
                    triggerConditionName: '',
                    triggerConditionOperator: '',
                    triggerConditionValue: '',
                }],
            },
            // 表单校验
            rules: {
                routeName: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                version: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
            },
            list: undefined,
        };
    },
    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
            })
        },
        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: '',
            })
        },
        openfalse() {
            this.updata.triggerConditionList = [{
                routeId: '',
                routeName: '',
                triggerConditionName: '',
                triggerConditionOperator: '',
                triggerConditionValue: '',
            }]
            this.open = false
            this.resetForm("updata");
        },
        upload() {
            this.updata.triggerConditionList.forEach(e => {
                e.routeId = this.$route.query.id
                e.routeName = this.$route.query.routeName
            })
            triggerConditionadd(this.updata).then(res => {
                this.open = false
                this.$notify({
                    type: 'success',
                    title: '提示',
                    message: '新增触发条件成功',
                });
                this.info();
            })
        },
        //保存
        preserve() {
            this.$confirm('是否确认保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                updateSpecialDiseaseRoute(this.form).then(response => {
                    this.$notify({
                        type: 'success',
                        title: '提示',
                        message: '保存成功,即将返回上一页',
                        duration: 0
                    });
                    setTimeout(() => {
                        this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                            this.$router.push({
                                path: "/specialdisease/specialDiseaseRoute",
                            });
                        })
                    }, 3000);
                });
            })
        },
    },
};
</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;

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