<template>
  <div class="recipeAuditD flex-plane-center-top">
    <div class="recipe-left" :class="{ max: isV2}">
      <!-- <div class="back-btn flex-center" @click="$router.back()">返回</div> -->
      <div style="position: sticky; top: -10px;background-color: #fff;">
        <el-button size="small" type="primary" @click="$router.back()">返回</el-button>
        <el-button size="small" v-if="showPrintHTML" type="primary" icon="el-icon-download" :disabled="loading" @click="print()">下载打印</el-button>
      </div>
      <div v-if="!!info" class="msg">
        <div v-if="isV2" style="white-space: pre-wrap;line-height: 2">{{ info.content}}</div>
        <template v-else>
          <div class="msg-item flex-plane-center-l">
            <span>疾病名称：</span>
            <div>{{info.disname?info.disname:info.westerndisease}}</div>
          </div>
          <div class="msg-item flex-plane-center-l">
            <span>性别：</span>
            <div>{{info.patientgender=='M'?'男':'女'}}</div>
          </div>
          <div class="msg-item flex-plane-center-l">
            <span>年龄：</span>
            <div>{{info.patientage}}岁</div>
          </div>
          <div class="msg-item flex-plane-center-l">
            <span>婚姻：</span>
            <div>{{info.patientmarriage==0?'未婚':'已婚'}}</div>
          </div>

          <!-- <div class="msg-item flex-plane-center-l">
                      <span>主诉及现病史：</span>
                      <div>胃痛两天</div>
          </div>-->
          <div class="msg-item flex-plane-center-l" v-if="info.disname">
            <span>辨证：</span>
            <div>{{info.chinesesymptom}}</div>
          </div>
          <div class="msg-item flex-plane-center-l" v-if="info.disname">
            <span>治法：</span>
            <div>{{info.therapy}}</div>
          </div>
        </template>

        <div class="msg-item flex-plane-center-l note" v-if="isCollect">
          <span>个人笔记：</span>
          <div class>
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入"
              v-model="text"
              :disabled="!isEdit"
            />
            <el-button type="primary" @click="isEdit=!isEdit">{{ isEdit?'保存':'修改' }}</el-button>
          </div>
        </div>

        <div class="collect" v-if="false">
          <img
            src="../../assets/new-icon/collectpng.png"
            alt
            v-if="!isCollect"
            @click="isCollect=!isCollect"
          />
          <img
            src="../../assets/new-icon/collectpng-fill.png"
            alt
            v-else
            @click="isCollect=!isCollect"
          />
        </div>
      </div>
    </div>
    <div class="recipe-right print-containers" ref="print">
      <template v-if="!!info" >
        <div class="msg-info">
          <div v-if="isV2" style="white-space: pre-wrap;line-height: 2">{{ info.content}}</div>
          <template v-else>
            <div class="msg-item flex-plane-center-l">
              <span>疾病名称：</span>
              <div>{{info.disname?info.disname:info.westerndisease}}</div>
            </div>
            <div class="msg-item flex-plane-center-l">
              <span>性别：</span>
              <div>{{info.patientgender=='M'?'男':'女'}}</div>
            </div>
            <div class="msg-item flex-plane-center-l">
              <span>年龄：</span>
              <div>{{info.patientage}}岁</div>
            </div>
            <div class="msg-item flex-plane-center-l">
              <span>婚姻：</span>
              <div>{{info.patientmarriage==0?'未婚':'已婚'}}</div>
            </div>

            <!-- <div class="msg-item flex-plane-center-l">
                        <span>主诉及现病史：</span>
                        <div>胃痛两天</div>
            </div>-->
            <div class="msg-item flex-plane-center-l" v-if="info.disname">
              <span>辨证：</span>
              <div>{{info.chinesesymptom}}</div>
            </div>
            <div class="msg-item flex-plane-center-l" v-if="info.disname">
              <span>治法：</span>
              <div>{{info.therapy}}</div>
            </div>
          </template>
        </div>
        <div v-for="(item,index) in info.dialist" :key="index">
          <div class="title">{{index==0?'初诊':item.diatimes+'诊'}}</div>

          <div class="right-msg">
            <!--<div class="r-msg-item flex-plane-center-l">
              <span class="name">就诊日期：</span>
              <div class="right flex-plane-center-l flex-wrap">{{item.checktime[0]}}</div>
            </div>-->
            <div class="r-msg-item flex-plane-center-l">
              <span class="name">治疗意见：</span>
              <div class="right" v-for="(item1,index1) in item.fjlist" :key="index1">
                <div class="flex-plane-center-l opinion">
                  <span>{{item1.preusage}}</span>
                  <div v-if="showTransitionPr" class="flex-center zhuanfang no-print" @click="turnRecipe(item1)">转方</div>
                </div>
                <div class="prescription flex-plane-center-l flex-wrap">
                <span
                    v-for="(item2,index2) in item1.verpreitemlist"
                    :key="index2"
                >{{item2.matname}}{{item2.dose}}{{item2.unit}}</span>
                </div>
              </div>
            </div>
            <template v-if="!isV2">
              <div class="r-msg-item flex-plane-center-l">
                <span class="name">主诉：</span>
                <div class="right flex-plane-center-l flex-wrap">{{item.situation?item.situation:'无'}}</div>
              </div>
              <div class="r-msg-item flex-plane-center-l">
                <span class="name">舌象：</span>
                <div class="right flex-plane-center-l flex-wrap">{{item.tongue?item.tongue:'无'}}</div>
              </div>
              <div class="r-msg-item flex-plane-center-l">
                <span class="name">脉象：</span>
                <div class="right flex-plane-center-l flex-wrap">{{item.pulse?item.pulse:'无'}}</div>
              </div>
            </template>
          </div>
        </div>
        <div class="msg-info"></div>
        <div v-if="!isV2" class="r-msg-item flex-plane-center-l">
          <span class="name">按语：</span>
          <div class="right">{{info.words}}</div>
        </div>
        <div class="r-msg-item flex-plane-center-l">
          <span class="name">来源：</span>
          <div class="right flex-plane-center-l flex-wrap">{{info.book}}</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { getDCaseDetail } from "@/api/knowledge.js";
import { numberToUpperCase } from "@/utils/format.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getDataByKey } from '@/api/system';
import printJS from 'print-js';
export default {
  data() {
    return {
      loading: false,
      showPrintHTML: false,
      showTransitionPr: false,
      radio: 0,
      info: null,
      isCollect: false,
      isEdit: true,
      text: ""
    };
  },
  created() {
    getDataByKey({
      key: "transitionPr",
      organizationid: this.getuserinfo.organizationid,
    }).then(data => { this.showTransitionPr = data.enabled; });
    getDataByKey({
      key: "showPrintHTML",
      organizationid: this.getuserinfo.organizationid,
    }).then(data => { this.showPrintHTML = data.enabled; });
    this.getDCaseDetail();
  },
  computed: {
    isV2() { return !!(this.info && this.info.content); },
    ...mapGetters(["getuserinfo"])
  },
  methods: {
    // 转方
    turnRecipe(item) {
      this.setDrugsInfo(item.verpreitemlist);
      this.$router.push({
        path: "/index/prescribing?doctorCase=true"
      });
    },
    //获取详情
    async getDCaseDetail() {
      this.loading = true;
      let res = await getDCaseDetail({
        verId: this.$route.query.verifyid
      });
      if (res.code == 0) {
        res.data.dialist.forEach(item => {
          item.checktime = item.checktime.split(" ");
          item.diatimes = numberToUpperCase(item.diatimes - 1);
        });

        this.info = res.data;
        this.loading = false;
      }
    },
    async print() {
      printJS({
        printable: this.$refs.print,
        type: 'html',
        documentTitle: `名医名方 - 名医医案`,
        scanStyles: false,
        css: ['print/containers.css', 'print/DoctorCaseD.css'],
      })
    },
    ...mapMutations({
      setDrugsInfo: "drug/setDrugsInfo"
    })
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.recipeAuditD {
  height: 82vh;

  .recipe-left {
    &.max {
      width: 50%;
    }
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 5px;
    width: 375px;
    margin-right: 10px;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    position: relative;

    .collect {
      position: absolute;
      top: 10px;
      right: 20px;

      img {
        width: 50px;
      }
    }

    .back-btn {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 34px;
      cursor: pointer;
    }

    .msg {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 10px;

      .msg-item {
        margin-bottom: 10px;
      }

      span {
        text-align-last: justify;
        width: 112px;
        text-align: justify;
      }

      div {
        flex: 1;
        overflow: hidden;
      }
    }
  }

  .recipe-right {
    height: 100%;
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 5px;
    flex: 1;
    overflow: auto;
    box-sizing: border-box;

    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #5386f6;
      margin-bottom: 15px;
    }

    .msg-info {
      display: none;
    }

    .right-msg {
    }

    .r-msg-item {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      // color: #5386F6;
      color: #333;

      margin-bottom: 15px;

      .name {
        text-align-last: justify;
        width: 80px !important;
        text-align: justify;
        display: inline-block;
      }

      .right {
        flex: 1;
        overflow: hidden;

        .opinion {
          span {
            width: auto;
          }

          .zhuanfang {
            width: 60px;
            height: 26px;
            background: #ffae45;
            border-radius: 2px 2px 2px 2px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            cursor: pointer;
          }

          .prescription {
            margin-top: 20px;
          }
        }

        span {
          margin-right: 50px;
          margin-bottom: 15px;
        }
      }
    }

    .save {
      width: 74px;
      height: 36px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-top: 50px;
    }
  }
}

.note {
  margin-top: 40px;
}

.note ::v-deep .el-button {
  height: 36px;
  margin-top: 10px;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .recipeAuditD {
    height: 88vh;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .recipeAuditD {
    height: 88vh;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .recipeAuditD {
    height: 83vh;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .recipeAuditD {
    height: 83vh;
  }
}
</style>