<template>
  <!-- 舌象分析记录 -->
  <div class="tongue-analysis-wrapper" :style="cssVars">
    <el-tabs ref="tab" type="card">
      <el-tab-pane v-for="(pane, index) in list" :key="pane.id" :label="pane.time">
        <div class="area" v-if="pane.tongue.result">
          <div class="analysis-image">
            <div>
              <img src="../../../assets/tongue.svg" alt="">
              <el-popover title="分析结果" :content="pane.tongue.result" width="200">
                <span slot="reference" style="cursor: pointer;">舌象分析结果</span>
              </el-popover>
            </div>
            <el-image v-for="item in pane.tongue.cover" :src="item" :preview-src-list="pane.cover"></el-image>
          </div>
          <table>
            <thead>
            <tr>
              <th v-for="(value, i) in pane.tongue.table.columns" :key="i" v-html="value"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, i) in pane.tongue.table.data" :key="i"
                :data-exception="item.exception"
                :data-invalid="item.invalid"
            >
              <td v-for="(col, i) in item" :key="i">
                <div style="margin: 2px 0;" v-for="item in col" :key="item.value">
                  <el-popover v-if="item.exception" :title="item.exception.title"
                              trigger="hover"
                              popper-class="analysis-exception-popover">
                    <div class="card__content">
                      <div style="margin-bottom: 10px;">
                        <img v-if="item.exception.cover" class="flex-none w-2/4 object-scale-down"
                             :src="item.exception.cover" alt="分析异常图像"/>
                        <el-tag style="margin-top: 2px;margin-right: 2px;" type="danger"
                                v-for="value in item.exception.tags" :key="value">{{ value }}
                        </el-tag>
                      </div>
                      <div style="margin-top: 4px;" v-for="description in item.exception.descriptions"
                           :key="description.value">
                        <label>{{ description.label }}</label>
                        <span v-html="description.value"></span>
                      </div>
                    </div>
                    <span slot="reference" style="cursor: pointer; color: #f87171;">{{ item.value }}</span>
                  </el-popover>
                  <template v-else>{{ item.value }}</template>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="area" v-if="pane.face.result">
          <div class="analysis-image">
            <div>
              <img src="../../../assets/face.svg" alt="">
              <el-popover title="分析结果" :content="pane.face.result" width="200">
                <span slot="reference" style="cursor: pointer;">面象分析结果</span>
              </el-popover>
            </div>
            <el-image v-for="item in pane.face.cover" :src="item" :preview-src-list="pane.cover"></el-image>
            <div></div>
          </div>
          <table>
            <thead>
            <tr>
              <th v-for="(value, i) in pane.face.table.columns" :key="i" v-html="value"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, i) in pane.face.table.data" :key="i"
                :data-exception="item.exception"
                :data-invalid="item.invalid"
            >
              <td v-for="(col, i) in item" :key="i">
                <div style="margin: 2px 0;" v-for="item in col" :key="item.value">
                  <el-popover v-if="item.exception" :title="item.exception.title"
                              trigger="hover"
                              popper-class="analysis-exception-popover">
                    <div class="card__content">
                      <div style="margin-bottom: 10px;">
                        <img v-if="item.exception.cover" class="flex-none w-2/4 object-scale-down"
                             :src="item.exception.cover" alt="分析异常图像"/>
                        <div>
                          <el-tag type="danger" v-for="value in item.exception.tags" :key="value">{{ value }}</el-tag>
                        </div>
                      </div>
                      <div style="margin-top: 4px;" v-for="description in item.exception.descriptions"
                           :key="description.value">
                        <label>{{ description.label }}</label>
                        <span v-html="description.value"></span>
                      </div>
                    </div>
                    <span slot="reference" style="cursor: pointer; color: #f87171;">{{ item.value }}</span>
                  </el-popover>
                  <template v-else>{{ item.value }}</template>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <el-button style="width: 100%;" type="primary"
                   :loading="pane.id === caseId" :disabled="!!caseId && caseId !== pane.id"
                   @click="handle(pane.id)">查看病历详情信息
        </el-button>
      </el-tab-pane>
    </el-tabs>
    <Popup
        :showDialog="showCase"
        @cancle="closeCase"
        :showBtns="false"
        width="70%"
        distanceTop="5vh"
        :destroyOnClose="true"
        title=""
        :modal="false"
    >
      <div style="height: 100%" slot="body">
        <outpatientRecord :info="caseItem"></outpatientRecord>
      </div>
    </Popup>
  </div>
</template>
<script>

import {getRecordDetail} from "@/api/diagnosis";
import outpatientRecord from "@/components/ui/outpatientRecords.vue";
import Popup from "@/components/Propup.vue";

let _keydown_

export default {
  components: {Popup, outpatientRecord},
  props: {
    dataset: {
      type: Object,
      default() { return null; }
    }
  },
  data() {
    return {
      page: 1,
      limit: 3,
      list: [],

      cardProps: {width: 0},

      caseId: '',
      caseItem: null,
      showCase: false,
    };
  },
  computed: {
    cssVars() {
      return {
        '--w': `${this.cardProps.width}px`,
      }
    }
  },
  methods: {
    async load(length) {
      const {data} = await this.dataset.get(this.page, length);
      this.list = data;
    },

    async handle(id) {
      this.caseId = id;
      const res = await getRecordDetail({id}).catch(() => {});
      if (res.ResultCode == 0) {
        this.caseItem = res.Data;
        this.showCase = true;
        const fn = (event) => {
          event.stopPropagation();
          event.preventDefault();
          this.closeCase();
        };
        document.addEventListener('keydown', fn, {once: true});
        _keydown_ = () => document.removeEventListener('keydown', fn);
      } else {
        this.$message.error(res.ResultInfo);
      }
    },
    // 关闭就诊 详情
    closeCase() {
      this.showCase = false;
      this.caseId = '';
      this.caseItem = null;
      if (typeof _keydown_ === 'function') _keydown_();
    },
    _followScroll() {
      const nav = this.$refs.tab.$el.querySelector(`.el-tabs__nav`);
      const content = this.$refs.tab.$el.querySelector(`.el-tabs__content`);

      this.cardProps.observer = new MutationObserver(mutations => {
        try { content.style.transform = mutations[0].target.style.transform; } catch (e) { }
      })
      this.cardProps.observer.observe(nav, {attributes: true});
    }
  },
  beforeMount() {
    if (this.dataset) {
      this.list = this.dataset.data;
      this.load(this.dataset.total || this.limit);
    }
  },
  mounted() {
    const rect = this.$el.parentElement.getBoundingClientRect();
    const width = Math.max(Math.floor(rect.width / 3), 250);
    this.$set(this.cardProps, 'width', width);

    this._followScroll();
  },
  unmount() {
    if (this.cardProps.observer) this.cardProps.observer.disconnect();
  }
};
</script>
<style lang="scss" scoped>
.tongue-analysis-wrapper {
  height: 100%;
  overflow: hidden;

  .area {
    margin-bottom: 12px;

    .analysis-image {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      > div {
        flex: 0 0 30%;
        max-height: 128px;

        &:nth-of-type(1) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;

          img {
            width: 50%;
            height: 50%;
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;

      th {
        font-size: 16px;
        padding: 10px;
        border: 1px solid #E4E7ED;
      }

      td {
        padding: 8px;
        border: 1px solid #E4E7ED;
        min-height: 40px;
      }
    }
  }

  ::v-deep {
    .el-tabs--card {
      display: flex;
      flex-direction: column;
      height: 100%;

      .el-tabs__header { flex: none; }

      .el-tabs__content { flex: auto; }
    }
  }

  ::v-deep {
    .el-tabs__item,
    .el-tab-pane {
      width: var(--w);
    }

    .el-tabs__header {
      .el-tabs__item {
        text-align: center;
      }
    }

    .el-tabs__content {
      display: flex;
      width: max-content;
      padding: 0 20px;

      .el-tab-pane {
        flex: none;
        display: block !important;
        padding: 0 12px;
        overflow-y: auto;
        box-sizing: border-box;
      }
    }
  }
}

tr[data-invalid="true"] td:nth-of-type(2) {
  color: #9ca3af;
}
</style>
<style lang="scss">
.analysis-exception-popover {
  width: 245px;

  img {
    width: 100%;
    object-fit: scale-down;
  }
}
</style>