<template>
  <div class="recipeAuditD flex-plane-center-top">
    <div class="recipe-left">
      <div class="back-btn flex-center" @click="$router.back()">返回</div>
      <div class="msg">
        <div class="msg-item flex-plane-center-l">
          <span>姓名：</span>
          <div>{{info.name}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>性别：</span>
          <div>{{info.sex}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>年龄：</span>
          <div>{{info.age}}岁</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>身份证：</span>
          <div>{{info.idcard}}</div>
        </div>
      </div>
    </div>
    <div class="recipe-right">
      <div class="right-msg" v-for="(item,index) in info.patientDetailVos" :key="index">
        <div class="title flex-plane-center-l">
          <span>{{index==0?'初诊':(index+1)+'诊'}}</span>
          <div
            style="margin-left:20px;"
            class="flex-center zhuanfang"
            @click="turnCase(item.mainDiagnosis.pid)"
          >转病历</div>
        </div>
        <div class="flex-plane-center-l">
          <div class="r-msg-item flex-plane-center-l">
            <span class="name">科室：</span>
            <div class="right flex-plane-center-l flex-wrap">{{item.department}}</div>
          </div>
          <div class="r-msg-item flex-plane-center-l mr-l50">
            <span class="name">医生签名：</span>
            <div class="right flex-plane-center-l flex-wrap">{{item.doctorName}}</div>
          </div>
          <div class="r-msg-item flex-plane-center-l mr-l50">
            <span class="name">就诊日期：</span>
            <div class="right flex-plane-center-l flex-wrap">{{item.seeClinicTime}}</div>
          </div>
        </div>
        <div class="flex-plane-center-l">
          <div class="r-msg-item flex-plane-center-l">
            <span class="name">主诉：</span>
            <div
              class="right flex-plane-center-l flex-wrap"
            >{{item.electronicmedicalrecord.chiefcomplaint}}</div>
          </div>
          <div class="r-msg-item flex-plane-center-l mr-l50">
            <span class="name">既往史：</span>
            <div
              class="right flex-plane-center-l flex-wrap"
            >{{item.electronicmedicalrecord.pasthistory}}</div>
          </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.electronicmedicalrecord.historypresent}}</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.electronicmedicalrecord.fourmedicine}}</div>
        </div>
        <div class="flex-plane-center-l">
          <div class="r-msg-item flex-plane-center-l">
            <span class="name">体格检查：</span>
            <div class="right flex-plane-center-l flex-wrap">无</div>
          </div>
          <div class="r-msg-item flex-plane-center-l mr-l50">
            <span class="name">辅助检查：</span>
            <div class="right flex-plane-center-l flex-wrap">无</div>
          </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.mainDiagnosis.namemedicine?item.mainDiagnosis.namemedicine:item.mainDiagnosis.diagnosis}}</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.mainDiagnosis.namemedicine?item.mainDiagnosis.treatment:'无'}}</div>
        </div>

        <div class="r-msg-item flex-plane-center-l">
          <span class="name">治疗意见：</span>
          <div class="right">
            <div v-for="(item1,index1) in item.patientprescription" :key="index1">
              <div class="flex-plane-center-l opinion">
                <span>{{item1.type=='0'?'中药处方':item1.type=="1"?'中药制剂':'适宜技术处方'}}</span>
                <div
                  class="flex-center zhuanfang"
                  @click="$router.push({path:'/index/prescribing?recipeID='+item1.pid})"
                >转方</div>
              </div>
              <div class="prescription flex-plane-center-l flex-wrap">
                <span
                  v-for="(item2,index2) in item1.myPatientDetailVos"
                  :key="index2"
                >{{item2.name}}{{item2.num}}{{item2.unit}}</span>
              </div>
            </div>
          </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.patientprescription | dealCommend}}</div>
        </div>

        <div>
          <el-image
            :preview-src-list="[item1]"
            style="width:100px;height:100px;margin-right:20px;"
            :src="item1"
            alt
            v-for="(item1,index1) in item.electronicmedicalrecord.image1"
            :key="index1"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import { getPatiensMedDetail, patiensTrunCase } from "@/api/business.js";
export default {
  data() {
    return {
      info: {}
    };
  },
  created() {
    this.getPatiensMedDetail();
  },
  filters: {
    dealCommend(data) {
      if (!data) {
        return "无";
      }
      if (data.length == 0) {
        return "无";
      } else {
        let str = [];
        data.forEach((item, index) => {
          str.push("处方" + (index + 1) + ":" + item.command);
        });

        // return data[0].command
        return str.join("、");
      }
    }
  },
  methods: {
    // 转病例
    turnCase(id) {
      if (Object.keys(this.getPatiensInfo).length == 0) {
        this.$message.error("请先选择病人就诊");
        return;
      }
      this.patiensTrunCase(id);
    },
    // 转病例 api
    async patiensTrunCase(id) {
      let res = await patiensTrunCase({
        pid: id,
        recordsid: this.getPatiensInfo.pid
      });
      if (res.ResultCode == 0) {
        this.$message.success("操作成功");
        // sessionStorage.setItem('outpatientDiagnosis', JSON.stringify(res.Data.outpatientDiagnosis))
        this.setOutpatientDiagnosis(
          JSON.stringify(res.Data.outpatientDiagnosis)
        );
        this.$router.push({
          path: "/index/diagnosis?type=trun"
        });
      }
    },
    // 获取详细信息
    async getPatiensMedDetail() {
      let res = await getPatiensMedDetail({
        patientId: this.$route.query.pid,
        namemedicine: this.$route.query.name,
        endTime: this.$route.query.endTime
      });
      if (res.ResultCode == 0) {
        res.Data.patientDetailVos.forEach(item => {
          item.electronicmedicalrecord.image1 = item.electronicmedicalrecord
            .image1
            ? item.electronicmedicalrecord.image1.split(",")
            : [];
        });
        this.info = res.Data;
      }
    },
    ...mapMutations({
      setOutpatientDiagnosis: "user/setOutpatientDiagnosis"
    })
  },
  computed: {
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.recipeAuditD {
  height: 100%;

  .recipe-left {
    padding: 33px 26px;
    background: #ffffff;
    border-radius: 5px;
    width: 375px;
    height: 100%;
    margin-right: 20px;
    box-sizing: border-box;

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

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

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

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

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

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

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

        margin-bottom: 28px;

        .name {
          text-align-last: justify;
          width: 80px;
          text-align: justify;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .opinion {
            span {
              width: auto;
            }

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

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

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

    .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;
    }
  }
}
</style>