<template>
  <el-container style="height: 100%; padding: 20px 0">
    <el-header style="margin-bottom: 10px">
      <!-- 患者信息 -->
      <el-card height="100%">
        {{ baseInfo.patientName }} {{ baseInfo.patientSex }} {{ baseInfo.age }}岁
      </el-card>
    </el-header>
    <el-main style="overflow: hidden; padding: 0 20px">
      <el-row type="flex" style="height: 100%">
        <el-col :span="12" style="height: 100%; margin-right: 10px">
          <div style="height: 100%">
            <el-container style="height: 100%">
              <el-header style="padding: 0; margin-bottom: 10px" height="auto">
                <!-- 随访信息 -->
                <el-card height="100%">
                  <div class="sf-title">随访信息</div>
                  <el-descriptions :column="2">
                    <el-descriptions-item label="随访医院">
                      {{ baseInfo.wardName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="首次就诊时间">
                      {{ parseTime(baseInfo.visitTime, "{y}-{m}-{d}") }}
                    </el-descriptions-item>
                    <el-descriptions-item label="责任医生">
                      {{ baseInfo.doctorName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="报到时间">
                      {{ parseTime(baseInfo.taskBeginTime, "{y}-{m}-{d}") }}
                    </el-descriptions-item>
                    <el-descriptions-item label="随访模板">
                      {{ baseInfo.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="疾病标签">
                      {{ baseInfo.labelNames }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-header>
              <el-main style="padding: 0; overflow: hidden">
                <el-row type="flex" style="height: 100%">
                  <el-col :span="8" style="height: 100%; margin-right: 10px">
                    <!-- 历史列表 -->
                    <el-card height="100%" style="overflow-y: scroll;">
                      <div
                        slot="header"
                        class="el-descriptions__title"
                        style="font-size: 16px; text-align: center"
                      >
                        历史列表
                      </div>
                      <el-table
                        ref="taskTable"
                        :data="followTaskDocuments"
                        highlight-current-row
                        @current-change="handleSelectTask"
                        :show-header="false"
                        border
                      >
                        <el-table-column align="center" property="taskBeginTime" label="日期" :class-name="'column-style-cursor'">
                          <template slot-scope="scope">
                            {{ parseTime(scope.row.taskBeginTime, "{y}-{m}-{d}") }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                  <el-col :span="16" style="height: 100%">
                    <!-- 待办事项 -->
                    <el-card height="100%" style="overflow-y: scroll;">
                      <div
                        slot="header"
                        class="el-descriptions__title"
                        style="font-size: 16px; text-align: center"
                      >
                        待办事项
                      </div>
                      <el-table
                        ref="todoTable"
                        :data="todoList"
                        highlight-current-row
                        @current-change="handleSelectItem"
                        border
                      >
                        <el-table-column align="center" property="itemType" label="类型" :class-name="'column-style-cursor'">
                          <template slot-scope="scope">
                            {{ TODO_TYPE.getLabelByValue(scope.row.itemType) }}
                          </template>
                        </el-table-column>
                        <el-table-column align="center" property="itemName" label="名称" :class-name="'column-style-cursor'"/>
                        <el-table-column align="center" property="status" label="状态" :class-name="'column-style-cursor'">
                          <template slot-scope="scope">
                            {{ TODO_STATUS.getLabelByValue(scope.row.status) }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <el-card height="100%" :body-style="{ height: '100%' }">
            <div style="height: 100%;overflow-y: scroll;" v-if="previewItem" :key="previewItem && previewItem.itemId">
              <DWViewer
                v-if="previewItem.itemType === TODO_TYPE.getValueByName('survey')"
                :url="`${surveyPrefix}/survey/answer-data.html?surveyId=${previewItem.itemId}`"
              />
              <ArticlePreview
                :isTemp="false"
                v-else-if="previewItem.itemType === TODO_TYPE.getValueByName('article')"
                :articleId="previewItem.itemId"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import { statisticalDetail, followupTodoItem } from "@/api/common";
import DWViewer from "@/components/DWViewer";
import ArticlePreview from "@/components/ArticlePreview";
import { TODO_TYPE, TODO_STATUS } from '@/enums'
export default {
  name: "FollowUpDetail",
  components: {
    DWViewer,
    ArticlePreview,
  },
  data() {
    return {
      TODO_TYPE,
      TODO_STATUS,
      surveyPrefix: process.env.VUE_APP_SURVEY_PREFIX || "",
      baseInfo: {},
      followTaskDocuments: [],
      todoList: [],
      previewItem: null,
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      statisticalDetail(this.$route.params.id).then((res) => {
        const { followTaskDocuments, ...baseInfo } = res.data;
        this.followTaskDocuments = followTaskDocuments;
        this.baseInfo = baseInfo;
        if (followTaskDocuments.length > 0) {
          this.$refs.taskTable.setCurrentRow(followTaskDocuments[0]);
        }
      });
    },
    handleSelectTask({ id }) {
      followupTodoItem(id).then((res) => {
        this.todoList = res.data;
        if (res.data.length > 0) {
          this.$refs.todoTable.setCurrentRow(res.data[0]);
        }
      });
    },
    handleSelectItem(item) {
      this.previewItem = item;
    },
  },
};
</script>

<style>
/* 样式代码相同 */
.el-card {
  height: 100%;
}
.column-style-cursor{
  cursor: pointer;
}
</style>
