<template>
  <div class="tct">
    <div>
      <div class="header">实验室分析结果:</div>
      <div class="first-title margin-bottom-4" style="">TBS诊断标准:</div>
      <div class="first">
        <span class="label" style="margin-right: 12px">样本满意度评估</span>
        <check-vue
          :jsonDataArray="jsonDataArray"
          label="满意"
          style="margin-right: 8px"
        />
        <check-vue
          :jsonDataArray="jsonDataArray"
          label="颈管细胞"
          style="margin-right: 8px"
        />
        <check-vue
          :jsonDataArray="jsonDataArray"
          label="化生细胞"
          style="margin-right: 8px"
        />
        <check-vue :jsonDataArray="jsonDataArray" label="不满意(细胞量<10%)" />
      </div>
      <div class="two margin-top-12">
        <div class="left">
          <div class="first-title">鳞状上皮细胞分析:</div>
          <div class="flex margin-bottom-8">
            <check-vue
              :jsonDataArray="jsonDataArray"
              label="未见上皮内病变或恶性病变"
              class="margin-top-6"
            />
          </div>
          <div class="flex margin-bottom-8">
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="炎症"
              />
            </span>
            <span class="bracket height-37"></span>
            <span>

              <check-vue
                :jsonDataArray="jsonDataArray"
                label="轻度"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="中度"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="重度"
                :leftLine="true"
              />
            </span>
          </div>
          <div class="flex margin-top-6 margin-bottom-8">
            <span class="label">微生物</span>
            <span class="bracket height-73"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="阴道滴虫"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="真菌，形态上符合念珠菌属"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="菌群变化，提示细菌性阴道"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="细菌，形态符合放线菌属"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="细胞变化符合单纯疱疹病毒感染"
                :leftLine="true"
              />
            </span>
          </div>
          <div class="flex margin-bottom-8">
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="反应性细胞改变"
              />
            </span>
            <span class="bracket height-73"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="炎性(包括典型修复)"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="萎缩"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="宫内节育器(IUD)"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="放疗"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="其它"
                :leftLine="true"
              />
            </span>
          </div>
          <div class="flex" style="margin-bottom: 16px; position: relative">
            <span style="flex-shrink: 0">
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="非典型鳞状细胞"
              />
            </span>
            <span class="bracket teli"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="不能明确意义(ASC-US)"
                :leftLine="true"
                class="margin-bottom-4 telicheck"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="不除外高度鳞状上皮内病变(ASC-H)"
                :leftLine="true"
                class="telicheck"
              />
            </span>
          </div>
          <div class="flex margin-bottom-16">
            <check-vue
              :jsonDataArray="jsonDataArray"
              label="低度鳞状上皮内病变(LSIL)"
              style="margin-right: 12px"
            />
            <check-vue :jsonDataArray="jsonDataArray" label="提示HPV感染" />
          </div>
          <div class="flex margin-bottom-16">
            <check-vue
              :jsonDataArray="jsonDataArray"
              label="高度鳞状上皮内病变(HSIL)"
              style="margin-right: 12px"
            />
            <check-vue :jsonDataArray="jsonDataArray" label="鳞状细胞癌" />
          </div>
        </div>
        <div class="divider__vertical"></div>
        <div class="right">
          <div class="first-title">腺上皮细胞分析:</div>
          <div class="flex margin-bottom-8">
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="非典型腺细胞(宫颈管)"
              />
            </span>
            <span class="bracket height-19"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="非特异性改变"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="倾向于肿瘤性病变"
                :leftLine="true"
              />
            </span>
          </div>

          <div class="flex margin-bottom-8">
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="非典型腺细胞(宫内膜)"
              />
            </span>
            <span class="bracket height-19"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="非特异性改变"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="倾向于肿瘤性病变"
                :leftLine="true"
              />
            </span>
          </div>
          <div class="flex margin-bottom-8">
            <check-vue
              :jsonDataArray="jsonDataArray"
              label="非典型腺细胞(来源不明)"
            />
          </div>

          <div class="flex margin-bottom-8">
            <span>
              <check-vue :jsonDataArray="jsonDataArray" label="腺癌" />
            </span>
            <span class="bracket height-37"></span>
            <span>
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="宫颈"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="宫内膜"
                :leftLine="true"
                class="margin-bottom-4"
              />
              <check-vue
                :jsonDataArray="jsonDataArray"
                label="其它"
                :leftLine="true"
              />
            </span>
          </div>

          <div class="flex margin-bottom-8">
            <check-vue :jsonDataArray="jsonDataArray" label="其它恶性肿瘤" />
          </div>

          <div class="first-title margin-bottom-6">镜下所见:</div>
          <img
            class="lensSeen"
            v-if="lensSeen"
            :src="lensSeen"
            alt=""
            srcset=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import checkVue from "./checkVue";
export default {
  props: ["lensSeen", "jsonData"],
  components: {
    checkVue,
  },
  filters: {
    checkValue(value, jsonDataArray) {
      if (jsonDataArray) {
        return jsonDataArray.includes(value);
      }
      return false;
    },
  },
  computed: {
    jsonDataArray() {
      let arr = [];

      if (!this.jsonData) {
        return [];
      }

      let data = JSON.parse(this.jsonData);
      for (let key in data) {
        if (Array.isArray(data[key])) {
          arr = [...arr, ...data[key]];
        }
      }
      return arr;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.tct {
  color: #000;
}
.first {
  display: flex;
}
.flex {
  display: flex;
  align-items: center;
}
.two {
  display: flex;
  width: 100%;

  .left,
  .right {
    width: calc(50% - 1px);
  }

  .left {
    padding-right: 17px;
  }
  .right {
    padding-left: 20px;
  }
}

.divider__vertical {
  height: 402px;
  border-left: 1px solid;
}

.margin-bottom-2 {
  margin-bottom: 2px;
}
.margin-bottom-4 {
  margin-bottom: 4px;
}

.margin-bottom-6 {
  margin-bottom: 6px;
}

.margin-bottom-8 {
  margin-bottom: 8px;
}

.margin-bottom-16 {
  margin-bottom: 16px;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
.margin-top-6 {
  margin-top: 6px;
}

.margin-top-12 {
  margin-top: 12px;
}

.bracket {
  display: inline-flex;
  align-items: center;
  width: 12px;
  margin-left: 2px;
  // background-color: #000;
  border-right: 1px solid #000000;
  // background: linear-gradient(to left,#000000);
  // background-size: 10px 1px;
  // background-repeat: repeat-x;
  // background-position: center;
}

.bracket::before {
  content: "";
  position: absolute;
  width: 12px;
  border-top: 1px solid;
}

.teli {
  position: absolute;
  top: 7px;
  left: 112px;
  height: 25px;
}

.teli::before {
  top: 14px;
}

.telicheck {
  padding-left: 14px;
}

.header {
  margin: 6px 0;
  font-size: 16px;
  font-family: SimSun;
  // font-weight: 700;
  line-height: 17px;
}
.first-title {
  font-size: 14px;
  font-family: SimSun;
  // font-weight: 700;
  line-height: 14px;
}
.label {
  line-height: 1;
}

.height-73 {
  height: 73px;
}


.height-19 {
  height: 19px;
}

.height-37 {
  height: 37px;
}

.lensSeen {
  width: 200px;
  height: 150px;
}

@media print {
  .header {
    margin: 6px 0;
    font-size: 26px;
    font-family: SimSun;
    // font-weight: 700;
    line-height: 26px;
  }
  .first-title {
    font-size: 20px;
    font-family: SimSun;
    // font-weight: 700;
    line-height: 20px;
  }

  .label {
    padding-left: 6px;
    font-family: SimSun;
    font-size: 18px;
    line-height: 1;
  }

  .teli {
    position: absolute;
    top: 10px;
    left: 152px;
    height: 33px;
  }
  .teli::before {
    top: 20px;
  }
  .divider__vertical {
    height: 602px;
    border-color: rgba(0, 0, 0, 0.8);
  }
  .margin-bottom-2 {
    margin-bottom: 4px;
  }

  .margin-bottom-4 {
    margin-bottom: 8px;
  }

  .margin-bottom-6 {
    margin-bottom: 12px;
  }

  .margin-bottom-8 {
    margin-bottom: 16px;
  }

  .margin-bottom-16 {
    margin-bottom: 32px;
  }
  .margin-bottom-20 {
    margin-bottom: 40px;
  }
  .margin-top-6 {
    margin-top: 12px;
  }

  .height-73 {
    height: 105px;
  }

  .height-19 {
    height: 24px;
  }

  .height-37 {
    height: 49px;
  }

  .bracket {
    // background-color: #000;
    border-right: 0.5px solid rgba(0, 0, 0, 0.8);
  }

  .bracket::before {
    border-top: 0.5px solid rgba(0, 0, 0, 0.8);
  }

  .lensSeen {
    width: 400px;
    height: 300px;
  }
}
</style>