<template>
  <div style="background-color: #f1f3f5">
    <div
      slot="footer"
      style="float: right; padding: 10px 10px 0 0; height: 35px"
    >
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="auditing"
        >审核通过</el-button
      >
      <el-button size="mini" type="info" @click="ignore">忽略</el-button>
    </div>
    <div class="card">
      <div class="cardleft">
        <div class="title">
          <div style="display: flex; align-items: center">
            <img
              class="headsculpture"
              v-if="list.sex == 'MALE'"
              src="../../../assets/manage/touxiang.png"
            />
            <img
              class="headsculpture"
              v-else
              src="../../../assets/manage/nvtouxiang.png"
            />
            <div class="name">
              {{ list.patientName ? list.patientName : "" }}
            </div>
            <div class="genderandage">
              <span>
                {{ list.sex == "MALE" ? "男" : "" }}
                {{ list.sex == "FEMALE" ? "女" : "" }}
              </span>
              <span v-if="list.sex && list.age" style="padding: 0 6px">|</span>
              <span v-if="list.age">{{ list.age }}岁</span>
            </div>
          </div>
          <div class="source">
            <div class="situation item">
              {{ list.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
              {{ list.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
            </div>
            <div
              class="item"
              style="color: #00e06e; border-color: #00e06e"
              v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'"
            >
              <img src="../../../assets/manage/gzh.png" alt="" />
              <div>公众号</div>
            </div>
            <div
              class="item"
              style="color: #339de5; border-color: #339de5"
              v-if="list.patientSource == 'WE_CHAT_APPLET'"
            >
              <img src="../../../assets/manage/xcx.png" alt="" />
              <div>小程序</div>
            </div>
            <div
              class="item"
              style="color: #f4881f; border-color: #f4881f"
              v-if="list.patientSource == 'MANAGE_END'"
            >
              <img src="../../../assets/manage/gld.png" alt="" />
              <div>管理端</div>
            </div>
          </div>
        </div>
        <div class="texts">
          <div class="text">
            医院: {{ list.hospitalAgencyName ? list.hospitalAgencyName : "" }}
          </div>
          <div class="text">
            科室: {{ list.departmentName ? list.departmentName : "" }}
          </div>
          <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
            入院时间: {{ list.admissionTime }}
          </div>
          <div class="text" v-if="list.visitMethod == 'BE_IN_HOSPITAL'">
            出院时间: {{ list.dischargeTime }}
          </div>
          <div class="text" v-if="list.visitMethod == 'OUTPATIENT_SERVICE'">
            就诊时间: {{ list.dischargeTime }}
          </div>
        </div>
        <el-descriptions title="诊断信息" style="margin: 16px auto">
          <el-descriptions-item label="主要诊断">{{
            list.mainDiagnosis
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="手术信息"
          style="margin: 16px auto; border-top: 1px solid #e6ebf5"
          v-if="list.visitMethod != 'OUTPATIENT_SERVICE'"
        >
          <el-descriptions-item label="手术名称">{{
            list.surgicalName
          }}</el-descriptions-item>
        </el-descriptions>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="入院记录" name="-1">
            <div v-html="list.inHospitalInfo"></div>
          </el-collapse-item>
          <el-collapse-item
            title="手术记录"
            name="-2"
            v-if="list.visitMethod != 'OUTPATIENT_SERVICE'"
          >
            <div v-html="list.surgicalRecord"></div>
          </el-collapse-item>
          <el-collapse-item
            title="出院记录"
            name="-3"
            v-if="list.visitMethod != 'OUTPATIENT_SERVICE'"
          >
            <div v-html="list.outHospitalInfo"></div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="cardright">
        <div class="text" style="font-size: 20px">任务:</div>
        <div
          v-for="item in nodelist"
          :key="item.manageRouteId"
          style="margin: 0 auto 30px"
        >
          <div class="texts">
            <div class="text">任务名称: {{ item.routeName }}</div>
            <div class="text">
              适用范围: {{ item.suitRange == "IN_THE_HOSPITAL" ? "在院" : "" }}
              {{ item.suitRange == "DISCHARGE" ? "出院" : "" }}
              {{ item.suitRange == "OUTPATIENT_SERVICE" ? "门诊" : "" }}
              {{
                item.suitRange == "OUTPATIENT_SERVICE_DISCHARGE"
                  ? "门诊+出院"
                  : ""
              }}
            </div>
          </div>
          <div v-for="uitem in item.nodeList" :key="uitem.id">
            <div class="texts">
              <div class="text" style="font-size: 14px; font-weight: 400">
                任务内容：{{
                  uitem.taskType == "PHONE_OUTBOUND" ? "电话外呼" : ""
                }}
                {{ uitem.taskType == "QUESTIONNAIRE_SCALE" ? "问卷量表" : "" }}
                {{ uitem.taskType == "PROPAGANDA_ARTICLE" ? "宣教文案" : "" }}
                {{ uitem.taskType == "TEXT_REMIND" ? "文字提醒" : "" }}
                {{ uitem.taskType == "ARTIFICIAL_FOLLOW_UP" ? "人工随访" : "" }}
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'PHONE_OUTBOUND'"
              >
                话术模板：{{ uitem.phoneTemplateName }}
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'"
              >
                问卷模板：{{ uitem.questionnaireName }}
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'"
              >
                问卷有效期：{{ uitem.questionExpirationDate }}天
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'PROPAGANDA_ARTICLE'"
              >
                宣教模板：{{ uitem.propagandaTitle }}
              </div>
              <div class="textarea" v-if="uitem.taskType == 'TEXT_REMIND'">
                提醒内容：{{ uitem.textRemindContent }}
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'ARTIFICIAL_FOLLOW_UP'"
              >
                人工随访模板：{{ uitem.questionnaireName }}
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'ARTIFICIAL_FOLLOW_UP'"
              >
                人工随访详情：<el-button
                  @click="lookquestion(uitem)"
                  style="padding: 6px 10px"
                  >预览</el-button
                >
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'QUESTIONNAIRE_SCALE'"
              >
                问卷模板详情：<el-button
                  @click="lookquestion(uitem)"
                  style="padding: 6px 10px"
                  >预览</el-button
                >
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'PROPAGANDA_ARTICLE'"
              >
                宣教模板详情：<el-button
                  @click="lookpropaganda(uitem)"
                  style="padding: 6px 10px"
                  >预览</el-button
                >
              </div>
              <div
                class="text"
                style="font-size: 14px; font-weight: 400"
                v-if="uitem.taskType == 'PHONE_OUTBOUND'"
              >
                话术模板详情：<el-button
                  @click="lookphone(uitem)"
                  style="padding: 6px 10px"
                  >预览</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 话术预览弹框 -->
    <el-dialog
      title="话术预览"
      :visible.sync="phoneopen"
      width="30%"
      :before-close="openfalse"
    >
      <img style="width: 200px" :src="baseUrl + lookitem.scriptFilePath" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="phoneopen = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 宣教预览弹框 -->
    <el-dialog
      title="宣教预览"
      :visible.sync="propagandaopen"
      width="30%"
      :before-close="openfalse"
    >
      <div class="titletop">文章模板:{{ lookitem.propagandaTitle }}</div>
      <div class="bodytop">
        <div class="titledata">{{ lookitem.propagandaTitle }}</div>
        <div>
          <img :src="baseUrl + lookitem.propagandaCoverPath" alt="" />
          <div class="know">知识卡片</div>
          <div class="knowlist">
            <Editorxj v-model="lookitem.propagandaContent" :min-height="192" />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 问卷预览弹框 -->
    <questionopen ref="question" :lookitem="lookitem"></questionopen>
    <!-- <el-dialog title="问卷预览" :visible.sync="questionopen" width="30%" :before-close="openfalse">
            <div class="titletop">文章模板:{{ lookitem.propagandaTitle }}</div>
            <div class="bodytop">
                <div class="titledata">{{ lookitem.propagandaTitle }}</div>
                <div>
                    <img :src="baseUrl + lookitem.propagandaCoverPath" alt="" />
                    <div class="know">知识卡片</div>
                    <div class="knowlist">
                        {{ lookitem.propagandaContent }}
                    </div>
                </div>
            </div>
        </el-dialog> -->
  </div>
</template>

<script>
import {
  getRouteNodeList,
  getByPatientId,
  audit
} from '@/api/manage/Auditing.js'
import { getAge } from "@/utils/age";
import questionopen from '../components/questionopen.vue';
import Editorxj from "../../system/Editorxj/index.vue";
export default {
  components: {
    questionopen,
    Editorxj
  },
  name: "Auditing",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      activeNames: ['-1', '-2', '-3'],
      list: {},
      nodelist: [],
      lookitem: {},
      phoneopen: false,
      propagandaopen: false,
    };
  },
  created() {
    this.info();
  },
  methods: {
    //查看宣教模板
    lookpropaganda(item) {
      this.lookitem = item.detailInfo
      this.propagandaopen = true
    },
    //查看话术模板
    lookphone(item) {
      this.lookitem = item.detailInfo
      this.phoneopen = true
    },
    //查看问卷模板
    lookquestion(item) {
      this.lookitem = item.detailInfo
      this.$refs.question.questionopentrue()
    },
    //关闭预览
    openfalse() {
      this.phoneopen = false
      this.propagandaopen = false
      this.lookitem = {}
    },
    // 忽略
    ignore() {
      let manageRouteNodeIds = []
      this.nodelist.map(e => {
        manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
      })
      this.$prompt('请输入忽略备注信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let obj = {
          routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
          routeCheckRemark: value,
          routeCheckStatus: 'DISAGREE',
          manageRouteNodeIds: manageRouteNodeIds
        }
        audit(obj).then(res => {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '已忽略,即将返回上一页',
            duration: 3000
          });
          setTimeout(() => {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
              this.$router.push({
                path: "/task/manualReview",
              });
            })
          }, 3000);
        })
      })
    },
    //审核
    auditing() {
      let manageRouteNodeIds = []
      this.nodelist.map(e => {
        manageRouteNodeIds = [...manageRouteNodeIds, ...e.nodeList.map(el => el.id)]
      })
      this.$prompt('请输入审核备注信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let obj = {
          routeCheckPerson: JSON.parse(localStorage.getItem('user')).nickName,
          routeCheckRemark: value,
          routeCheckStatus: 'AGREE',
          manageRouteNodeIds: manageRouteNodeIds
        }
        audit(obj).then(res => {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '审核通过,即将返回上一页',
            duration: 3000
          });
          setTimeout(() => {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
              this.$router.push({
                path: "/task/manualReview",
              });
            })
          }, 3000);
        })
      })
    },
    info() {
      getByPatientId(this.$route.query.patientId).then(res => {
        res.data.birthDate ? res.data.age = getAge(res.data.birthDate) : ''
        this.list = res.data
      })
      getRouteNodeList({ patientId: this.$route.query.patientId, taskCreateType: 'MANUAL_CREATE', routeCheckStatus: "UNAUDITED" }).then(res => {
        this.nodelist = res.data
      })
    },
    cancel() {
      this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
        this.$router.push({
          path: "/task/manualReview",
        });
      })
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  font-size: 16px;
  font-weight: bold;
}

.texts {
  margin: 16px 0 20px;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  font-size: 14px;

  .text {
    margin-bottom: 10px;
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}

.card {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 20px 0;
  height: calc(100vh - 119px);

  .cardleft {
    width: 35%;
    background-color: #fff;
    overflow: scroll;
    padding: 20px;

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

      .source {
        display: flex;

        .situation {
          background-color: #f1faf7;
          padding: 3px 6px;
          color: #83cac0 !important;
          border: 1px solid #83cac0 !important;
        }

        .item {
          font-size: 14px;
          margin-left: 5px;
          border: 1px solid #fff;
          padding: 3px 6px;
          border-radius: 5px;
          justify-content: center;
          display: flex;
          align-items: center;

          img {
            margin-right: 2px;
            width: 16px;
            height: 16px;
          }
        }
      }

      .name {
        padding: 0 6px;
      }

      .genderandage {
        padding: 0 6px;
      }

      .headsculpture {
        width: 35px;
        height: 35px;
      }
    }
  }

  .cardright {
    overflow: scroll;
    background-color: #fff;
    width: 62%;
    padding: 20px;
    font-size: 14px;

    .textarea {
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 10px;
      width: 100%;
    }

    .text {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.titletop {
  font-size: 16px;
  font-weight: 700;
}

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