<template>
  <div class="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="itemp in addpackagelist" :key="itemp.id" :label="itemp.packageName" :value="itemp.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="(uitem, uindex) in list.childrenRouteList" :key="uindex">
        <!-- {{ uitem }} -->
        <div class="title">
          <el-tag type="success">触发条件</el-tag>
          <span>
            {{ uitem.routeName }}
          </span>

          <!-- {{ item.triggerConditionName == "DIAGNOSIS" ? "诊断" : "" }}
            {{
              item.triggerConditionName == "DRESSING_CHANGE_DATE"
                ? "换药日期"
                : ""
            }}
            {{
              item.triggerConditionName == "TREATMENT_METHOD" ? "治疗方式" : ""
            }}
            {{ item.triggerConditionName == "SURGICAL_NAME" ? "手术名称" : "" }}
            {{ item.triggerConditionName == "DRUG_NAME" ? "药品名称" : "" }} -->
          <!-- <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">
          <span>审核进度</span>
          <el-progress :text-inside="true" :stroke-width="13" :percentage="uitem.percentage"></el-progress>
          <span>{{ uitem.agreeNumber + " / " + uitem.totalNumber }}</span>
        </div>
        <div class="title" style="width: 240px">
          <span>适用范围:</span>
          <span>
            {{ uitem.suitRange == "IN_THE_HOSPITAL" ? "在院" : "" }}
            {{ uitem.suitRange == "DISCHARGE" ? "出院" : "" }}
            {{ uitem.suitRange == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
            {{
      uitem.suitRange == "OUTPATIENT_SERVICE_DISCHARGE"
        ? "门诊+出院"
        : ""
    }}
          </span>
        </div>
        <div>
          <!-- @click.stop="goManageNodeInformation" -->
          <i class="el-icon-edit" @click="triggerConditionedit(uitem)"></i>
          <i class="el-icon-delete" @click="deltriggerCondition(uitem)"></i>
        </div>
      </div>
    </div>
    <!-- 添加触发条件 -->
    <el-dialog title="添加触发条件" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="updata" :model="updata" :rules="rules" label-width="80px">
        <el-form-item label="适用范围:">
          <el-select v-model="updata.suitRange" @change="changeoptions" style="width: 200px">
            <el-option v-for="xitem in options" :key="xitem.dictValue" :label="xitem.dictLabel"
              :value="xitem.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-descriptions title="触发条件"> </el-descriptions>

        <div class="node" v-for="(item, index) in updata.triggerConditionList" :key="index">
          <div style="width: 600px; position: absolute; left: 2%; top: 57%"
            v-if="updata.triggerConditionList.length === 3">
            <img src="@/assets/images/images.png" class="login-code-img" />
            <el-select v-model="item.triggerLogic" style="width: 60px" placeholder=""
              @change="changetriggerLogicsname($event, index)">
              <el-option v-for="itemh in optionslistS" :key="itemh.dictValue" :label="itemh.dictLabel"
                :value="itemh.dictValue">
              </el-option>
            </el-select>
          </div>
          <el-select v-model="item.triggerConditionCode" style="width: 120px"
            @change="changetriggerConditionName($event, index)">
            <el-option v-for="itemq in optionsname" :key="itemq.dictValue" :label="itemq.dictLabel"
              :value="itemq.dictValue">
            </el-option>
          </el-select>
          <el-select v-model="item.triggerConditionOperator" style="width: 100px"
            @change="changetriggerLogic($event, index)">
            <el-option v-for="itemr in item.optionstriggerConditionOperator" :key="itemr.dictValue"
              :label="itemr.dictLabel" :value="itemr.dictValue">
            </el-option>
          </el-select>
          <!-- {{ item }} -->
          <el-input v-if="item.dictDataType == 'STRING' || item.dictDataType == ''" v-model="item.triggerConditionValue"
            style="width: 300px" placeholder="请输入触发条件" maxlength="100"></el-input>
          <el-date-picker v-if="item.dictDataType == 'DATE'" v-model="item.triggerConditionValue" style="width: 300px"
            type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-select v-if="item.dictDataType == 'SELECT'" v-model="item.triggerConditionValue" style="width: 300px">
            <el-option v-for="item in ConditionValue" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
          <!-- {{ item }} -->
          <el-input v-if="item.dictDataType == 'DECIMAL'" style="width: 300px" v-model="item.triggerConditionValue"
            type="number" :min="0"></el-input>
          <span class="icon">
            <el-button type="danger" class="el-icon-remove-outline" plain @click="delitem(index)"
              v-if="index != 0"></el-button>

            <!-- <i
              class="el-icon-delete"
              @click="delitem(index)"
              v-if="index != 0"
            ></i> -->
            <!-- <i
              v-if="index == 0"
              class="el-icon-circle-plus-outline"
              @click="addtriggerCondition(index)"
              >添加触发条件</i
            > -->
            <el-button type="primary" plain class="el-icon-circle-plus-outline" @click="addtriggerCondition(index)"
              v-if="index == 0">添加属性</el-button>
          </span>
        </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="900px"
      append-to-body
    >
    
      <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-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,
  getById,
} from "@/api/system/specialDiseaseRoute";
import { getList } from "@/api/system/specialDiseaseNode";
import {
  specialDiseaseRoute,
  triggerConditiondel,
  specialDiseaseRoutedel,
  triggerConditionadd,
  triggerCondition,
  triggerConditionedit,
} from "@/api/system/editorialSpecialization";
import Cookies from "js-cookie";
import { servicepackageinfo } from "@/api/manage/signRecord.js";
import { getAgencytype } from "@/api/system/agency";

export default {
  name: "EditorialSpecialization",
  data() {
    return {
      options: [],
      dictDataType: "",
      optionstriggerConditionOperator: [],
      optionsname: [],
      optionslistS: [],
      form: {
        version: "",
        routeName: "",
        id: "",
        diseaseTypeName: "",
        servicePackageId: [],
        routePackageList: [],
      },
      ConditionValue: [],
      open: false,
      updata: {
        triggerLogic: "",
        triggerLogicName: "",
        suitRange: "",
        parentRouteId: "",
        triggerConditionList: [
          {
            routeId: "",
            routeName: "",
            triggerConditionName: "",
            triggerConditionOperatorName: "",
            // triggerConditionName: "",
            triggerConditionOperator: "",
            triggerConditionValue: "",
            dictDataType: "STRING",
            triggerLogic: "",
            triggerLogicName: "",
          },
        ],
      },
      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.updata.parentRouteId = this.$route.query.id;

    this.form.diseaseTypeName = this.$route.query.diseaseTypeName;
    this.info();
    this.infolist();
    this.infolistoptionslistS();
    // this.optiononditionOperator();
    this.optiononditionOperators();
  },
  watch: {},
  methods: {
    // 诊断
    optiononditionOperators() {
      var dictType = "trigger_condition_name ";
      getAgencytype(dictType).then((res) => {
        this.optionsname = res.data;
      });
    },
    // 包含
    optiononditionOperator() {
      var dictType = "trigger_condition_operator  ";
      getAgencytype(dictType).then((res) => {
        this.updata.triggerConditionList.optionstriggerConditionOperator =
          res.data;
      });
    },
    // 包含
    changetriggerLogic(e, index) {
      // if (this.updata.triggerConditionList[index].triggerConditionOperator=='') {
      //   this.$message('请先选择第一个')
      // } else {
      this.updata.triggerConditionList[index].triggerConditionOperatorName =
        this.updata.triggerConditionList[
          index
        ].optionstriggerConditionOperator.find(
          (el) => el.dictValue == e
        ).dictLabel;
      this.updata.triggerConditionList[index].triggerConditionValue = null;
      // }
    },
    // 诊断
    changetriggerConditionName(e, index) {
      var dictType = e;
      getAgencytype(dictType).then((res) => {
        this.ConditionValue = res.data;
      });
      this.updata.triggerConditionList[index].triggerConditionName =
        this.optionsname.find((el) => el.dictValue == e).dictLabel;
      this.updata.triggerConditionList[index].triggerConditionOperator = null;
      this.updata.triggerConditionList[index].triggerConditionValue = null;
      this.dictDataType = this.optionsname.find(
        (el) => el.dictValue == e
      ).dictDataType;
      this.updata.triggerConditionList[index].dictDataType =
        this.optionsname.find((el) => el.dictValue == e).dictDataType;
      // console.log(
      //   this.updata.triggerConditionList[index].dictDataType,
      //   "this.dictDataType"
      // );
      this.handlelist(index);
    },
    // 包含或等号接口
    handlelist(index) {
      var dictType = "trigger_condition_operator";
      getList(dictType, this.dictDataType).then((res) => {
        this.$set(
          this.updata.triggerConditionList[index],
          "optionstriggerConditionOperator",
          res.data
        );
        this.$forceUpdate();
      });
    },
    changeoptions() { },
    // 且或
    changetriggerLogicsname(e, index) {
      this.updata.triggerConditionList[index].triggerLogic = e;
      this.updata.triggerConditionList[index].triggerLogicName =
        this.optionslistS.find((el) => el.dictValue == e).dictLabel;
    },
    infolist() {
      var dictType = "suit_range";
      getAgencytype(dictType).then((res) => {
        this.options = res.data;
      });
    },
    infolistoptionslistS() {
      var dictType = "trigger_logic";
      getAgencytype(dictType).then((res) => {
        this.optionslistS = res.data;
      });
    },
    delitem(index, item) {
      this.updata.triggerConditionList.splice(index, 1);
    },
    info() {
      getById(this.$route.query.id).then((res) => {
        this.list = res.data;
        if (this.list.totalNumber == 0) {
          this.list.percentage = 0;
        } else {
          this.list.percentage =
            (this.list.agreeNumber / this.list.totalNumber) * 100;
        }
        this.list.childrenRouteList.forEach((e) => {
          if (e.totalNumber == 0) {
            e.percentage = 0;
          } else {
            e.percentage = (e.agreeNumber / e.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;
    },
    // goManageNodeInformations() {
    //   this.$router.push({
    //     path: "/specialdisease/ManageNodeInformation",
    //     query: {
    //       suitRange: this.list.suitRange,
    //     },
    //   });
    // },
    addtriggerCondition() {
      this.idd++;
      var obj = {
        routeId: "",
        routeName: "",
        triggerConditionName: "",
        triggerConditionOperator: "",
        triggerConditionValue: "",
        triggerConditionName: "",
        triggerConditionOperatorName: "",
        dictDataType: "STRING",
        triggerLogic: "AND",
        triggerLogicName: "",
      };

      if (this.updata.triggerConditionList.length == 3) {
        this.$message.error("至多仅支持两种属性");
      } else {
        this.updata.triggerConditionList.push(obj);
      }
    },
    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: "",
          triggerConditionName: "",
          triggerConditionOperatorName: "",
          dictDataType: "STRING",

          triggerLogic: "",
          triggerLogicName: "",
        },
      ];
      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;
        delete e.optionstriggerConditionOperator;
      });
      delete this.updata.triggerConditionList.optionstriggerConditionOperator;

      loading.close();
      // console.log(this.updata.triggerConditionList, "this.updata");
      // return
      triggerConditionadd(this.updata).then((res) => {
        if (res.code == 200) {
          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(uitem) {
      this.$router.push({
        path: "/specialdisease/ManageNodeInformation",
        query: {
          suitRange: uitem.suitRange,
          id: uitem.specialDiseaseRouteId,
          routeName: uitem.routeName,
        },
      });
      Cookies.set("routeName", uitem.routeName);

      //   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(uitem) {
      this.$confirm("确定删除此触发条件吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        triggerConditiondel([uitem.specialDiseaseRouteId]).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>
// .images{
//     width: 20px;
//     height: 20px;
//     background: red;
.login-code-img {
  width: 62px;
  height: 100px;
  position: absolute;
  background: red;
  z-index: 0;
  //   top: 17%;
  position: absolute;
  //   left: 2%;
  top: -75%;
}

// }
.icon {
  //   right: -20px;
  // background: red;
  //   top: 40px;
  position: relative;
  display: inline-block;
  width: 150px;
  height: 76px;
  //   .el-icon-delete {
  //     width: 29px;
  //     height: 23px;

  //   }
}

.container {
  padding: 20px;
  overflow-y: scroll;
  height: calc(100vh - 84px);
}

.node {
  margin-left: 60px;
}

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