<!--
 * @Date: 2023-11-03 09:26:51
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-11-04 10:38:00
 * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\report-entry.vue
 * @description:
-->
<template>
  <div class="report-main">
    <van-nav-bar
      title="心理监测"
      :border="true"
      :left-arrow="true"
      @click-left="onNavBack"
    >
      <template #left>
        <van-icon name="arrow-left" size="24" style="padding: 0" />
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="tabs"></div>
      <div class="content">
        <div class="list" v-if="weekList">
          <div
            class="item"
            v-for="(item, index) in weekList"
            :key="index"
            @click="onClickItem(item.recordId)"
          >
            <div class="left">
              <img :src="weekImg" alt />
              <div class="middle">
                <div class="title">
                  <span>周报</span>
                  <p>{{ item.name }}</p>
                </div>
                <div class="overall">
                  <div class="left">
                    <span>总评</span>
                    <p>{{ item.summary }}</p>
                  </div>
                </div>
                <!-- <div class="trend">
                                    <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
                                </div>-->
              </div>
            </div>

            <div class="right">
              <img :src="moreImg" alt />
            </div>
          </div>
        </div>
        <div class="list no-data" v-else>
          <img src="../../../../assets/img/no_data_01.png" alt />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EmotionModel, PsyBaseUrl } from "@/config/models";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      active: 0,
      tabImgUrl: require("@/assets/img/psychological/statistical_form.png"),
      selectDownImg: require("@/assets/img/psychological/select_down.png"),
      weekImg: require("@/assets/img/psychological/week_report.png"),
      moreImg: require("@/assets/img/psychological/more.png"),
      weekList: [],
      uid: "",
      emoName: "",
    };
  },
  methods: {
    onNavBack() {},
    loadParams() {
      let params = this.$route.query;
      if (params) {
        this.emoName = EmotionModel[params.name].name;
        this.emoType = EmotionModel[params.name].type;
        this.uid = params.uid;
      }
    },
    onClickItem(recordId) {
      this.$router.push({
        name: "psychologicalReport",
        query: {
          recordId: recordId,
          name: "depression",
          isShowLeft: true,
        },
      });
    },
    getWeekResult() {
      this.$toast.loading("数据加载中");
      let baseUrl =
        process.env.NODE_ENV === "production"
          ? "https://dbmq.rzliot.com/auth_heart"
          : "https://dbmq.rzliot.com/heart";
      let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
      let reqParams = {
        uid: /* this.uid */ "2023101521270090082",
        type: this.emoType,
      };
      axios
        .get(reqUrl, {
          params: { ...reqParams },
          /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
        })
        .then((res) => {
          console.log("res", res);
          const data = res.data.response;
          this.weekList = data.map((item) => {
            return {
              name: item.Name.replace("周报", ""),
              recordId: item.RecordId,
              summary: item.Summary,
              type: this.emoType,
            };
          });
          this.$toast.success("数据加载完成");
        });
    },
  },
  mounted() {
    this.loadParams();
    this.getWeekResult();
  },
};
</script>

<style scoped lang="scss">
.report-main {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  .main {
    height: calc(100vh - 45px);
    overflow: scroll;
    .content {
      position: relative;
      .list {
        .item {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding: 34px 15px;
          background-color: #fff;
          margin-bottom: 11px;
          .left {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            img {
              height: 25px;
              width: 25px;
            }
            .middle {
              .title,
              .overall,
              .trend {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-left: 13px;
                span,
                p {
                  font-size: 18px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #8d8d8d;
                  line-height: 30px;
                }
              }
              .title {
                span {
                  padding-right: 20px;
                }
                p {
                  color: #282828;
                }
              }
              .overall {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .left {
                  p {
                    padding-left: 20px;
                    font-weight: bold;
                  }
                }
                .right {
                  img {
                    height: 15px;
                    width: 9px;
                  }
                }
              }
              .trend {
                align-items: flex-start;
                text-align: left;
              }
            }
          }
          .right {
            img {
              width: 9px;
              height: 15px;
            }
          }
        }
        &.no-data {
          height: calc(100vh - 45px);
          width: 100%;
          @include center();
          flex-direction: column;
          img {
            height: 110px;
            width: 175px;
          }
          p {
            color: #999;
            font-size: 12px;
            padding: 20px 0 65px 0;
          }
        }
      }
    }
  }
}
</style>
