<template>
  <el-container>
    <el-aside width="220px">
      <el-card class="scroll-container" shadow="never">
        <div
          class="title_item"
          :class="{ active: index == activeIndex }"
          v-for="(item, index) in list"
          :key="index"
          @click="handleClick(item, index)"
        >
          <p class="title_item_label">
            <el-badge :is-dot="!item.status" style="width: 100%"
              >异常反馈</el-badge
            >
          </p>
          <p class="title_item_time">{{ item.create_time }}</p>
        </div>
        <div v-if="list.length === 0" class="title_item">暂无数据...</div>
      </el-card>
    </el-aside>
    <el-main>
      <el-card class="scroll-container" shadow="never">
        <h3>异常反馈</h3>
        <el-table
          :data="tableData"
          border
          style="width: 90%; margin: 50px auto"
          :show-header="false"
        >
          <el-table-column
            prop="label"
            min-width="200"
            align="left"
            class-name="td_label"
          >
          </el-table-column>
          <el-table-column prop="value" min-width="350" align="left">
            <template slot-scope="scope">
              <span>{{ content[scope.row.value] || "——" }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card></el-main
    >
  </el-container>
</template>

<script>
import { getAbnormalList, setAbnormalStatus } from "@/api/user"
import { empty } from "rxjs"
import { mapGetters } from "vuex"
export default {
  name: "Message",
  data() {
    return {
      list: [],
      content: {},
      tableData: [
        {
          label: "质控时间",
          value: "create_time",
        },
        {
          label: "专病库名称",
          value: "diseaseName",
        },
        {
          label: "协作组名称",
          value: "groupName",
        },
        {
          label: "平均有效性低于95%的病例有",
          value: "caseValidCount",
        },
        {
          label: "平均有效性低于95%的患者的累计个数",
          value: "peopleValidCount",
        },
        {
          label: "平均完整度低于80%的病例有",
          value: "caseIntegrityCount",
        },
        {
          label: "平均完整度低于80%的患者的累计个数",
          value: "peopleIntegrityCount",
        },
      ],
      activeIndex: 0,
    }
  },
  computed: {
    ...mapGetters({
      group: ["user/group"],
      userInfo: ["user/userInfo"],
    }),
  },
  methods: {
    handleClick(item, index) {
      let content = {}
      try {
        content = JSON.parse(item.content)
      } catch {}
      this.content = {
        ...content,
        create_time: item.create_time,
        diseaseName: this.group.diseaseName,
        groupName: this.group.groupName,
      }
      this.activeIndex = index
      if (item.status) return
      setAbnormalStatus({ msgId: item.id, userId: this.userInfo.id }).then(
        (res) => {
          item.status = true
          this.$store.dispatch("user/getFeedBackNumber", this.userInfo.id)
        }
      )
    },
    getAbnormalList() {
      getAbnormalList({
        groupId: this.group.groupId,
        userId: this.userInfo.id,
      }).then((res) => {
        this.list = res.data
        if (this.list[0]) {
          this.handleClick(this.list[0], 0)
        }
      })
    },
  },
  created() {
    // this.getAbnormalList()
  },
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0 0 0 20px;
}
.scroll-container {
  overflow-y: auto;
  height: calc(100vh - 150px);
  ::v-deep .el-card__body {
    padding: 0;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
  }
  h3 {
    text-align: center;
    margin: 50px 0;
  }
  ::v-deep {
    td {
      text-align: left;
    }
    .td_label {
      background-color: #f8f8f8;
    }
  }
}

.title_item {
  padding: 15px;
  cursor: pointer;
  &.active {
    background-color: #edf6ff;
  }
  &_label {
    font-size: 15px;
  }
  &_time {
    color: #918c8c;
    font-size: 12px;
    padding: 3px 0;
  }
}
</style>