<script setup lang="ts">
import NavBar from "@/components/NavBar/index.vue";

import { ref, onMounted, reactive } from "vue";
import addImg from "@/assets/newInquiry/add.png";
import goBackImg from "@/assets/newInquiry/go_back.png";
import userAvatar from "@/assets/user.jpg";
import router from "@/router";
import {
  queryDiagnoseProcessPageList,
  queryMedicalRecPageList,
  deleteProcess
} from "@/api/consultation";
import { getUserInfo } from "@/utils/auth";
import { useConsultationStoreHooks } from "@/store/modules/consultation";
import { creatDiagnosisProcesse } from "@/api/inquiry";
// import { message } from "@/utils/message";
import { downLoadUrl } from "@/utils/auth";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";

const addFlag = ref(false);
const caseList = ref([]);
const diagnoseProcessList = ref([]); //问诊流程列表
const medicalRecList = ref([]); //病例信息列表
const addCase = () => {
  addFlag.value = true;
  caseList.value = medicalRecList.value;
};
const goBack = () => {
  addFlag.value = false;
  caseList.value = diagnoseProcessList.value;
};
const openCase = async item => {
  // const res: any = await resourceIsFree();
  // if (res.data === true) {
  if (item.status) {
    sessionStorage.setItem(
      "inspectSatus",
      item.status === "3" ? "2" : item.status // 已评估状态和未评估进入页面一样
    );
    if (item.processId) {
      router.push({
        path: "/consultation",
        query: {
          processId: item.processId
        }
      });
    }
  } else {
    createProcess(item);
  }
  sessionStorage.setItem("patientSilentVideo", item.patientSilentVideo);
  // } else {
  //   message("实例资源占用，请稍后再试", { type: "warning" });
  // }
};
const createProcess = async item => {
  const res: any = await creatDiagnosisProcesse({
    medicalId: item.medicalId,
    patientId: item.patientId
  });
  if (res.code === 200) {
    sessionStorage.setItem("inspectSatus", "0");
    router.push({
      path: "/consultation",
      query: {
        processId: res.data.id
      }
    });
  }
};
const userPagination = reactive<any>({
  total: 0,
  pageSize: 11,
  currentPage: 1
});
const casePagination = reactive<any>({
  total: 0,
  pageSize: 11,
  currentPage: 1
});
const getDiagnoseProcessPageList = async () => {
  const userInfo: any = getUserInfo();
  const params = {
    pageNum: userPagination.currentPage,
    pageSize: userPagination.pageSize,
    userId: JSON.parse(userInfo).id
  };
  const res: any = await queryDiagnoseProcessPageList(params);

  userPagination.total = res.data.total;
  caseList.value = res.data.records;

  diagnoseProcessList.value = res.data.records;
  userPagination.total = res.data.total;
};
const getMedicalRecPageList = async () => {
  const params = {
    pageNum: casePagination.currentPage,
    pageSize: casePagination.pageSize
  };
  const res: any = await queryMedicalRecPageList(params);
  medicalRecList.value = res.data.records;
  casePagination.total = res.data.total;
  if (addFlag.value === true) {
    caseList.value = medicalRecList.value;
  }
};
const handleUserChange = val => {
  userPagination.currentPage = val;
  getDiagnoseProcessPageList();
};
const handleCaseChange = val => {
  casePagination.currentPage = val;
  getMedicalRecPageList();
};
const delItem = async item => {
  ElMessageBox.confirm(item ? `确定删除这条问诊实例”` : "", "提示", {
    type: "warning"
  })
    .then(async () => {
      const res: any = await deleteProcess({ processId: item.processId });
      if (res.code === 200) {
        getDiagnoseProcessPageList();
        getMedicalRecPageList();
        message("删除成功", { type: "success" });
      }
    })
    .catch(() => {});
};
onMounted(() => {
  getDiagnoseProcessPageList();
  getMedicalRecPageList();
  sessionStorage.setItem("inspectSatus", "");
  useConsultationStoreHooks().changeInspectSatus("");
});
</script>
<template>
  <div class="selectCase">
    <NavBar />
    <div v-if="caseList.length === 0" class="no_data">
      <div class="add_card" @click="addCase">
        <p>选择问诊实例</p>
        <span class="desc">暂无可选择问诊实例，请先新建问诊实例</span>
        <div class="content">
          <img class="add_img" :src="addImg" alt="" />
          <span>新建问诊实例</span>
        </div>
      </div>
    </div>
    <div v-if="caseList.length > 0" class="main">
      <div class="content">
        <div class="title">选择问诊实例</div>
        <div class="case_list">
          <div v-if="!addFlag" @click="addCase" class="case_list_item add_item">
            <img class="add_img" :src="addImg" alt="" />
            <span>新建问诊实例</span>
          </div>
          <div v-if="addFlag" @click="goBack" class="case_list_item add_item">
            <img class="add_img" :src="goBackImg" alt="" />
            <span>返回问诊历史</span>
          </div>
          <div
            v-for="(item, index) in caseList"
            :key="index"
            class="case_list_item"
            @click="openCase(item)"
          >
            <div class="item_info">
              <img v-if="!item.patientHeadPic" :src="userAvatar" alt="" />
              <img
                v-if="item.patientHeadPic"
                :src="downLoadUrl(item.patientHeadPic)"
                alt=""
              />
              <div class="item_info_content">
                <span class="name">{{ item.name }}</span>
                <span>{{ `年龄：${item.age}岁  性别：${item.gender}` }}</span>
              </div>
            </div>
            <div class="desc" :title="item.patientSelfDesc">
              {{ `主诉：${item.patientSelfDesc}` }}
            </div>
            <div class="time" v-show="item.status">
              {{ `最近问诊时间：${item.time}` }}
            </div>
            <div :class="[addFlag ? 'add_btn_list' : 'btn_list']">
              <div class="del_btn" v-if="!addFlag" @click.stop="delItem(item)">
                删除
              </div>
              <div class="btn" v-if="item.status === '0'">继续问诊</div>
              <div class="btn" v-else-if="item.status === '1'">去处置</div>
              <div class="btn" v-else-if="item.status === '2'">
                查看评估结果
              </div>
              <div class="btn" v-else-if="item.status === '3'">
                查看评估结果
              </div>
              <div class="btn" v-else>开始问诊</div>
            </div>

            <div
              v-if="item.status === '0'"
              style="background-color: #0db274"
              class="type"
            >
              待问诊
            </div>
            <div v-if="item.status === '1'" class="type wait">待处置</div>
            <div v-if="item.status === '2'" class="type determine">已确诊</div>
            <div v-if="item.status === '3'" class="type determine">已评估</div>
          </div>
        </div>
        <div class="footer">
          <el-pagination
            v-if="userPagination.total > 11 && !addFlag"
            @current-change="handleUserChange"
            :hide-on-single-page="true"
            background
            :default-page-size="11"
            layout="prev, pager, next"
            :total="userPagination.total"
            class="mt-4"
          />
          <el-pagination
            v-if="casePagination.total > 11 && addFlag"
            @current-change="handleCaseChange"
            :hide-on-single-page="true"
            background
            :default-page-size="11"
            layout="prev, pager, next"
            :total="casePagination.total"
            class="mt-4"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.selectCase {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../../assets/newInquiry/select_bg.png");
  background-size: 100% 100%;

  .no_data {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    .add_card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 439px;
      height: 445px;
      background: linear-gradient(225deg, #f4f8ff 0%, #fff 46%);
      border-radius: 6px;
      box-shadow: 0 40px 100px 0 rgb(65 149 249 / 30%);

      p {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: bold;
        color: #2b3f54;
      }

      .desc {
        font-size: 14px;
        font-weight: 400;
        color: rgb(43 63 84 / 60%);
      }

      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 367px;
        height: 193px;
        margin-top: 40px;
        cursor: pointer;
        background: rgb(66 135 255 / 5%);
        border: 1px dashed #4287ff;
        border-radius: 6px;

        img {
          width: 60px;
          height: 60px;
        }

        span {
          margin-top: 8px;
          font-size: 16px;
          color: #4287ff;
        }
      }
    }
  }

  .main {
    display: flex;
    justify-content: center;
    margin-top: 80px;

    .content {
      width: 1200px;

      .title {
        margin-bottom: 24px;
        font-size: 24px;
        font-weight: bold;
        color: #2b3f54;
      }

      .case_list {
        display: flex;
        flex-wrap: wrap;

        .case_list_item {
          position: relative;
          width: 266px;
          height: 210px;
          padding: 16px;
          margin-right: 24px;
          margin-bottom: 24px;
          cursor: pointer;
          background: #fff;
          border-radius: 6px;

          .item_info {
            display: flex;

            img {
              width: 64px;
              height: 64px;
              margin-right: 16px;
              border-radius: 50%;
            }
          }

          .item_info_content {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #666;

            .name {
              margin-bottom: 8px;
              font-size: 16px;
              font-weight: 400;
              color: #2b3f54;
            }
          }

          .desc {
            display: -webkit-box;
            height: 40px;
            padding-bottom: 16px;
            margin-top: 16px;
            margin-bottom: 4px;
            overflow: hidden;
            font-size: 14px;
            font-weight: 400;
            color: #2b3f54;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .time {
            font-size: 12px;
            font-weight: 400;
            color: #999;
          }

          .btn_list {
            position: absolute;
            bottom: 16px;
            display: flex;
            margin-top: 16px;
            opacity: 1;

            .del_btn {
              width: 109px;
              height: 29px;
              margin-right: 16px;
              font-size: 14px;
              line-height: 29px;
              color: #999;
              text-align: center;
              border: 1px solid #999;
              border-radius: 6px;
            }

            .btn {
              width: 109px;
              height: 29px;
              line-height: 29px;
              color: #4287ff;
              text-align: center;
              border: 1px solid #4287ff;
              border-radius: 6px;
            }
          }

          .add_btn_list {
            .btn {
              position: absolute;
              bottom: 16px;
              width: 234px;
              height: 29px;
              margin-top: 16px;
              line-height: 29px;
              color: #4287ff;
              text-align: center;
              border: 1px solid #4287ff;
              border-radius: 6px;
              opacity: 1;
            }
          }

          .type {
            position: absolute;
            top: 0;
            right: 0;
            width: 72px;
            height: 24px;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            color: #fff;
            text-align: center;
            border-top-right-radius: 6px;
          }

          .wait {
            background: #ffa700;
          }

          .determine {
            background: #4287ff;
          }
        }

        .case_list_item:hover {
          box-shadow: 0 40px 100px 0 rgb(65 149 249 / 30%);

          .btn {
            color: #fff;
            background: #4287ff;
          }
        }

        .add_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #4287ff;
          cursor: pointer;
        }

        .add_img {
          width: 80px;
          height: 80px;
        }
      }

      .footer {
        display: flex;
        justify-content: center;
        margin-top: 32px;
      }
    }

    .view {
      margin-top: 32px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
<!-- <style lang="scss">
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #fff !important;
}
.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
  color: rgba(0, 0, 0, 0.85);
}
</style> -->
