<template>
  <div class="header">
    <div class="topheader">
      <div class="user">
        <img
          class="headsculpture"
          src="../../../assets/manage/touxiang.png"
          alt=""
          v-if="list.sex == 'MALE'"
        />
        <img
          class="headsculpture"
          src="../../../assets/manage/nvtouxiang.png"
          alt=""
          v-if="list.sex == 'FEMALE'"
        />
        <div class="name">
          {{ list.patientName }}
        </div>
        <div class="gender">
          {{ list.sex == "MALE" ? "男" : list.sex == "FEMALE" ? "女" : "" }}
        </div>
        <div class="age">
          {{ list.age }}
        </div>
        <!-- <div class="source">
            <div class="item" @click="submit">
              <el-button plain>保存</el-button>
            </div>
            <div class="item" @click="cencal">
              <el-button plain>取消</el-button>
            </div>
          </div> -->
      </div>
      <div class="information">
        <div class="top">
          <div>身份证号：{{ list.cardNo }}</div>
          <div>患者电话：{{ list.patientPhone }}</div>
          <div style="width: 50%">出生日期：{{ list.birthDate }}</div>
        </div>
        <div class="bottom">
          <div>家属电话：{{ list.familyMemberPhone }}</div>
          <div style="width: 50%">住址：{{ list.address }}</div>
        </div>
      </div>
    </div>
    <div class="bottomheader">
      <div style="display: flex">
        <!-- 问卷模板 -->
        <div
          class="right"
          v-if="
            $route.query.taskType == 'QUESTIONNAIRE_SCALE' ||
            $route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'
          "
        >
          <div
            style="float: right; margin-top: 20px"
            v-if="
              $route.query.taskType == 'QUESTIONNAIRE_SCALE' ||
              $route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'
            "
          >
            <el-form
              :inline="true"
              class="demo-form-inline"
              :model="questiondata"
              :rules="rules"
              ref="questiondata"
            >
              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input
                  disabled
                  type="textarea"
                  placeholder="请输入任务处理信息"
                  v-model="questiondata.routeHandleRemark"
                />
              </el-form-item>
            </el-form>
          </div>
          <div
            class="sport"
            v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE'"
          >
            问卷模板: Barthel指数评定问卷
          </div>
          <div
            class="words"
            v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE'"
          >
            您好!本问卷用于评估日常生活能力，请根据自身日常实际表现选择合适的选项。
          </div>

          <div
            class="sport"
            v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'"
          >
            人工随访模板: 神经内科人工随访
          </div>
          <div
            class="words"
            v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'"
          >
            **您好!
          </div>
          <div
            class="words"
            v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'"
          >
            我是✕✕医院的工作人员，今天给您打电话想要了解一下您的恢复情况。
          </div>

          <div
            class="words"
            v-for="(item, index) in questiondata.subjectResultList"
            :key="index"
          >
            {{ index + 1 }}.{{ item.questionName }}
            <span v-if="item.questionType == 'MULTIPLE_CHOICE'"
              >（单选题）</span
            >
            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
              >（多选题）</span
            >
            <span v-if="item.questionType == 'SCORING_QUESTIONS'"
              >（打分题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
              >（组合单选题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
              >（组合多选题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'"
              >（组合填空题）</span
            >
            <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'"
              >（填空题）</span
            >
            <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'"
              >（组合打分题）</span
            >
            <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
              >（日期填空题）</span
            >
            <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
              >（时间填空题）</span
            >
            <el-radio-group
              v-if="
                item.questionType == 'MULTIPLE_CHOICE' ||
                item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
                item.questionType == 'SCORING_QUESTIONS' ||
                item.questionType == 'COMBINATION_SCORING_SUBJECT'
              "
              v-model="item.checked"
              class="custom-radio-group"
            >
              <el-radio
                disabled
                class="custom"
                v-for="(aitem, aindex) in item.optionResults"
                :key="aindex"
                :label="aitem.id"
                @change="radioChange($event, aitem, index)"
                >{{ aitem.optionName }}</el-radio
              >
            </el-radio-group>
            <!-- 多选、组合多选 -->
            <el-checkbox-group
              v-model="checkeddata"
              v-if="
                item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
                item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
              "
            >
              <el-checkbox
                disabled
                v-for="(aitem, aindex) in item.optionResults"
                :key="aindex"
                :label="aitem.id"
                @change="radioChangecheck($event, aitem, index, aindex)"
                >{{ aitem.optionName }}</el-checkbox
              >
            </el-checkbox-group>
            <!-- 填空题、组合填空 -->
            <div
              v-if="
                item.questionType == 'FILL_IN_THE_BLANKS' ||
                item.questionType == 'COMBINATION_BLANKS_SUBJECT'
              "
              class="tk"
            >
              <el-input
                disabled
                v-model="item.fillBlanksAnswer"
                placeholder="请输入答案"
                type="textarea"
              />
              <!-- <el-input></el-input> -->
            </div>
            <!-- 日期填空题、 -->
            <div
              v-if="item.questionType == 'DATE_BLANKS_SUBJECT'"
              style="margin: 20px 0 10px 30px"
            >
              <el-date-picker
                disabled
                @change="timepicker($event, index)"
                clearable
                v-model="item.fillBlanksAnswer"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <!-- 时间填空题 -->
            <div
              style="margin: 20px 0 10px 30px"
              v-if="item.questionType == 'TIME_BLANKS_SUBJECT'"
            >
              <el-time-select
                disabled
                @change="timepickerselect($event, index)"
                clearable
                v-model="item.fillBlanksAnswer"
                :picker-options="{
                  start: '08:30',
                  step: '00:30',
                  end: '23:30',
                }"
                placeholder="选择时间"
              >
              </el-time-select>
            </div>
          </div>
        </div>
        <!-- 电话外呼 -->
        <div v-if="$route.query.taskType == 'PHONE_OUTBOUND'">
          <div class="sport">电话外呼</div>

          <div class="nexttime">
            <el-form
              ref="form"
              :model="formlist"
              label-width="110px"
              :inline="true"
            >
              <el-form-item label="话术名称" prop="scriptName">
                <el-input
                  disabled
                  v-model="formlist.scriptName"
                  placeholder="请输入话术名称"
                />
              </el-form-item>
              <br />
              <el-form-item label="通用话术名称" prop="commonScriptName">
                <el-input
                  disabled
                  v-model="formlist.commonScriptName"
                  placeholder="请输入通用话术名称"
                />
              </el-form-item>
              <br />
              <el-form-item label="话术简介" prop="scriptIntroduction">
                <el-input
                  disabled
                  type="textarea"
                  v-model="formlist.scriptIntroduction"
                  placeholder="请输入话术简介"
                />
              </el-form-item>
              <br />
              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input
                  disabled
                  type="textarea"
                  v-model="questiondata.routeHandleRemark"
                  placeholder="请输入任务处理信息"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
      <script>
import { selectFollowPatientInfo, question, addPatientQuestionResult } from "@/api/system/followupsee";
import {
  selectPatientQuestionSubmit,
} from "@/api/system/taskExecuteRecord";
import { getScript } from "@/api/manage/script";
import Cookies from 'js-cookie'
export default {
  name: "patientdetails",
  data() {
    return {
      obj: {},
      checkList: [],
      checked: false,
      formlist: {},

      rules: {
        routeHandleRemark: [
          { required: true, message: '请输入任务处理信息', trigger: 'change' }
        ],
      },
      radio: "B",
      id: "",
      list: [],
      type: '',
      checkeddata: [],
      questiondata: {
        // routeHandleRemark:null,
        totalScore: 0,  //总分
        routeHandlePerson: null,
        routeHandleId: null,
      },
    };

  },
  created() {
    this.id = this.$route.query.manageRouteId;
    this.info();
    if (this.$route.query.taskType == 'QUESTIONNAIRE_SCALE' || this.$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP') {
      this.selectlist();

      console.log(this.$route.query.routeHandleRemark, "res");

    } else {
      if (this.$route.query.routeHandleRemark) {
        this.questiondata.routeHandleRemark =
          this.$route.query.routeHandleRemark;
      }
      getScript(this.$route.query.templateId).then(response => {
        if (response.data) {
          this.formlist = response.data;
        }
      });
    }
  },
  methods: {
    // 问卷和随访
    selectlist() {
      selectPatientQuestionSubmit(this.$route.query.taskExecuteRecordId).then((res) => {
        this.questiondata = res.data;
        if (this.$route.query.routeHandleRemark) {
          this.questiondata.routeHandleRemark =
            this.$route.query.routeHandleRemark;
        }
        this.questiondata.subjectResultList.forEach((e) => {
          e.optionResults.forEach((el) => {
            if (
              (el.optionChooseSign == "0" &&
                e.questionType == "MULTIPLE_CHOICE") ||
              e.questionType == "COMBINATION_RADIO_SUBJECT"
            ) {
              e.checked = el.id;
            } else if (
              el.optionChooseSign == "0" &&
              e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
            ) {
              this.checkeddata.push(el.id);
            } else if (
              el.optionChooseSign == "0" &&
              e.questionType == "SCORING_QUESTIONS"
            ) {
              e.checked = el.id;
            } else if (
              e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
              el.optionChooseSign == "0"
            ) {
              this.checkeddata.push(el.id);
            }
          });
        });
      });
    },
    // 日期填空题
    timepicker(e, index) {
      this.questiondata.subjectResultList[index].fillBlanksAnswer = e
    },
    // 时间填空题
    timepickerselect(e, index) {
      this.questiondata.subjectResultList[index].fillBlanksAnswer = e
    },
    // 选中某个单选框时，由radio时触发
    radioChange(e, item, index) {
      console.log(e, item, index, '选中某个单选框时')
      this.questiondata.subjectResultList[index].optionResults.forEach(el => {
        if (el.id == item.id) {
          el.optionChooseSign = '0'
        }
        else {
          el.optionChooseSign = '1'
        }
      })
      console.log(this.questiondata, 'this.questiondata')
      this.questiondata
    },
    // 复选框
    radioChangecheck(e, item, index, aindex) {
      console.log(e, item, index, '选中某个复选框时')
      if (e == true) {
        this.questiondata.subjectResultList[index].optionResults[aindex].optionChooseSign = '0'
      } else {
        this.questiondata.subjectResultList[index].optionResults[aindex].optionChooseSign = '1'
      }
    },
    info() {
      selectFollowPatientInfo(this.id).then((res) => {
        this.list = res.data;
      });

    },
    questioninfo() {
      question(this.$route.query.templateId).then((res) => {
        this.questiondata = res.data;
        this.questiondata.questionInfoId = res.data.id;
        this.questiondata.routeHandlePerson = Cookies.get('userName')
        this.questiondata.routeHandleId = Cookies.get('userId')
        this.questiondata.patientId = this.$route.query.patientId
        this.questiondata.manageRouteId = this.$route.query.manageRouteId
        this.questiondata.manageRouteNodeId = this.$route.query.manageRouteNodeId
        this.questiondata.patientName = this.$route.query.patientName
        this.questiondata.manageRouteName = this.$route.query.manageRouteName
        this.questiondata.manageRouteNodeName = this.$route.query.manageRouteNodeName
        this.questiondata.taskType = this.$route.query.taskType
        this.questiondata.visitRecordId = this.$route.query.visitRecordId
        this.questiondata.totalScore = 0
        this.questiondata.subjectResultList.forEach(e => {
          if (e.questionType == 'MULTIPLE_CHOICE' || e.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || e.questionType == 'SCORING_QUESTIONS' || e.questionType == 'COMBINATION_RADIO_SUBJECT' || e.questionType == 'COMBINATION_MULTIPLE_SUBJECT' || e.questionType == 'COMBINATION_SCORING_SUBJECT') {
            e.whetherScore = '1'
          } else {
            e.whetherScore = '0'
          }
          e.optionResults.forEach(el => {
            el.questionNumber = e.questionNumber
            if (e.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || e.questionType == 'COMBINATION_MULTIPLE_SUBJECT') {
              el.optionChooseSign = '1'
            }
          })
        })
      });

    },

  },
};
    </script>
      <style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background: #fff !important;
  color: #606266;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
  background: #fff;
}
.tk {
  ::v-deep .el-textarea__inner {
    margin: 20px 0 10px 30px;
  }
}

::v-deep .el-radio {
  padding: 10px;
}
::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 10px 24px;
}
::v-deep .el-checkbox {
  padding: 10px 0 10px 0px;
  // padding: 10px;
}
.custom-radio-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 10px;
  .custom {
    padding: 10px 0 10px 10px;
  }
}
.bodytop {
  position: relative;
  top: 20px;
  // height: 500px;
  width: 400px;
  margin: 0 auto;
  // background: red;f
  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: 362px;
    // height: 127px;
    margin: 0px 0px 0px 30px;
  }
  .know {
    margin: 11px 0px 10px 30px;
    font-size: 20px;
    font-weight: 550;
  }
  .knowlist {
    margin: 10px 0px 10px 30px;
    font-size: 16px;
  }
}
.right {
  width: 100%;
  height: 500px;
  // background: yellow;
}
.header {
  background-color: #f1f3f5;
  padding-top: 10px;

  ::v-deep .el-tabs__header {
    margin: 0 !important;
    width: 100%;
    // overflow: auto;
    // height: 500px;
    // background: red;
  }

  .bottomheader {
    overflow: auto;
    width: 99%;
    background-color: #fff;
    margin: 10px auto;
    padding: 10px 20px;
    .sport {
      padding: 10px 50px 10px 10px;
      font-size: 20px;
      font-weight: 600;
    }
    .words {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }
    .sports {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      font-size: 18px;
      font-weight: 600;
    }
    .word {
      font-size: 14px;
      font-weight: 550;
      padding: 50px 50px 10px 10px;
    }
    .videoleft {
      width: 40%;
      height: 200px;
      background: red;
    }
    .time {
      font-size: 20px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
    .number {
      width: 25px;
      height: 25px;
      text-align: center;
      display: inline-block;
      color: white;
      background: blue;
      border-radius: 50%;
    }
    .nexttime {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }
    .images {
      width: 53%;
      height: 241px;
      margin: 0 auto;
      background: red;
    }
    .attention {
      font-size: 14px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }
    // .videobottom
    // {
    //   font-size: 14px;
    //   font-weight: 550;
    //   padding: 10px 50px 10px 10px;
    // }
  }

  .topheader {
    width: 99%;
    background-color: #fff;
    margin: 0 auto;

    .information {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 20px;
      height: 110px;

      .top,
      .bottom {
        color: #666666;
        width: 100%;
        display: flex;

        div {
          width: 25%;
        }
      }
    }

    .user {
      width: 100%;
      padding: 0 20px;
      display: flex;
      height: 80px;
      align-items: center;
      line-height: 80px;

      .source {
        display: flex;
        position: relative;
        right: 59px;
        position: absolute;
        .item {
          margin-left: 20px;
        }
      }

      .name {
        font-size: 20px;
        padding-left: 12px;
      }

      .gender {
        padding-left: 10px;
      }

      .age {
        padding-left: 10px;
      }

      .headsculpture {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
  