<template>

<div>
  <el-tabs v-model="tabsActive">
    <el-tab-pane v-for="(item, index) in tabsArray" :key="index" :label="item.label" :name="item.name" >
    </el-tab-pane>
  </el-tabs>

  <div v-if="tabsActive == 1">
    <div style="width: 420px;">
      <div class="message" style="overflow-y: auto;max-height: 480px;height: 480px;background-color: white">
        <div v-for="(item,index) in chatMessages" :key="index">
          <div v-if="item.role == 'user'" class="user-message">
            <el-avatar  style="margin-left: 10px;" src="static/img/avatar07.7b002992.png" fit="contain"></el-avatar>
            <div class="user-content" style="line-height: 40px;background-color: #00C797;margin-left: 10px;border-radius: 5px;padding: 0 10px 0 10px;">
              {{item.content}}
            </div>
          </div>
          <div v-if="item.role == 'assistant'" class="record-message" style="display: flex;justify-content: right;margin-bottom: 20px;">
            <div class="record-avatar" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);width: 360px;margin-right: 10px;margin-left:10px; padding: 0 10px 0 10px;background-color: white;border-radius: 5px;line-height: 40px;">
              {{item.content}}
            </div>
            <el-avatar  style="margin-right: 10px;" :src="require('../../../assets/images/jiqiren.png')" fit="contain"></el-avatar>
          </div>
        </div>
      </div>
      <div style="margin: 20px;border-top: 1px solid blue;border-right: 1px solid blue;border-radius: 10px;display: flex;background-color: white">
        <div style="width: 80px;border-radius: 10px 0 0 10px;  background-color: #DDDDDD;display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 5px;">
          <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 病历</button>
          <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 检查</button>
          <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“ 检验</button>
          <button style="width: 60px;margin-top: 5px;border-radius: 5px;border: 1px solid blue;color: blue">“知识库</button>
        </div>
        <div style="width: calc(100% - 90px)">
          <textarea v-model="inputMessage" placeholder="请输入您的问题,帮您深度解答" style="height: 80px;border: none;outline:none; width: 100%;padding: 10px;"></textarea>
          <div style="display: flex;margin-bottom: 10px;">
            <el-icon class="iconfont zj-damuzhi" style="margin-left: 20px;line-height: 35px;"></el-icon>
            <el-icon class="iconfont zj-zanxia" style="margin-left: 20px;line-height: 35px;"></el-icon>
            <el-button @click="sendMessage" type="primary" style="margin-left: auto;height: 30px;line-height: 0;margin-right: 10px;">发送</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--病案首页-->
  <div v-else-if="tabsActive == 2">
    <div ref="box" class="box22" :style="{width: width ? width + 'px' : '100%'}" :class="{'nocopy': $route.meta.nocopy}">

      <div class="score-box" :class="scoreLevel == '甲'? 'scoreLevel_1' : ( scoreLevel == '乙'?'scoreLevel_2': (scoreLevel == '丙'?'scoreLevel_3':'' ) ) ">
        <div>病案评分<span class="score-f">{{ data.score  }}分</span></div>
        <!-- <h2 class="score-dj">{{ scoreLevel }}</h2> -->
      </div>

      <div class="card-box" v-if="data.is_case">
        <div class="title">
          <span class="font-size12">智能结果更新时间：</span>
          <span class="font-size12">{{ data.quality_time }}</span>
        </div>
        <el-tag type="danger" v-if="data.is_case == 1" class="font-size12">质控中</el-tag>
        <el-tag v-if="data.is_case == 2" class="font-size12">已质控</el-tag>

      </div>


      <el-scrollbar ref="scrollRef" class="scrollBox" :style="`height: ${scrollHeight};padding-bottom:60px;`">
        <template v-for="(item, index) in tableData">
          <!-- is_appeal: 是否申述 -->
          <div class="list-box box-card" :key="index" v-if="is_show && (!item.is_appeal || (item.is_appeal == 1 && item.appeal_status == 2))">
            <div class="list-score-tips-box">
              <div class="list-left-score" :class=" item.level == 1 ? 'hover-1' : 'hover-2' ">
                <div> {{ item.level == 1? '必改':'建议' }} </div>
                <div>-{{ item.score }}</div>
              </div>
              <div class="list-right-tips">
                <div><span class="title-color">字段：</span><span>{{ item.category }}</span></div>
                <div class="notice-box"><span class="title-color">提示：</span><span>{{ item.notice }}</span></div>
              </div>
            </div>
            <div class="list-basis-box">
              <div class="list-basis-title" @click="clickListItem(index)">
                <span>质控依据</span>
                <span> >> </span>
                <el-image class="typeImg" v-if="item.is_ai" :src="require('../../../assets/images/jiqiren.png')" fit="contain">
                </el-image>
                <el-image v-else class="typeImg" :src="require('../../../assets/images/kefu.png')" fit="contain">
                </el-image>
              </div>
              <div class="list-basis-text">
                <div class="list-basis-text-t" :class="item.show?'show':''">
                  <div v-for="(yItem, yIndex) of item.basis" :key="yIndex" style="margin-bottom: 10px;">
                    <div v-if="item.rule_id !== 6">
                      <span class="span-index">{{ yIndex+1 }}</span>
                      <span v-if="item.category=='入院记录'">
                      <span v-for="(cItem, cIndex) of yItem" :key="cIndex" @click="hightRight(cItem,292,item.JZHM)" v-html="cItem"></span>
                    </span>
                      <span v-else>
                      <span v-for="(cItem, cIndex) of yItem" :key="cIndex" v-html="cItem"></span>
                    </span>
                    </div>
                    <div v-else>
                      <span class="span-index">1</span>
                      <span style="font-size: 13px;">{{ yItem[0] }}</span>
                    </div>
                  </div>
                </div>
                <div class="list-basis-bottom-box">
                  <div class="list-basis-bottom-tips">
                    <el-tooltip class="appeal-status-box" effect="dark" :content="item.reject_content" placement="top">
                      <el-button type="danger" class="appeal-status-2"  v-if="item.appeal_status == 2">驳回</el-button>
                    </el-tooltip>
                  </div>
                  <div class="list-basis-bottom-btn" v-if="data.valData != 'sl_001'">
                    <el-button type="primary" @click="clickAppeal( item,index,2 )">申诉</el-button>
                    <el-button @click="clickAppeal( item,index,1 )">忽略</el-button>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </template>
      </el-scrollbar>
    </div>
  </div>

</div>

</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {
            data: {}
          }
        }
      },
      type:{
        type: String,
        default() {
          return ''
        }
      },
      height: {
        type: Number,
        default() {
          return 0
        }
      },
      width: {
        type: Number,
        default() {
          return 0
        }
      }
    },
    data(){
      return {
        inputMessage:'',//消息输入框
        chatMessages:[],//内容显示
        tabsActive:'2',//tabs选择
        tabsArray:[
          {'name':'1','label':'病历生成'},
          {'name':'2','label':'病案首页'},
          {'name':'3','label':'住院病历'},
          {'name':'4','label':'编目首页'},
        ],
        tableData: [],
        is_show: true,
        quality_type: 2,  // 1、首页质控 2、病例质控
      }
    },
    computed: {
      scoreLevel() {
        /**
         * 甲＞90分
         * 乙75-90分
         * 丙＜75分
         * */
        let str
        const { score } = this.data
        if (score > 90) {
          str = '甲'
        } else if (score < 75) {
          str = '丙'
        } else if ( score <= 90 && score >= 75 ) {
          str = '乙'
        }
        return str
      },
      scrollHeight() {
        // if (this.height) {
        //   return (this.height - 214)+'px'
        // } else {
        //   return `calc(100vh - 314px)`
        // }
        return `100%`
      }
    },
    created(){
      this.getTableData();
    },
    methods: {
      //发送消息
      async sendMessage(){
        const messages = this.inputMessage.trim();
        if (messages){
          //添加用户信息到聊天记录
          this.chatMessages.push({
            role: 'user',
            content: messages
          });

          // 清空输入框
          this.inputMessage = '';

          //大模型请求
          const modelResponse = await this.simulateModelResponse(messages);

          // 添加模型响应消息到聊天记录
          this.chatMessages.push({
            role: 'assistant',
            content: modelResponse
          });
        }
      },
      //大模型请求
      simulateModelResponse(userMessage) {
        //请求内容
        const options = {
          method: 'POST',
          headers: {
            Authorization: 'Bearer sk-ttnryoxayznjgquagdfwjefbkubdnezabsotuczokunwkjin',
            'Content-Type': 'application/json'
          },
          // body: '{"model":"Qwen/QwQ-32B","messages":[{"role":"user","content":"当前时间"}],"stream":false,"max_tokens":512,"stop":null,"temperature":0.7,"top_p":0.7,"top_k":50,"frequency_penalty":0.5,"n":1,"response_format":{"type":"text"},"tools":[{"type":"function","function":{"description":"<string>","name":"<string>","parameters":{},"strict":false}}]}'
        };
        const body = {};
        body.model = "deepseek-ai/DeepSeek-R1-Distill-Qwen-14B";
        body.messages = [{"role":"user","content":userMessage}];
        options.body = JSON.stringify(body);

        //请求
        return  fetch('https://api.siliconflow.cn/v1/chat/completions', options).then(response => {
          return response.json();
        }).then(data => {
          const content = data.choices[0].message.content;
          return content;
        }).catch(err => console.error(err));
      },
      getTableData(){
        let data = this.data.data;
        for(let i=0; i<data.length; i++) {
          data[i].show = true;
        }
        this.tableData = data;
        if(Array.isArray(this.tableData)) {
          let ruleId = this.storageGet('getDataRule');
          this.tableData = this.tableData.filter(item => item.rule_id == ruleId).concat(this.tableData.filter(item => item.rule_id != ruleId))
        }
      },
      onScroll(index) {
        const el = this.$el.querySelector(`.category${index}`);
        const node = el.parentNode.parentNode.parentNode
        this.$refs["scrollRef"].wrap.scrollTop = node.offsetTop;
      },
      hightRight(hightKeyWord, bllb, zyh) {
        this.$emit('hightRight',hightKeyWord,bllb,zyh)
      },
      clickListItem(idx){
        let tableData = this.tableData;
        tableData[idx].show = !tableData[idx].show;
        this.is_show = false;
        this.$nextTick( () =>{
          this.tableData = tableData;
          this.is_show = true;
        })
        console.log(tableData)

      },
      // 点击申诉、忽略按钮
      clickAppeal(i,idx,type){
        let that = this;
        let item = i;
        let index = idx;
        let tableData = that.tableData;
        let params = {
          id: item.id, // 质控错误结果的数据ID
          zyh: item.JZHM,
          type: type,
          quality_type: that.quality_type,  // 1、首页质控 2、病例质控
          appeal_document: that.data.appeal_document, //申诉科室名称
          appeal_docter: that.data.appeal_docter,  // 申诉医生名称
        }
        that.$axios2.post('/appeal', params).then(res => {
          if(res.code == 200){
            that.$message({
              type: 'success',
              message: res.msg
            });

            setTimeout( () =>{
              tableData.splice(index,1);
              that.tableData = tableData;
            },2000)

          }else{
            that.$message({
              type: 'error',
              message: res.msg
            });
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.message{border-bottom: 1px solid gray;margin-bottom: 20px;}
.user-message{display: flex;margin-bottom: 20px;margin-top: 10px;}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}


.box22 {
  padding: 16px;
  background: #FFFFFF;
  border-radius: 5px;
  height: 100vh;
  .score-box{
    width: 100%;
    margin-bottom: 16px;
    padding: 30px 50px 30px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    div{
      font-size: 20px;
    }
    .score-f{
      padding-left: 20px;
      font-size: 20px;
    }
    .score-dj,.score-f{
      font-weight: bold;
    }
  }
  .score-box.scoreLevel_1{
    background: rgb(11, 133, 63);
    background-image: url('../../../assets/images/icon-jia.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .score-box.scoreLevel_2{
    background: rgb(152, 112, 20);
    background-image: url('../../../assets/images/icon-yi.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .score-box.scoreLevel_3{
    background: rgb(199, 54, 13);
    background-image: url('../../../assets/images/icon-bing.png');
    background-repeat: no-repeat;
    background-size: 60px 52px;
    background-position:80% 50%;
  }
  .card-box {
    // height: 175px;
    // background: #FFFFFF;
    // border: 1px solid #E2E2E2;
    background: #f1f5fe;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 12px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      // font-weight: bold;
      color: #333333;
      line-height: 22px;
      // span {
      //   margin-left: 7px;
      // }
    }
    .card-icon-btn{
      width: auto;
      padding: 4px 8px;
      border-radius: 4px;
      background: rgb(254, 240, 240);
      color: rgb(245, 128, 140);
      border: 1px solid rgb(245, 128, 140);
      font-size: 10px;
    }
    .title2 {
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      // font-weight: bold;
      color: #333333;
      line-height: 26px;
      cursor: pointer;
      span {
        margin-left: 7px;
      }
    }
    .error {
      color: #D81E06;
    }
  }
  .box-card {
    margin-bottom: 10px;
    position: relative;
    background: rgb(241, 245, 254);
    .category {
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .koufen {
      font-weight: bold;
      vertical-align: middle;
      margin-left: 16px;
    }
    .typeImg {
      width: 53px;
      height: 53px;
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 999;
    }
  }

  .box-card .el-table ::v-deep tr{
    background: transparent;
  }
  ::v-deep .el-table__row {
    background: #185DA6 !important;
    color: #FFFFFF;
    .el-icon-arrow-right {
      color: #FFFFFF;
    }
  }
  ::v-deep .el-descriptions__body{
    background: transparent;
  }
  ::v-deep .el-table tr{
    background: transparent;
  }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: #185DA6;
  }
  ::v-deep .el-table_1_column_1 {
    border-radius: 8px 0 0 8px;
  }
  ::v-deep .el-table_1_column_2 {
    border-radius: 0 8px 8px 0;
    font-weight: bold;
  }
  ::v-deep .el-descriptions-item__label {
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
  }
}
.span-index{
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  background: #185DA6;
  color: #fff;
  margin-right: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}

::v-deep .el-table .el-table__row td {
  color: #fff;
}
::v-deep .el-tag{
  height: auto;
  line-height: 22px;
}
// =================   2024-07-27 新样式  ↓  ===============
.font-size12{
  font-size: 12px;
}
.list-box{
  width: 100%;
  padding: 10px 0;
  .title-color{
    color: rgba(27,100,176,1);
    font-weight: bold;
  }
  .list-score-tips-box{
    width: 100%;
    display: flex;
    .list-left-score{
      width: 70px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      &.hover-1{
        background: rgb(254, 240, 240);
        color: rgb(238, 14, 14);
        border-right: 3px solid rgb(238, 14, 14);
      }
      &.hover-2{
        background: rgb(236, 245, 255);
        color: rgb(52, 140, 235);
        border-right: 3px solid rgb(52, 140, 235);
      }
      &>div{
        font-size: 20px;
      }
    }
    .list-right-tips{
      flex: 1;
      font-size: 12px;
      padding-left: 10px;
      .notice-box{
        margin-top: 8px;
      }
    }
  }
  .list-basis-box{
    .list-basis-title{
      padding: 10px 0 10px 10px;
      position: relative;
      &>span{
        font-size: 12px;
        color: rgba(27,100,176,1);
        font-weight: bold;
      }
      .typeImg {
        width: 34px;
        height: 34px;
        position: absolute;
        top: 0;
        right: 12px;
        z-index: 999;
      }

    }
    .list-basis-text {
      height: auto;
      .list-basis-text-t{
        height: 0;
        overflow: hidden;
        position: relative;
        &.show{
          height: auto;
          padding: 10px 0 10px 10px;
        }
      }
    }

    .list-basis-bottom-box{
      margin-top: 14px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-basis-bottom-tips{
        flex: 1;
        &::v-deep .el-button{
          padding: 0;
          font-size: 12px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          &>span{
            font-size: 12px;
          }
        }
      }
      .list-basis-bottom-btn{
        width: auto;
        &::v-deep .el-button{
          padding: 6px 14px;
        }
        &::v-deep .el-button--primary,&::v-deep .el-button--primary:focus,&::v-deep .el-button--primary:hover{
          background: #185DA6;
          border-color: #185DA6;
        }
      }
    }



  }
}

</style>
