<template>
  <div id="audit-detail">
    <div class="top">
      <div class="audit-detail_header p-24">
        <div class="left">
          <span v-if="!isEmpty">当前审核</span>
          <span v-if="!isEmpty" class="f-b"
            >【{{ curUnion }}】<span v-if="!editStatus"
              >【剩余{{ auditNum }}】</span
            ></span
          >
        </div>
        <div class="right">
          <el-button
            class="btn"
            @click="handleEdit"
            v-if="patientId && !isEmpty && !editStatus"
            >修改</el-button
          >
          <el-button class="btn" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
    </div>
    <div class="table-content p-24">
      <component
        :is="curComponent"
        :patient-id="patientId"
        :no-data="isEmpty"
        ref="screen"
      ></component>
    </div>
    <div v-if="!isEmpty" class="choose-handle p-24">
      <span v-if="!editStatus">请选择审核结果:</span>
      <div class="btn_group">
        <el-button
          v-for="(item, index) in btnGroup"
          :key="index"
          type="primary"
          class="p-btn"
          size="medium"
          @click="showDialog(item.value)"
          >{{ item.text }}</el-button
        >
        <span v-if="editStatus" class="op"
          >{{
            checkStatus == "2"
              ? "驳回修改建议 : "
              : checkStatus == "4"
              ? "不合格原因 : "
              : ""
          }}
          {{ checkStatus == "3" ? "" : checkNote }}</span
        >
      </div>
    </div>
    <div class="p-24 empty"></div>
    <!-- 编辑提交前弹窗 -->
    <public-dialog ref="editDialog" @onSubmit="onSubmit" @onCancel="onCancel">
      <!-- 修改审核结果 优先触发提示 -->
      <template v-if="!confirmStatus" slot="content">
        <div class="title">温馨提示</div>
        <div class="content">
          <div class="showTips">
            该病例已经审核【{{
              checkStatus == 2
                ? "驳回修改"
                : checkStatus == 3
                ? "合格"
                : checkStatus == 4
                ? "不合格"
                : ""
            }}】，需要改为{{
              btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : ""
            }}吗
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="onCancel">否</el-button>
          <el-button type="primary" @click="editSubmit">是</el-button>
        </div>
      </template>
    </public-dialog>
    <public-dialog
      ref="publicDialog"
      :show-close="showClose"
      @onSubmit="onSubmit"
      @onCancel="onCancel"
    >
      <!-- 审核结果回显 -->
      <template v-if="!confirmStatus && !editLabelFlag" slot="content">
        <div class="title">
          {{ btnGroup[curBtn - 1] ? btnGroup[curBtn - 1].text : "" }}
        </div>
        <div class="content">
          <div v-if="curBtn != 1" class="noPass">
            <el-form
              ref="form"
              label-position="top"
              :model="form"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                :label="curBtn == 2 ? '不合格原因' : '驳回修改建议'"
                prop="reason"
              >
                <el-input
                  v-model="form.reason"
                  type="textarea"
                  :placeholder="
                    curBtn == 2 ? '请填写不合格原因' : '请填写驳回修改建议'
                  "
                ></el-input>
              </el-form-item>
            </el-form>
            <!-- 标签部分 -->
            <div class="labelPlace">
              <div class="labelList">
                <template v-for="(item, index) in reasonList">
                  <div
                    v-if="item.note ? item.note.length <= 8 : false"
                    :key="index"
                    :class="[
                      'listItem',
                      selectedReason.includes(item.note) ? 'active' : '',
                    ]"
                    @click="setReason(item)"
                  >
                    <!-- selectedReason.includes(item) ? 'active' : '', -->
                    {{ item.note }}
                  </div>
                  <template v-if="item.note ? item.note.length > 8 : false">
                    <el-tooltip
                      :key="index"
                      class="item"
                      effect="dark"
                      :content="item.note"
                      placement="top"
                    >
                      <div
                        :class="[
                          'listItem',
                          selectedReason.includes(item.note) ? 'active' : '',
                        ]"
                        @click="setReason(item)"
                      >
                        <!-- selectedReason.includes(item) ? 'active' : '', -->
                        {{ item.note }}
                      </div>
                    </el-tooltip>
                  </template>
                </template>
              </div>
              <div class="labelEdit">
                <span @click="editLabel">编辑标签</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" :loading="loading" @click="onSubmit">{{
            editStatus
              ? curBtn == 1
                ? "好的"
                : "提交"
              : "确认并进入下一例审核"
          }}</el-button>
        </div>
      </template>
      <!-- 标签的弹窗 -->
      <template v-if="!confirmStatus && editLabelFlag" slot="content">
        <div class="left-back" @click="editLabelFlag = false">
          <i class="el-icon-back"></i>
        </div>
        <div class="title">编辑标签</div>
        <div class="content">
          <ul class="edit_reasonList">
            <li v-for="(item, index) in reasonList" :key="index">
              <el-input
                v-model="item.note"
                style="width: 86%"
                placeholder="请输入标签内容"
                clearable
              >
              </el-input>
              <el-button
                type="text"
                style="color: red"
                :disabled="reasonList.length == 1 && item.note == ''"
                @click="deleteLabel(index)"
                >删除</el-button
              >
              <el-button
                v-show="index == reasonList.length - 1"
                type="text"
                @click="addLabel"
                >新增</el-button
              >
            </li>
          </ul>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            :loading="loading"
            style="padding: 0 30px"
            @click="saveLabel"
            >保存</el-button
          >
        </div>
      </template>
      <!-- 提交后合格结果 -->
      <template v-if="confirmStatus" slot="content">
        <div class="title">{{ btnGroup[curBtn - 1].text }}</div>
        <div class="content">
          <div v-if="curBtn == 1" class="pass">该病例审核合格成功！</div>
          <div v-if="curBtn != 1" class="noPass">
            <!-- 不合格和驳回 -->
            <div class="label">
              {{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}
            </div>
            <div class="reason">{{ form.reason }}</div>
          </div>
        </div>
        <div v-if="curBtn != 1" class="showTips">
          该病例审核{{ curBtn == 2 ? "不合格原因" : "驳回修改建议" }}提交成功！
        </div>
        <div class="btn">
          <el-button type="primary" :loading="loading" @click="nextExample">{{
            editStatus
              ? curBtn == 1
                ? "好的"
                : "提交"
              : "确认并进入下一例审核"
          }}</el-button>
        </div>
      </template>
    </public-dialog>
    <DialogConfigForms
      ref="follow"
      :patientId="patientId"
      formType="1"
      is-draft="0"
      operation="edit"
      @update="refresh"
    ></DialogConfigForms>
  </div>
</template>
<script>
import publicDialog from "./components/publicDialog.vue"
import screenReview from "./components/screenReview.vue"
import DialogConfigForms from "../followupentry/components/DialogConfigForms.vue"

import {
  getScreeningUser,
  putScreeningCheck,
  putScreeningCheckAdvice,
  saveSysCheckNote,
  getSysCheckNote,
} from "@/api/screeningAudit"
export default {
  components: { publicDialog, screenReview, DialogConfigForms },
  data() {
    return {
      isEmpty: false,
      editLabelFlag: false,
      auditNum: 0,
      editStatus: false, //进入的状态是第一次审核还是修改审核,false为第一次,true为修改
      form: {
        reason: "",
      },
      patientId: "", // 当前人的patientId
      checkNote: "",
      checkStatus: "", // 传入的checkstatus
      curUnion: "", // 当前医联体
      id: "",
      rules: {
        reason: [{ required: true, message: "请填写", trigger: "blur" }],
      },
      reasonList: [],
      selectedReason: [],
      btnGroup: [
        {
          text: "合格",
          value: 1,
        },
        {
          text: "不合格",
          value: 2,
        },
        {
          text: "驳回修改",
          value: 3,
        },
      ],
      loading: false,
      curBtn: 0,
      curComponent: "screenReview",
      confirmStatus: false,
    }
  },
  computed: {
    showClose() {
      return this.curBtn == 1 ? false : true
    },
  },
  watch: {},
  created() {},
  mounted() {
    let unionId = this.$route.query.unionId
    let patientId = this.$route.query.patientId
    if (unionId && !patientId) {
      this.editStatus = false
      this.getUser(unionId)
    } else if (patientId) {
      this.editStatus = true
      this.patientId = patientId
      this.id = this.$route.query.id
      this.checkNote = this.$route.query.checkNote
      this.checkStatus = this.$route.query.checkStatus
      this.curUnion = this.$route.query.unionName
    }
    // this.$refs.publicDialog.dialogVisible = true
  },
  methods: {
    refresh() {
      this.$refs["screen"].getPatientDetail()
    },
    handleEdit() {
      this.$refs.follow.open()
    },
    // 获取标签
    getSysCheckNote() {
      getSysCheckNote().then((res) => {
        if (res.code == 1) {
          let { data } = res
          if (data && data.length > 0) {
            console.log(data)
            this.reasonList = data
          } else {
            this.reasonList = [{ note: "" }]
          }
        }
      })
    },
    // 编辑标签
    editLabel() {
      this.editLabelFlag = true
    },
    // 提交接口
    putScreeningCheck(checkStatus, func) {
      let params = {
        id: this.id,
        checkStatus: checkStatus,
        checkNote: this.form.reason,
        patientId: this.patientId,
      }
      putScreeningCheck(params)
        .then((res) => {
          if (res.code == 1 && res.data) {
            func()
            // this.confirmStatus = true
            this.$refs.publicDialog.dialogVisible = true
          } else {
            this.loading = false
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    //! 修改审核结果
    putScreeningCheckAdvice(checkStatus, func) {
      let params = {
        id: this.id,
        checkStatus: checkStatus,
        checkNote: this.form.reason,
        patientId: this.patientId,
      }
      putScreeningCheckAdvice(params)
        .then((res) => {
          if (res.code == 1 && res.data) {
            this.loading = false
            this.checkStatus = checkStatus
            this.checkNote = this.form.reason
            func()
          } else {
            this.loading = false
            this.$refs.publicDialog.dialogVisible = false
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 设置理由
    setReason({ note }) {
      if (this.selectedReason.includes(note)) {
        this.selectedReason = this.selectedReason.filter((e) => e != note)
      } else {
        this.selectedReason.push(note)
      }
      // console.log("点击标签设置原因", reason)
      this.form.reason = this.selectedReason.join("、")
    },
    // 获取当前用户
    getUser(id, func) {
      getScreeningUser(id)
        .then((res) => {
          if (res.code == 1 && res.data.detail) {
            this.patientId = res.data.detail.patientId
            this.curUnion = res.data.detail.unionName
            this.id = res.data.detail.id
            this.auditNum = res.data.nums
            this.isEmpty = false
          } else {
            this.isEmpty = true
            this.$forceUpdate()
          }
        })
        .finally(() => {
          if (func) {
            func()
          }
        })
    },
    //! 合格提交  checkStatus 合格-3 不合格-4 驳回修改-2  待审核-1
    showDialog(val) {
      this.curBtn = val
      if (this.editStatus) {
        //! 精准编辑
        this.$refs.editDialog.dialogVisible = true
      } else {
        //! 医联体的审核
        if (val == 1) {
          this.$confirm("确定要提交审核吗？", "警告", {
            type: "warning",
          })
            .then(() => {
              if (!this.editStatus) {
                if (this.curBtn == 1) {
                  // 走接口，保存合格
                  this.putScreeningCheck("3", () => {
                    this.confirmStatus = true
                  })
                }
              } else {
                this.$refs.editDialog.dialogVisible = true
              }
            })
            .catch(() => {})
        } else {
          this.getSysCheckNote()
          if (this.curBtn == 2) {
            this.rules.reason[0].message = "请输入不合格原因"
          } else {
            this.rules.reason[0].message = "请输入驳回修改建议"
          }
          this.$refs.publicDialog.dialogVisible = true
        }
      }
    },
    // 不合格提交
    onSubmit() {
      this.loading = true
      // 切换文本
      if (this.curBtn != 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let status = this.curBtn == 2 ? "4" : this.curBtn == 3 ? "2" : ""
            if (this.editStatus) {
              this.putScreeningCheckAdvice(status, () => {
                this.$message.success("提交审核成功")
                this.onCancel()
              })
            } else {
              this.putScreeningCheck(status, () => {
                this.$message.success("提交审核成功")
                this.nextExample()
              })
            }
          } else {
            console.log("error submit!!")
            this.loading = false
            return false
          }
        })
      }

      // this.$refs.publicDialog.dialogVisible = true
    },
    onCancel() {
      this.confirmStatus = false
      this.editLabelFlag = false
      this.selectedReason = []
      if (this.curBtn != 1) {
        this.form = { reason: "" }
      }
      this.$refs.editDialog.dialogVisible = false
      this.$refs.publicDialog.dialogVisible = false
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    },
    // 修改提交
    editSubmit() {
      // this.$refs.editDialog.dialogVisible = false
      if (this.curBtn == 1) {
        // 走接口，保存合格
        if (this.editStatus) {
          // 走接口，保存合格
          this.putScreeningCheckAdvice("3", () => {
            this.confirmStatus = true
            this.$refs.publicDialog.dialogVisible = true
            this.selectedReason = []
          })
        }
      } else {
        this.getSysCheckNote()
        if (this.curBtn == 2) {
          this.rules.reason[0].message = "请输入不合格原因"
        } else {
          this.rules.reason[0].message = "请输入驳回修改建议"
        }
        this.$refs.publicDialog.dialogVisible = true
      }
    },
    nextExample() {
      // !
      this.$store.commit("user/setGetMessageFlag", true)
      if (this.editStatus) {
        this.loading = false
        this.onCancel()
      } else {
        this.getUser(this.$route.query.unionId, () => {
          this.loading = false
          this.onCancel()
        })
      }
    },
    deleteLabel(i) {
      this.$confirm("确定要删除该标签吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          this.reasonList = this.reasonList.filter((e, index) => index != i)
          if (this.reasonList.length == 0) {
            this.reasonList = [
              {
                note: "",
              },
            ]
          }
        })
        .catch(() => {})
    },
    // 增加标签
    addLabel() {
      this.reasonList.push({
        note: "",
      })
    },
    // 保存标签
    saveLabel() {
      let arr = this.reasonList.map((e) => e.note)
      saveSysCheckNote(arr).then((res) => {
        if (res.code == 1) {
          this.$message.success("保存标签成功")
          this.getSysCheckNote()
          this.editLabelFlag = false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.tips {
  font-size: 16px;
}
.p-24 {
  padding: 0 24px;
}
.f-b {
  font-weight: bold;
  font-size: 14px;
}

#audit-detail {
  display: flex;
  flex-direction: column;
  // padding: 22px 24px;
  .audit-detail_header {
    height: 65px;
    border-bottom: 1px solid #f3f3f3;
    line-height: 65px;
    display: flex;
    justify-content: space-between;
    .right {
      display: flex;
      align-items: center;
      .btn {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        margin-top: 0px;
      }
    }
  }
  .choose-handle {
    width: 100%;
    height: 72px;
    line-height: 72px;
    font-size: 14px;
    font-family: AlibabaPuHuiTiM;
    color: #333333;
    // box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    .btn_group {
      margin-left: 24px;
      ::v-deep .p-btn {
        width: 100px;
        border-radius: 4px;
      }
    }
  }
}
.title {
  height: 26px;
  font-size: 22px;
  font-family: AlibabaPuHuiTiM;
  color: rgba(0, 0, 0, 0.8);
  line-height: 26px;
}
.content {
  margin: 58px;
  .pass {
    font-size: 18px;
    font-family: AlibabaPuHuiTiM;
    color: #30b9a6;
    letter-spacing: 1px;
  }
}
.btn {
  margin-top: 20px;
  .el-button {
    min-width: 100px;
    border-radius: 5px;
    height: 32px;
  }
}
::v-deep .el-form-item__label {
  width: 100%;
  text-align: left;
}
.reason {
  margin-top: 20px;
}
.showTips {
  color: #4e68ff;
}
.op {
  font-size: 14px;
  font-family: AlibabaPuHuiTiR;
  color: #fa6400;
  margin-left: 20px;
}
.table-content {
  // height: calc(100vh - 260px);
  // overflow: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.empty {
  width: 100%;
  height: 15px;
  background: #f6f8f9;
}
.left-back {
  position: absolute;
  padding: 7px 5px;
  top: 10px;
  font-size: 20px;
  text-align: left;
  cursor: pointer;
}
.labelPlace {
  .labelList {
    display: flex;
    flex-wrap: wrap;
    .listItem {
      cursor: pointer;
      max-width: 200px;
      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 8px 12px;
      border: 1px solid rgba(78, 104, 255, 0.06);
      background: rgba(78, 104, 255, 0.06);
      border-radius: 2px;
      margin: 0 12px 12px 0;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #353a45;
      user-select: none;
    }
    .active {
      background: rgba(78, 104, 255, 0.1);
      color: #4e68ff;
      border-radius: 2px;
      border: 1px solid #4e68ff;
    }
  }
  .labelEdit {
    font-size: 14px;
    text-align: right;
    span {
      cursor: pointer;
    }
    user-select: none;
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(78, 120, 255);
    text-decoration: underline;
    &:active {
      color: rgba(78, 50, 255);
    }
  }
}
.edit_reasonList {
  li {
    display: flex;
    margin-bottom: 16px;
    .el-button {
      margin-left: 12px;
      font-size: 14px;
    }
  }
}
</style>