<template>
  <div class="conclusions">
    <el-form
      ref="conclusionsForm"
      v-loading="loading"
      :model="form"
      label-position="left"
      label-width="800px"
    >
      <!-- 是否有问题 -->
      <el-form-item
        :label="$t('trials:medicalFeedback:button:isQuestions')"
        prop="IsHaveQuestion"
        :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
      >
        <el-radio-group
          v-model="form.IsHaveQuestion"
          :disabled="
            isSendMessage ||
            auditState === 2 ||
            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
          "
          @change="isHaveQuestionChange"
        >
          <el-radio
            v-for="item of $d.IsPass"
            :key="'IsHaveQuestion' + item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 质询问题 -->
      <el-form-item
        v-if="form.IsHaveQuestion === true"
        :label="$t('trials:medicalFeedback:title:qcQuestions')"
        prop="Questioning"
        maxlength="500"
        autosize
        show-word-limit
        :rules="[{ required: true, message: $t('common:ruleMessage:specify') }]"
      >
        <el-input
          v-model="form.Questioning"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          maxlength="500"
          :disabled="
            isSendMessage ||
            auditState === 2 ||
            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
          "
        />
      </el-form-item>
      <!-- 审核建议 -->
      <el-form-item
        v-if="form.IsHaveQuestion === true"
        :label="$t('trials:medicalFeedback:title:auditAdviceEnum')"
        prop="AuditAdviceEnum"
        :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
      >
        <el-radio-group
          v-model="form.AuditAdviceEnum"
          :disabled="
            isSendMessage ||
            auditState === 2 ||
            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
          "
        >
          <el-radio
            v-for="item of $d.AuditAdvice"
            :key="item.id"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 相关截图 -->
      <el-form-item
        v-if="form.IsHaveQuestion === true"
        :label="$t('trials:medicalFeedback:form:screenShot')"
      >
        <el-upload
          action
          :accept="accept"
          :class="{ disabled: isSendMessage }"
          :on-preview="handlePictureCardPreview"
          :before-upload="handleBeforeUpload"
          :http-request="uploadScreenshot"
          list-type="picture-card"
          :on-remove="handleRemove"
          :file-list="fileList"
          :disabled="
            isSendMessage ||
            auditState === 2 ||
            !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
          "
          style="width: 300px"
        >
          <i slot="default" class="el-icon-plus" />
          <div
            slot="file"
            slot-scope="{ file }"
            style="width: 100%; height: 100%"
          >
            <viewer
              :ref="file.url"
              :images="images"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
              "
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="OSSclientConfig.basePath + file.url"
                crossOrigin="anonymous"
                alt=""
                style="max-width: 100%; max-height: 100%"
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>

                <span
                  v-if="!isSendMessage && auditState !== 2"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </viewer>
          </div>
        </el-upload>
        <!-- <el-dialog
          append-to-body
          :visible.sync="imgVisible"
          width="600px"
        >
          <el-image :src="imageUrl" width="100%" crossorigin="anonymous">
            <div slot="placeholder" class="image-slot">
              {{ $t('trials:medicalFeedback:message:loading') }}<span class="dot">...</span>
            </div>
          </el-image>
        </el-dialog> -->
      </el-form-item>
    </el-form>
    <!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
      <img :src="imageUrl"  crossorigin="anonymous" alt="">
    </viewer> -->
    <el-dialog
      v-if="chatVisible"
      :visible.sync="chatVisible"
      :close-on-click-modal="false"
      width="800px"
      :title="`${$t(
        'trials:medicalFeedback:title:qaRecord'
      )} (${subjectCode} ${taskBlindName})`"
      append-to-body
    >
      <ChatForm
        ref="chatForm"
        :visit-task-id="visitTaskId"
        :task-medical-review-id="form.TaskMedicalReviewId"
        @handleCloseReply="handleCloseReply"
      />
    </el-dialog>

    <!-- 关闭质疑 -->
    <el-dialog
      v-if="closeQuestionVisible"
      :visible.sync="closeQuestionVisible"
      :close-on-click-modal="false"
      append-to-body
      custom-class="base-dialog-wrapper"
      width="600px"
      :title="$t('trials:medicalFeedback:title:closeQc')"
    >
      <CloseQC
        :task-medical-review-id="medicalReviewInfo.TaskMedicalReviewId"
        @close="closeQuestionVisible = false"
        @refresh="refresh"
      />
    </el-dialog>
  </div>
</template>
<script>
import { saveMedicalReviewInfo } from "@/api/trials";
import ChatForm from "./ChatForm";
import CloseQC from "./CloseQC";
export default {
  name: "AuditConclusions",
  components: {
    ChatForm,
    CloseQC,
  },
  props: {
    medicalReviewInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    auditState: {
      type: Number,
      required: true,
    },
    visitTaskId: {
      type: String,
      required: true,
    },
    subjectCode: {
      type: String,
      required: true,
    },
    taskBlindName: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      form: {
        TaskMedicalReviewId: "",
        IsHaveQuestion: null,
        Questioning: "",
        AuditAdviceEnum: null,
        FileList: [],
      },

      loading: false,
      accept: ".png,.jpg,.jpeg",
      imgVisible: false,
      imageUrl: "",
      uploadDisabled: false,
      fileList: [],
      chatVisible: false,
      userTypeEnumInt: zzSessionStorage.getItem("userTypeEnumInt") * 1,
      isClosedDialog: false,
      isSendMessage: false,
      closeQuestionVisible: false,
      images: [],
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    initForm() {
      if (Object.keys(this.medicalReviewInfo).length > 0) {
        for (const k in this.form) {
          if (this.medicalReviewInfo.hasOwnProperty(k)) {
            if (k === 'IsHaveQuestion' && this.medicalReviewInfo.AuditState === 0) {
              this.form[k] = null
            } else {
              this.form[k] = this.medicalReviewInfo[k]
            }
          }
        }
        this.fileList = [];
        if (this.form.FileList) {
          this.form.FileList.map((file) => {
            this.fileList.push({ name: file.FileName, url: file.ImagePath });
          });
        }
        this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog;
        this.isSendMessage = this.medicalReviewInfo.IsSendMessage;
      }
    },
    handleSave(isPrompt) {
      return new Promise((resolve, reject) => {
        this.$refs["conclusionsForm"].validate((valid) => {
          if (!valid) {
            reject();
          } else {
            this.form.IsSendDialog = this.form.IsHaveQuestion;
            var files = [];
            this.fileList.map((file) => {
              files.push({ FileName: file.name, ImagePath: file.url });
            });
            this.form.FileList = files;
            saveMedicalReviewInfo(this.form)
              .then((res) => {
                if (isPrompt) {
                  this.$message.success(
                    this.$t("common:message:savedSuccessfully")
                  );
                  this.$emit("getMedicalAuditList");
                }
                this.isSendMessage = this.form.IsHaveQuestion;
                resolve();
              })
              .catch(() => {
                reject();
              });
          }
        });
      });
    },
    save() {
      return new Promise((resolve, reject) => {
        this.$refs["conclusionsForm"].validate((valid) => {
          if (!valid) {
            resolve(false);
          } else {
            this.loading = true;
            this.form.IsSendDialog = this.form.IsHaveQuestion;
            var files = [];
            this.fileList.map((file) => {
              files.push({ FileName: file.name, ImagePath: file.url });
            });
            this.form.FileList = files;
            saveMedicalReviewInfo(this.form)
              .then((res) => {
                this.$emit("getMedicalAuditList");
                this.isSendMessage = this.form.IsHaveQuestion;
                this.loading = false;
                resolve(true);
              })
              .catch(() => {
                this.loading = false;
                reject();
              });
          }
        });
      });
    },
    validForm() {
      return new Promise((resolve) => {
        this.$refs["conclusionsForm"].validate((valid) => {
          resolve(valid);
        });
      });
    },
    handleReply() {
      this.chatVisible = true;
    },
    handleCloseReply() {
      this.closeQuestionVisible = true;
    },
    isHaveQuestionChange(val) {
      this.$emit("setIsHaveQuestion", val);
    },
    refresh() {
      this.isClosedDialog = true;
      this.$emit("getMedicalAuditList");
      this.$refs["chatForm"].getMessageList();
      this.$emit("handleSign");
    },
    convertBase64ToBlob(imageEditorBase64) {
      var base64Arr = imageEditorBase64.split(",");
      var imgtype = "";
      var base64String = "";
      if (base64Arr.length > 1) {
        // 如果是图片base64，去掉头信息
        base64String = base64Arr[1];
        imgtype = base64Arr[0].substring(
          base64Arr[0].indexOf(":") + 1,
          base64Arr[0].indexOf(";")
        );
      }
      // 将base64解码
      var bytes = atob(base64String);
      // var bytes = base64;
      var bytesCode = new ArrayBuffer(bytes.length);
      // 转换为类型化数组
      var byteArray = new Uint8Array(bytesCode);

      // 将base64转换为ascii码
      for (var i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);
      }

      // 生成Blob对象（文件对象）
      return new Blob([bytesCode], { type: imgtype });
    },
    async uploadScreenshot(param) {
      this.loading = true;
      try {
        var file = await this.fileToBlob(param.file);
        var trialId = this.$route.query.trialId;
        const res = await this.OSSclient.put(
          `/${trialId}/MedicalReview/${param.file.name}`,
          file
        );
        this.fileList.push({
          name: param.file.name,
          url: this.$getObjectName(res.url),
        });
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    handleBeforeUpload(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        return true;
      } else {
        var msg = this.$t("trials:medicalFeedback:message:format");
        msg = msg.replace("xxx", this.accept);
        this.$alert(msg);
        return false;
      }
    },
    checkFileSuffix(fileName) {
      var index = fileName.lastIndexOf(".");
      var suffix = fileName.substring(index + 1, fileName.length);
      if (
        this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) ===
        -1
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.images = this.fileList.map(
        (f) => this.OSSclientConfig.basePath + f.url
      );
      // this.imageUrl = this.OSSclientConfig.basePath + file.url
      this.$refs[file.url].$viewer.show();
    },
    // 删除图片
    handleRemove(file, fileList) {
      var idx = this.fileList.findIndex((i) => i.url === file.url);
      if (idx === -1) return;
      this.fileList.splice(idx, 1);
    }
  }
}
</script>
<style lang="scss" scoped>
.conclusions {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
  ::v-deep .el-upload-list__item {
    transition: none !important;
    width: 140px;
    height: 140px;
    margin: 0 10px 5px 0;
  }
  ::v-deep .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
  }
  .el-radio-group,
  .el-textarea,
  .el-input,
  .el-select {
    width: 300px;
  }
}
</style>
