postdischarge-ui/src/views/manage/components/specialDiseaseNodeopen.vue

<template>
  <div class="app-container">
    <!-- <el-descriptions title="编辑主路径" /> -->
    <div class="title">
      <el-tag>主路径</el-tag>
      <div>
        {{ updata.routeName }}
      </div>
      <div class="select">
        <span> 适用范围 </span>
        <el-select v-model="updata.suitRange" disabled>
          <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>
      </div>
    </div>
    <div class="list">
      <div class="timelist">
        <div class="timetitle">
          管理路径节点({{ lists.length }})
          <i class="el-icon-circle-plus-outline" @click="addlist"></i>
        </div>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in lists"
            :key="index"
            :color="listindex == index ? '#409EFF' : ''"
          >
            <div class="top">
              <div class="toptop">
                <el-select
                  v-model="item.routeNodeName"
                  disabled
                  style="width: 87px"
                >
                  <el-option label="出院后" value="AFTER_DISCHARGE" />
                  <el-option label="入院后" value="AFTER_ADMISSION" />
                  <el-option label="就诊后" value="AFTER_CONSULTATION" />
                  <el-option
                    label="就诊/出院后"
                    value="AFTER_VISIT_DISCHARGE"
                  />
                  <el-option label="术前" value="PREOPERATIVE" />
                  <el-option label="术后" value="POSTOPERATIVE" />
                </el-select>
                <el-input
                  v-model="item.routeNodeDay"
                  disabled
                  style="width: 50px"
                ></el-input>
                <span>天</span>
              </div>
              <div>
                <i class="el-icon-delete" @click="delitem(item, index)"></i>
                <i
                  class="el-icon-circle-plus-outline"
                  @click="additem(item)"
                ></i>
              </div>
            </div>
            <el-card
              v-for="(uitem, uindex) in item.list"
              :key="uitem.id"
              @click.native="bottomclickevent(uitem, index, uindex, item)"
              :class="listindex == index && itemindex == uindex ? 'cards' : ''"
            >
              <h3 style="height: 20px">{{ uitem.taskTypeName }}</h3>
              <el-tag
                v-if="uitem.nodeExecuteStatus == 'EXECUTED'"
                class="routeCheckStatus"
                >已执行</el-tag
              >
              <el-tag v-else type="warning" class="routeCheckStatus"
                >未执行</el-tag
              >
              <p style="height: 16px">{{ uitem.taskPartitionDictName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="texts">
        <div class="topform">
          <el-form ref="form" :inline="true" :model="form" class="form">
            <el-form-item label="任务类型" prop="">
              <el-select
                v-model="form.taskType"
                disabled
                style="width: 110px"
                @change="changeTaskType"
              >
                <el-option
                  v-for="item in selectTaskTypeList"
                  :key="item.taskTypeCode"
                  :label="item.taskTypeName"
                  :value="item.taskTypeCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务细分" prop="">
              <el-select
                v-model="form.taskSubdivision"
                disabled
                style="width: 110px"
                @change="changetaskSubdivision"
              >
                <el-option
                  v-for="item in taskPartitionList"
                  :key="item.taskPartitionCode"
                  :label="item.taskTypeName"
                  :value="item.taskPartitionCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务状态" prop="">
              <el-select
                v-model="form.taskStatus"
                disabled
                style="width: 100px"
              >
                <el-option
                  v-for="item in taskStatusDictList"
                  :key="item.id"
                  :label="item.taskStatusName"
                  :value="item.taskStatusCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类描述" prop="">
              <el-input
                v-model="form.secondClassifyDescribe"
                disabled
                style="width: 100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="执行时间" prop="">
              <el-time-select
                v-model="form.executeTime"
                disabled
                style="width: 120px"
                placeholder="选择时间"
              >
              </el-time-select>
            </el-form-item>
            <!-- <el-form-item
              label="问卷库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'QUESTIONNAIRE'"
            >
              <el-input
                v-model="form.templateName"
                disabled
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="宣教库模板选择"
              prop=""
              v-if="form.taskSubdivisiontemplateType == 'PROPAGANDA'"
            >
              <el-input
                v-model="form.templateName"
                disabled
                style="width: 200px"
              ></el-input>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="bottomform">
          <!-- 问卷预览弹框 -->

          <questionopennew
            style="width: 100%; background: #fff"
            ref="question"
            :lookitemnew="lookitemnew"
            v-if="form.templateType == 'QUESTIONNAIRE'"
          ></questionopennew>

          <div class="propaganda" v-else-if="form.templateType == 'PROPAGANDA'">
            <div class="titletop">
              文章模板:{{ lookitemnew.propagandaTitle }}
            </div>
            <div class="bodytop">
              <div class="titledata">{{ lookitemnew.propagandaTitle }}</div>
              <div>
                <img :src="baseUrl + lookitemnew.propagandaCoverPath" alt="" />
                <div class="know">知识卡片</div>
                <div class="knowlist">
                  <Editorxj
                    v-model="lookitemnew.propagandaContent"
                    :min-height="192"
                  />
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <wangeditor
              style="width: 100%"
              :nodeContent="form.nodeContent"
              @on-nodeContent="onNodeContent"
              ref="wangeditor"
            />
          </div>

          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 短信 </span>
              </div>
              <div class="pushMethod">
                模板：
                <el-input
                  v-model="form.messageTemplateName"
                  disabled
                  style="width: 200px"
                ></el-input>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.messagePushSign"
                  disabled
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
            <div class="flextwo">
              <div class="text">短信预览：</div>
              <el-input
                class="textarea"
                v-model="form.messagePreview"
                disabled
              ></el-input>
            </div>
          </div>
          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 公众号 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <el-input
                    v-model="form.officialTemplateName"
                    disabled
                    style="width: 200px"
                  ></el-input>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.officialPushSign"
                  disabled
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
            <div class="flextwo">
              <div class="text">提醒内容：</div>
              <el-input
                v-model="form.officialRemindContent"
                disabled
                class="textarea"
              ></el-input>
            </div>
          </div>
          <div class="card">
            <div class="flex">
              <div class="pushMethod">
                推送方式：
                <span> 小程序 </span>
              </div>
              <div class="pushMethod">
                模板：
                <span>
                  <el-input
                    v-model="form.appletTemplateName"
                    disabled
                    style="width: 200px"
                  ></el-input>
                </span>
              </div>
              <div class="pushMethod">
                <el-switch
                  v-model="form.appletPushSign"
                  disabled
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </div>
            </div>
            <div class="flextwo">
              <div class="text">提醒内容：</div>
              <el-input
                v-model="form.appletRemindContent"
                disabled
                class="textarea"
              ></el-input>
            </div>
            <div class="flextwo">
              <div class="text">提示说明：</div>
              <el-input
                v-model="form.appletPromptDescription"
                disabled
                class="textarea"
              ></el-input>
            </div>
          </div>
          <!-- <div class="card" style="height: 250px;">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    AI电话
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66"  active-value="1"
                                    inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                机构名称：
                            </div>
                            <div class="text">
                                我是
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:150px;padding:0 10px"></el-input>
                            <div class="text">
                                的工作人员
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                重播次数：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                            <div class="text" style="padding-left: 100px;">
                                时间间隔：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信提醒：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="text" style="padding-left: 100px;">
                                短信模板：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wangeditor from './wangEditor.vue'
import question from '@/views/system/components/question.vue'
import message from '@/views/system/components/message.vue'
import propaganda from '@/views/system/components/propaganda.vue'
import officialAccount from '@/views/system/components/officialAccount.vue'
import miniProgram from '@/views/system/components/miniProgram.vue'
import {
  selectTaskTypeList, taskPartitionList, taskStatusDictList, specialDiseaseNode, selectSpecialDiseasenew, updateRouteCheckStatus, getById
} from '@/api/system/specialDiseaseNode'
import questionopennew from '../components/questionopennew.vue';
import Editorxj from "../../system/Editorxj/index.vue";

export default {
  components: { wangeditor, question, propaganda, message, officialAccount, miniProgram, questionopennew, Editorxj },
  props: ['lookitem'],
  name: "specialDiseaseNodeopen",
  data() {
    return {
      show: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      dialogVisible: false,
      routeform: {
        routeCheckStatus: null,
        routeCheckRemark: "",
      },
      rules: {
        routeCheckStatus: [
          { required: true, message: '请选择节点审核状态', trigger: 'change' }
        ],
      },
      totalNumber: 0,
      agreeNumber: 0,
      updata: {
        manageRouteId: '',
        suitRange: '',
        routeName: '',
        specialDiseaseNodeList: [],
      },
      form: {
        nodeContent: '<p></p>',
        templateId: '',
        templateName: '',
        taskType: '',
        taskSubdivision: '',
        taskSubdivisionName: '',
        taskStatus: '',
        secondClassifyDescribe: '',
        executionTime: '',
        appletPushSign: '0',
        officialPushSign: '0',
        messagePushSign: '0',
        taskSubdivisiontemplateType: '',
        officialRemindContent: '',
        messagePreview: '',
        appletRemindContent: '',
        appletPromptDescription: '',
      },
      itemindex: 0,
      listindex: 0,
      lists: [],
      lookitemnew: {},
      value: '',
      input: '',
      //任务类型
      selectTaskTypeList: [],
      //任务状态
      taskStatusDictList: [],
      //任务细分
      taskPartitionList: [],
    };
  },
  created() {
    this.updata = this.lookitem
    this.updata.manageRouteId = this.lookitem.manageRouteId
    this.taskinfo();
  },
  beforeDestroy() { },
  watch: {
    lookitem(newValue, oldValue) {
      this.updata = newValue;
      this.updata.manageRouteId = newValue.manageRouteId
      this.taskinfo();
    }
  },
  mounted() {
  },
  methods: {
    info() {
      selectSpecialDiseasenew(this.updata.manageRouteId).then(res => {
        this.agreeNumber = res.data.agreeNumber
        this.totalNumber = res.data.totalNumber
        res.data.forEach(e => {
          e.messagePushSign = '' + e.messagePushSign
          e.officialPushSign = '' + e.officialPushSign
          e.appletPushSign = '' + e.appletPushSign
        })
        this.lists = this.handleData(res.data, 'routeNodeDay', 'routeNodeName')
        getById(this.lists[0].list[0].id).then(res => {
          this.form = res.data
          this.lookitemnew = res.data.detailInfo
          if (this.form.taskType) {
            this.changeTaskType(this.form.taskType, this.form.taskSubdivision)
          }
        })
        this.$refs.wangeditor.disable();
      })
    },
    handleData(list, key, keytwo) {
      //得到数据的主键列表
      let keysArr = list.map((item) => {
        return {
          routeNodeDay: item[key],
          routeNodeName: item[keytwo],
        };
      });
      let array = keysArr.filter(
        (item, index, arr) =>
          index ===
          arr.findIndex(
            (ite) =>
              ite.routeNodeDay == item.routeNodeDay &&
              ite.routeNodeName == item.routeNodeName
          )
      );
      // for (var i = 0; i < keysArr.length; i++) {
      //     for (var j = i + 1; j < keysArr.length; j++) {
      //         if (keysArr[i].routeNodeDay == keysArr[j].routeNodeDay && keysArr[i].routeNodeName == keysArr[j].routeNodeName) {
      //             keysArr.splice(j, 1);
      //             j--;
      //         }
      //     }
      // }
      let keys = [...new Set(array)];
      let newList = keys.map((item) => {
        return {
          //这里写新的 数据结构 如下是整体复制
          routeNodeDay: item[key],
          routeNodeName: item[keytwo],
          list: list.filter(
            (i) => i[key] == item[key] && i[keytwo] == item[keytwo]
          ),
        };
      });
      return newList;
    },
    //wangeditor传值
    onNodeContent(item) {
      this.form.nodeContent = item.nodeContent
    },
    //小程序传值
    miniProgramtemplate(item) {
      this.form.appletTemplateId = item.templateId
      this.form.appletTemplateName = item.templateName
      this.form.appletRemindContent = item.templateContent
    },
    //短信传值
    messageontemplate(item) {
      this.form.messageTemplateId = item.templateId
      this.form.messageTemplateName = item.templateName
      this.form.messagePreview = item.templateContent
    },
    //公众号传值
    officialAccountontemplate(item) {
      this.form.officialTemplateId = item.templateId
      this.form.officialTemplateName = item.templateName
      this.form.officialRemindContent = item.templateContent
    },
    //问卷传值
    questionontemplate(item) {
      this.form.templateId = item.templateId
      this.form.templateName = item.templateName
    },
    //宣教传值
    propagandaontemplate(item) {
      this.form.templateId = item.templateId
      this.form.templateName = item.templateName
    },
    bottomclickevent(uitem, index, uindex, item) {
      // console.log(uitem, item)
      if (uitem.id) {
        getById(uitem.id).then(res => {
          this.form = res.data
          if (res.data.detailInfo) {
            this.lookitemnew = res.data.detailInfo
          } else {
            this.$refs.wangeditor.emit()
          }
          if (this.form.taskType) {
            this.changeTaskType(this.form.taskType, this.form.taskSubdivision)
          }
        })
      }
      // this.form = uitem

      this.listindex = index
      this.itemindex = uindex
    },
    handleStep() {
      this.active = 2
    },
    //任务类型 任务状态
    taskinfo() {
      selectTaskTypeList().then(res => {
        this.selectTaskTypeList = res.data
        this.info();
      })
    },
    //任务细分
    changeTaskType(code, taskSubdivision) {
      let id = this.selectTaskTypeList?.find(e => e.taskTypeCode == code)?.id
      this.form.taskTypeName = this.selectTaskTypeList?.find(e => e.taskTypeCode == code)?.taskTypeName
      taskPartitionList(id).then(res => {
        this.taskPartitionList = res.data
        this.form.taskSubdivision = ''
        this.form.taskSubdivisionName = ''
        this.form.taskSubdivisiontemplateType = ''
        if (taskSubdivision) {
          this.form.taskSubdivision = taskSubdivision
          this.changetaskSubdivision(taskSubdivision, 1)
        }
      })
    },
    //点击任务细分
    changetaskSubdivision(code, type) {
      this.form.taskSubdivisionName = this.taskPartitionList?.find(e => e.taskPartitionCode == code)?.taskPartitionName
      let id = this.taskPartitionList?.find(e => e.taskPartitionCode == code)?.id
      taskStatusDictList(id).then(res => {
        this.taskStatusDictList = res.data
      })
      this.taskPartitionList.forEach(el => {
        if (code == el.taskPartitionCode) {
          this.form.executionTime = el.executionTime
          this.form.taskSubdivisiontemplateType = el.templateType
          if (!type) {
            this.form.templateId = ''
            this.form.templateName = ''
          }
        }
      })
    },
    addlist() {
      this.lists.push({
        routeNodeName: "",
        routeNodeDay: '',
        list: [
          {
            nodeContent: '<p></p>',
            templateId: '',
            templateName: '',
            taskType: '',
            officialRemindContent: '',
            taskSubdivision: '',
            taskSubdivisionName: '',
            appletRemindContent: '',
            appletPromptDescription: '',
            taskStatus: '',
            secondClassifyDescribe: '',
            executionTime: '',
            appletPushSign: '0',
            officialPushSign: '0',
            messagePushSign: '0',
            messagePreview: '',
            taskSubdivisiontemplateType: '',
          },
        ]
      })
    },
    additem(item) {
      item.list.push({
        nodeContent: '<p></p>',
        templateId: '',
        templateName: '',
        taskType: '',
        officialRemindContent: '',
        taskSubdivision: '',
        taskSubdivisionName: '',
        taskStatus: '',
        secondClassifyDescribe: '',
        executionTime: '',
        appletPushSign: '0',
        officialPushSign: '0',
        messagePushSign: '0',
        appletRemindContent: '',
        appletPromptDescription: '',
        messagePreview: '',
        taskSubdivisiontemplateType: '',
      })
    },
    delitem(item, index) {
      item.list.splice(this.itemindex, 1)
      if (item.list.length == 0) {
        this.lists.splice(index, 1)
      }
    },
    //取消
    handleClose() {
      this.dialogVisible = false
      this.routeform = {
        routeCheckStatus: '',
        routeCheckRemark: "",
      }
      this.resetForm("routeform");
    },
    //审核
    auditing() {
      this.$refs["routeform"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '审核中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          updateRouteCheckStatus({
            routeCheckStatus: this.routeform.routeCheckStatus,
            id: this.form.specialDiseaseNodeId,
            routeCheckRemark: this.routeform.routeCheckRemark,
            routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName
          }).then(res => {
            if (res.data == 1) {
              this.info();
              this.handleClose()
              this.$modal.msgSuccess("审核成功!");
              loading.close();
            }
          })
        }
      })
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
  position: relative;
}

::v-deep .el-input__inner {
  color: black !important;
  background-color: #fff !important;
  cursor: default !important;
}
.propaganda {
  background: #fff;
  .titletop {
    font-size: 16px;
    font-weight: 700;
    margin-left: 30px;
  }
  .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;
    }
  }
}

.routeCheckStatus {
  position: absolute;
  right: 10px;
  top: 30px;
}

.dialog-footer {
  padding: 0 20px 0;
  text-align: right;
}

.bottomform {
  background-color: #f2f4f5;
  margin-top: 10px;

  .card {
    background-color: #fff;
    width: 100%;
    height: 200px;
    margin: 20px 0 0;
    padding: 20px 50px 0px 20px;

    .flextwo {
      display: flex;
      align-items: center;
      margin-top: 20px;

      .text {
        font-size: 13px;
        color: #64666a;
      }

      .textarea {
        width: 90%;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        // border: 1px solid #DCDFE6;
        border-radius: 5px;
        display: flex;
        align-items: center;

        ::v-deep .el-input {
          padding: 0 10px;
          width: 50%;
          color: black;
          font-size: 13px;
          height: 40px;
          line-height: 40px;
        }

        ::v-deep .el-input__inner {
          color: black;
          font-size: 13px;
        }
      }
    }

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

      .pushMethod {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #64666a;

        ::v-deep .el-input__inner {
          color: black;
          font-size: 13px;
        }

        span {
          color: black;
          font-size: 13px;
        }
      }
    }
  }
}

.topform {
  padding: 15px 0 0 15px;

  .form {
    ::v-deep .el-input__inner {
      height: 30px !important;
      line-height: 30px !important;
    }

    ::v-deep .el-form-item__label {
      font-size: 12px !important;
    }
  }
}

.title {
  display: flex;
  align-items: center;

  div {
    display: flex;
    padding-left: 10px;
    font-weight: 600;
    align-items: center;
  }

  .select {
    font-weight: 550;
    margin-left: 20%;
    font-size: 12px;

    .el-input {
      width: 200px;
      height: 30px !important;
      line-height: 30px !important;
    }
  }
}

.list {
  margin: 20px auto;
  width: 100%;
  background-color: #f2f4f5;
  display: flex;
  padding-top: 15px;
  justify-content: space-evenly;

  .timelist {
    width: 22%;
    background-color: #fff;
    padding: 0 20px 20px;
    // height: 680px;
    height: calc(100vh - 294px);
    overflow: scroll;

    .timetitle {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    ::v-deep .el-timeline {
      width: 100%;
      padding: 15px 0 0 !important;
    }
  }

  .texts {
    width: 75%;
    // height: 680px;
    height: calc(100vh - 294px);
    overflow: scroll;
    background-color: #fff;
  }
}

.cards {
  border: 1px solid #409eff;
  border-left: 5px solid #409eff;
}

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

  .toptop {
    display: flex;
    align-items: center;
  }

  span {
    padding: 0 4px;
  }

  i {
    font-size: 17px;
  }

  i:nth-child(2) {
    padding-left: 12px;
  }
}

::v-deep .el-timeline-item__timestamp {
  margin: 0 !important;
  padding: 0 !important;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
  transform: translateY(-2%);
}

::v-deep .el-card {
  margin-top: 20px !important;
}
</style>