<!--
 * @Author: guanxiaoyan guanxiaoyan@pb-station.com
 * @Deion:
 * @Date: 2023-12-08 10:10:44
 * @LastEditors: guanxiaoyan guanxiaoyan@pb-station.com
 * @LastEditTime: 2024-01-03 18:05:31
 * @FilePath: /followUp-operate/src/views/workStation/followTask/DetailDialog/detail.vue
-->
<template>
  <!-- <el-dialog title="随访计划--查看" :visible.sync="followTaskDetailVisible" width="90%"
    @close="closeDialog"> -->
  <el-container class="followDetail-box">
    <el-header style="margin-bottom: 20px;height:auto">
      <!-- 随访列表 -->
      <el-table ref="followTaskTable" :data="followPlanTableData" highlight-current-row border
        @current-change="handleFollowPlanList">
        <el-table-column align="center" property="name" label="随访模板名称">
        </el-table-column>
        <el-table-column align="center" property="labelName" label="应用疾病">
        </el-table-column>
        <el-table-column align="center" property="deptName" label="应用科室">
        </el-table-column>
        <el-table-column align="center" property="doctorName" label="责任医生">
        </el-table-column>
        <el-table-column align="center" prop="periodNumber" label="随访周期">
          <template slot-scope="scope">
            {{ scope.row.periodNumber + periodUnitEnum.getLabel(scope.row.periodUnit) }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="lagTime" label="基线时间">
          <template slot-scope="scope">
            {{ scope.row.lagTime ? parseTime(scope.row.lagTime, "{y}-{m}-{d}") : '' }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="statusDesc" label="状态">
        </el-table-column>
      </el-table>
    </el-header>
    <el-main style="padding: 0 20px" v-loading="tableLoading">
      <el-row type="flex" :gutter="20">
        <el-col :span="12" >
          <div style="height: 100%">
            <el-container style="height: 100%">
              <el-main style="padding: 0;">
                <el-row type="flex">
                  <el-col :span="8">
                    <!-- 历史列表 -->
                    <el-card :body-style="{ height: '100%', 'overflowY': 'auto' }">
                      <div slot="header" class="el-descriptions__title">
                        任务列表
                      </div>
                      <el-table ref="taskTable" :data="followTaskTableData" 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">
                    <!-- 待办事项 -->
                    <el-card>
                      <div slot="header" class="el-descriptions__title">
                        待办事项
                      </div>
                      <el-table ref="todoTable" :data="todoList" highlight-current-row border
                        @current-change="handleSelectItem">
                        <el-table-column align="center" property="itemType" label="类型"
                          :class-name="'column-style-cursor'">
                          <template slot-scope="scope">
                            {{ todoItemTypeEnum.getLabel(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">
                            {{ checkHasValue(scope.row.status) ? todoItemStatusEnum.getLabel(`${scope.row.status}`) : ''
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column align="center" property="status" label="操作"
                          :class-name="'column-style-cursor'">
                          <template slot-scope="{row}">
                            <el-button
                              v-if="editWJ !== row.id || !(parseTime(followTaskItem.taskBeginTime, '{y}-{m}-{d}') === parseTime(new Date(), '{y}-{m}-{d}') && followItem.status === 1 && previewItem.status === 0)"
                              type="text"
                              :disabled="![todoItemTypeMap.survey].includes(row.itemType) || row.status !== 0 || followItem.status !== 1 || parseTime(followTaskItem.taskBeginTime, '{y}-{m}-{d}') !== parseTime(new Date(), '{y}-{m}-{d}')"
                              @click.stop="handleEdit(row)">编辑</el-button>
                            <el-button v-else type="text" :disabled="![todoItemTypeMap.survey].includes(row.itemType)"
                              @click.stop="handleCancel(row)">取消</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </div>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div style="height:100%;" v-if="previewItem" :key="previewItem && previewItem.itemId">
              <DWViewer
                v-if="previewItem.itemType === todoItemTypeMap.survey && editWJ && parseTime(followTaskItem.taskBeginTime, '{y}-{m}-{d}') === parseTime(new Date(), '{y}-{m}-{d}') && followItem.status === 1 && previewItem.status === 0"
                :url="`${surveyPrefix}/survey/diaowen-m.html?surveyId=${previewItem.itemId}&t=${new Date().getTime()}`"
                :isStorage="false" @submitSurveyScuccess="submitSurveyScuccess" />
              <DWViewer v-else-if="previewItem.itemType === todoItemTypeMap.survey"
                :url="`${surveyPrefix}/survey/answer-data.html?surveyId=${previewItem.itemId}&t=${new Date().getTime()}`" />
              <!-- 文章 -->
              <ArticlePreview :isTemp="false"
                v-else-if="previewItem.itemType === todoItemTypeMap.article" :articleId="previewItem.itemId" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  <!-- </el-dialog> -->
</template>
<script>
import DWViewer from "@/components/DWViewer";
import ArticlePreview from "@/components/ArticlePreview";
import { checkHasValue } from "@/utils/index";
import { getFollowTaskDetailApi, finishWaitProcessItemApi } from '@/api/hospital/patientManage/followupPatient'
export default {
  name: "FollowTaskDetail",
  enums: ["todoItemTypeEnum", "todoItemStatusEnum", "todoItemTypeMap", "periodUnitEnum"],
  components: {
    DWViewer,
    ArticlePreview,
  },
  props: ["followRow", "isAllList"],
  data() {
    return {
      surveyPrefix: process.env.VUE_APP_SURVEY_PREFIX || "",
      followPlanTableData: [],
      followTaskTableData: [],
      previewItem: {},
      editWJ: null, // 是否编辑问卷
      taskList: [], //任务列表
      todoList: [], //待办事项
      tableLoading: false,
      currentTask: "",
      pageSize: 10,
      pageNum: 1,
      followListTotal: 0,
      followId: null,
      followItem: {},
      followTaskItem: {
        taskBeginTime: "",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    checkHasValue,
    initData() {
      // this.followPlanTableData = [this.followRow];
      this.followItem = this.followRow;
      console.log("this.followRow=", this.followRow);
      this.getFollowPlanDetail(this.followRow.id);
    },
    async submitSurveyScuccess() {
      console.log('提交==')
      try {
        await finishWaitProcessItemApi({
          id: this.editWJ,
        }).then((res) => {
          this.$message.success("编辑成功！");
          this.editWJ = null;
          this.initData();
        });
      } catch (err) {
        console.log("err=", err);
      } finally {
      }
    },
    // 获取随访计划详情
    async getFollowPlanDetail(followId) {
      this.followId = followId;
      this.followPlanTableData = []
      this.followTaskTableData = [];
      this.todoList = [];
      this.tableLoading = true;
      try {
        const { data } = await getFollowTaskDetailApi({ followId: followId });
        if (data) {
          const { taskList, ...otherObject } = data;
          this.followPlanTableData = [otherObject];
          this.followTaskTableData = taskList || [];
          this.followTaskItem = this.followTaskTableData[0];
          this.todoList = taskList[0].items;
          this.currentTask = taskList[0].id;
          if (this.todoList?.length > 0) {
            this.previewItem = this.todoList[0];
          }
          this.$nextTick(() => {
            this.$refs.taskTable.setCurrentRow(this.followTaskTableData[0]);
            if (this.todoList?.length > 0) {
              this.$refs.todoTable.setCurrentRow(this.todoList[0]);
            }
          });
        }
      } catch (err) {
        console.log(err);
      } finally {
        this.tableLoading = false;
      }
    },
    setHightLight(row) {
      if (this.followTaskTableData.length > 1) {
        this.$refs.taskTable.setCurrentRow(row);
      }
      if (row.items.length > 1) {
        const currentRow = this.todoList.filter((t) => t.taskId === row.id);
        if (currentRow.length) {
          this.$refs.todoTable.setCurrentRow(currentRow[0]);
        }
      }
    },
    // 点击随访列表
    handleFollowPlanList(rowVal) {
      console.log("rowVal", rowVal);
      if (rowVal) {
        return;
      }
      this.followItem = rowVal;
      if (rowVal) {
        this.getFollowPlanDetail(rowVal.id);
      }
    },
    // 点击任务列表
    handleSelectTask(rowVal) {
      if (!rowVal) {
        return;
      }
      this.followTaskItem = rowVal;
      console.log("任务列表=", rowVal);
      if (rowVal) {
        if (this.currentTask === rowVal.id) return;
        this.currentTask = rowVal.id;
        this.editWJ = null;
        this.todoList = rowVal.items || [];
        if (this.todoList.length > 0) {
          this.previewItem = this.todoList[0];
          this.$nextTick(() => {
            this.$refs.todoTable.setCurrentRow(this.todoList[0]);
          });
        } else {
          this.previewItem = {};
          this.editWJ = null;
        }
      }
    },
    // 点击单条事项查看PDF文件
    handleSelectItem(item) {
      console.log("item", item);
      if (!item) {
        return;
      }
      this.previewItem = item;
      if (this.editWJ !== item.id) {
        this.editWJ = null;
      }
    },
    // 点击编辑
    handleEdit(row) {
      this.editWJ = row.id;
      this.previewItem = row;
      this.$nextTick(() => {
        this.$refs.todoTable.setCurrentRow(row);
      });
    },
    handleCancel(row) {
      console.log("row=", row);
      this.editWJ = null;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 样式代码相同 */
// ::v-deep .el-card {
//   height: 100%;
//   .el-card__body {
//     height: 100%;
//   }
// }

.column-style-cursor {
  cursor: pointer;
}

.followDetail-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .el-header,
  .el-main {
    overflow: hidden;
    padding: 0 !important;
  }
  .el-main {
    box-sizing: border-box;
    flex: 1;
    padding: 20px;
    .el-row {
      height: 100%;
      overflow: hidden;
    }
    .el-col {
      height: 100%;
    }
    ::v-deep .el-card {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    ::v-deep .el-card__body {
      overflow: auto;
      flex: 1;
    }
  }
}
</style>
