<template>
  <!-- 随访审核详情 -->
  <div class="follow-form">
    <div class="note">
      <slot name="note"></slot>
    </div>
    <el-header v-if="titlePosition === 'top'">
      <div class="follow-tab-top">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="筛查" name="0"></el-tab-pane>
          <el-tab-pane
            v-for="(item, index) in followList"
            :key="index"
            :label="'第' + Number(index + 1) + '次随访数据'"
            :name="String(index + 1)"
          ></el-tab-pane>
        </el-tabs>
      </div>

      <div class="extra_btn">
        <slot name="button"></slot>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto" v-if="titlePosition === 'left'">
        <div class="follow-tab" ref="follow-tab">
          <el-tabs
            v-model="activeTab"
            tab-position="right"
            style="height: 200px"
          >
            <el-tab-pane label="筛查病例数据" name="0">
              <template slot="label">
                <div class="tab-label">筛查病例数据</div></template
              >
            </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in followList"
              :key="index"
              :name="String(index + 1)"
            >
              <template slot="label">
                <div class="tab-label">
                  {{ "第" + Number(index + 1) + "次随访数据" }}
                </div></template
              >
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-aside>
      <el-main class="transition-box" v-loading="fromLoading">
        <div class="my_form">
          <MyCustomForm
            v-show="activeTab === '0'"
            v-for="form in formTabs"
            :key="form.id"
            :form="form"
            :patientId="currentRow.patientId"
          ></MyCustomForm>
          <MyCustomForm
            v-show="activeTab !== '0'"
            v-for="form in followForms"
            :key="form.id"
            :form="form"
            ref="myForm"
            :patientId="currentRow.patientId"
            :followId="followId"
          ></MyCustomForm>
        </div>
      </el-main>
      <el-aside width="auto" class="transition-box">
        <div class="follow-list">
          <ul class="list">
            <li v-for="(item, index) in screenList" :key="index">
              <div class="time">{{ item.update_time || item.create_time }}</div>
              <div class="time">
                {{ item.update_user_name || item.create_time }}
              </div>
              <div class="time">{{ item.sub_title }}</div>
            </li>
          </ul>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import CustomForm from "@/components/FormComponents/CustomForm/index"
import MyCustomForm from "./MyCustomForm.vue"
import { getCurrentFormByType } from "@/api/coop-group.js"
import { getFollowList } from "@/api/patient"
import { getFollowRecord } from "@/api/followup"
export default {
  name: "FollowReview",
  components: {
    CustomForm,
    MyCustomForm,
  },
  provide() {
    return {
      showIndex: true,
    }
  },
  props: {
    currentRow: {},
    titlePosition: {
      type: String,
      default: "left",
      validator: function (value) {
        return ["left", "top"].includes(value)
      },
    },
  },
  data() {
    return {
      fromLoading: false,
      formTabs: [],
      followForms: [],
      activeTab: "0",
      screenList: [],
      followList: [],
    }
  },
  computed: {
    ...mapGetters({
      group: ["user/group"],
    }),
    isEmpty() {
      return this.formTabs.length
    },
    followId() {
      return (
        (this.followList[this.activeTab - 1] &&
          this.followList[this.activeTab - 1].followId) ||
        null
      )
    },
  },
  watch: {
    followId() {
      this.getLogList()
    },
    "currentRow.patientId": {
      handler(val) {
        if (val) {
          this.getCurrentFormByType()
          this.getFollowInfo()
          this.getLogList()
        }
      },
      immediate: true,
    },
    activeTab(val) {
      this.$emit("update", val == this.followList.length)
    },
  },
  methods: {
    refreshFollow() {
      const refs = this.$refs["myForm"]
      refs.map((ele) => {
        ele.getFollowDetail()
      })
    },
    getLogList() {
      const obj = {
        patientId: this.currentRow.patientId,
        followId: this.followId,
      }
      const key = obj.followId ? "followId" : "patientId"
      getFollowList({
        [key]: obj[key],
      }).then((res) => {
        if (res.code == 1) {
          this.screenList = res.data || []
        }
      })
    },
    getCurrentFormByType(type = 1) {
      this.fromLoading = true
      getCurrentFormByType({
        type,
        groupId: this.group.groupId,
      }).then((res) => {
        this.fromLoading = false
        if (res.code === 1) {
          const list = res.data.map((item, index) => {
            return {
              id: item.id,
              formId: item.formId,
              label: item.tabName,
            }
          })
          if (type === 2) {
            this.followForms = list
          } else {
            this.formTabs = list
          }
        }
      })
    },
    getFollowRecord() {
      getFollowRecord({
        patientId: this.currentRow.patientId,
      }).then((res) => {
        this.followList = res.data.filter((_) => _.followBatch > 0)
        const len = this.followList.length
        this.activeTab = String(len)
        const el = this.$refs["follow-tab"]
        if (el && len > 11) {
          setTimeout(() => {
            el.scrollTop = (len - 11) * 52
          }, 0)
        }
      })
    },
    getFollowInfo() {
      const { followBatch } = this.currentRow
      if (!followBatch) return
      this.getCurrentFormByType(2)
      this.getFollowRecord()
    },
  },
}
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;
  margin-top: 20px;
  padding-right: 0;
  position: relative;
  justify-content: space-between;
}
.follow-tab-top {
  max-width: calc(100% - 200px);
  padding-left: 10px;
  ::v-deep {
    .el-tabs--card > .el-tabs__header {
      border-bottom: none;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      min-width: 116px;
      text-align: center;
      background: #f0f1fa;
      font-size: 14px;
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      background: #4e68ff;
      color: #fff;
    }
  }
}
.my_form {
  height: calc(100vh - 280px);
  overflow-y: auto;
}
.el-main {
  padding: 0px 20px;
}

.note {
  margin-left: 20px;
  color: red;
  padding-top: 10px;
}
.extra_btn {
  width: 180px;
}
.follow-tab {
  border-radius: 4px;
  border: 1px solid #cccccc;
  height: calc(100vh - 280px);
  overflow: overlay;
  ::v-deep {
    .tab-label {
      border-bottom: 1px solid #ccc;
      padding: 0 20px;
      height: 52px;
      line-height: 52px;
    }
    .el-tabs__header {
      margin-left: 0px;
    }
    .el-tabs__nav-wrap.is-right::after {
      width: 0px;
    }
    .el-tabs__active-bar.is-right {
      width: 3px;
    }
    .el-tabs--right {
      height: auto !important;
    }
    .tab-title {
      padding: 16px;
      background: #fafafa;
      color: #333333;
      border-bottom: 1px solid #cccccc;
    }
    .el-tabs__item {
      width: 180px;
      padding: 0;
      background: #fafafa;
      height: 52px;
      line-height: 52px;
      transition: all 1s;
    }
    .el-tabs__item.is-active {
      background: transparent;
    }
  }
}
.follow-list {
  border-radius: 4px;
  border: 1px solid #cccccc;
  height: 100%;
  background: #fafafa;
  height: calc(100vh - 280px);
  overflow-y: overlay;
  li {
    padding: 18px 22px;
    border-bottom: 1px solid #ccc;
    // cursor: pointer;
    .time {
      font-size: 14px;
      margin-bottom: 8px;
      font-family: AlibabaPuHuiTiR;
      text-align: left;
      &:first-child {
        color: #4e68ff;
      }
    }
  }
}
</style>