<template>
  <div class="Image-Based-Surgical-Planning">
    <div class="banner"></div>
    <div class="content">
      <div class="solution">
        <div class="soluDetail">
          <div class="cont" style="display: block;margin-top: 0;">
            <div class="itemX">
              <h2 class="liverTitle cf"><s>Cases:</s><em>Image-Based Surgical Planning</em>
                <div class="aAs cf">
                  <span :class="{ cur: activeName === 'LM' }" @click.stop="handleClick('LM')">Liver
                    Mass</span> | <span :class="{ cur: activeName === 'FSF' }" @click.stop="handleClick('FSF')">Femoral
                    Shaft Fracture</span> | <span :class="{ cur: activeName === 'TAVI' }"
                    @click.stop="handleClick('TAVI')">TAVI</span> | <span :class="{ cur: activeName === 'KM' }"
                    @click.stop="handleClick('KM')">Kidney Mass</span> | <span :class="{ cur: activeName === 'PT' }"
                    @click.stop="handleClick('PT')">Pancreatic Tumor</span> | <span
                    :class="{ cur: activeName === 'AAA' }" @click.stop="handleClick('AAA')">AAA</span>
                </div>
              </h2>
              <div class="liverList cf">
                <h3>Liver Mass</h3>
                <p style="float:right;  font-size:14px; color:#777; margin-bottom:10px; "><i
                    class="fa fa-search-plus"></i> Please click each thumbnail to see the complete image series.</p>
                <table class="comTable liverTable cf">
                  <tbody>
                    <tr>
                      <th width="180">Series</th>
                      <th width="">Clinical Implications</th>
                      <th width="180">Images</th>
                    </tr>
                    <tr v-for="(item, index) in list" :key="item.id" :class="{ last: index === list.length - 1 }">
                      <td class="td1">{{ item.series }}</td>
                      <td class="td2">
                        <p v-html="item.clinical"></p>
                      </td>
                      <td class="td3">
                        <img :src="getSrc(item.img)" class="liverTri" @click.stop="openShowImage">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <showImage v-if="visible" :visible.sync="visible" :images="images" :data="rowData" />
  </div>

</template>

<script>
import showImage from "./showImage.vue"
export default {
  components: { showImage },


  methods: {
    handleClick(active) {
      this.activeName = active
      this.list = this.obj[this.activeName] || []
    },
    getSrc(src) {
      return require(`../../../../../${src}`)
    }
  },
  mounted() {
    let active = this.$route.query.active
    if (active) {
      this.activeName = active
      this.list = this.obj[this.activeName] || []
    }
  },
  data() {
    return {
      images: [],
      activeName: "LM",
      visible: false,
      rowData: {},
      list: [],
      obj: {
        LM: [
          {
            id: 'LM1',
            series: 'Abd Aorta MIP',
            clinical: 'Showing origins, courses &amp; shapes of abdominal aorta and its major branches.',
            img: 'static/images/livermass1a.jpg'
          }
        ]
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.Image-Based-Surgical-Planning {
  background: #fff;

  .banner {
    height: 300px;
    background: url(../../../../../../src/static/images/bannerSolution3.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    clear: both;
  }

  // style="color: #1083b6;font-size: 22px;"
  .content {
    width: 926px;
    margin: 0 auto;

    .el-tabs__nav .el-tabs__item:first-child {
      color: #1083b6 !important;
      font-size: 22px !important;
    }

    .custom_tab {
      .el-tabs__header {
        border-bottom: none;
        margin: 0;
      }

      // 标签项样式
      .el-tabs__item {
        color: #555 !important;
        height: 65px;
        font-size: 15px;
        line-height: 65px;
        font-weight: normal;

        // 竖线分隔（排除最后一个元素）
        &:not(:last-child)::after {
          content: "丨";
          position: absolute;
          right: -8px;
          color: #ddd;
        }

        // 激活态样式
        &.is-active {
          color: #1083b6 !important;
          font-weight: normal;
        }

        // 隐藏默认下划线
        &::before {
          display: none !important;
        }
      }

      // 隐藏激活态下划线
      .el-tabs__active-bar {
        display: none;
      }

      // 调整导航栏布局
      .el-tabs__nav {
        display: flex;
        justify-content: space-between;
        border: none !important;
      }

      .item {
        margin: 30px 0;

        p {
          font-size: 15px;
          line-height: 28px;
          color: #2f2f2f;
        }

        h2 {
          font-size: 18px;
          padding-left: 5px;
          border-left: 5px solid #1083b6;
          color: #1083b6;
          height: 18px;
          line-height: 18px;
          margin-bottom: 30px;
          font-weight: normal;
        }

        .img_content {
          margin: -10px 0 25px 0;

          img {
            display: block;
            margin: 0 auto;
            border: 0;
          }
        }

        ul {
          margin: -10px 0 25px 0;

          // list-style: none
          li {
            width: 100%;
            float: none;
            clear: both;
            line-height: 24px;
            padding-bottom: 14px;
            font-size: 14px;
            color: #2f2f2f;
          }
        }
      }

    }
  }
}



.cf {
  zoom: 1;

  &::after {
    content: "";
    display: table;
    clear: both;

  }

  &::before {
    content: "";
    display: table;
  }
}


ul {
  margin-top: 10px;
  list-style: none;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.solution {
  width: 926px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 73px;

  h1 {
    font-size: 34px;
    line-height: 34px;
    color: #333333;
    padding-left: 14px;
    border-left: 6px solid #1083b6;
    height: 34px;
    margin-bottom: 40px;
  }

  p {
    font-size: 16px;
    line-height: 26px;
    color: #2f2f2f;
    // padding-bottom: 22px;
  }

  ul {
    margin-top: 0;
  }

  .cont {
    clear: both;
    margin-top: 20px;
    display: none;
  }

  .cont.on {
    display: block;
  }


  .itemX {
    margin-bottom: 30px;

    p {
      font-size: 15px;
      line-height: 28px;
      color: #2f2f2f;
      margin-bottom: 20px;
    }

    h2 {
      padding-left: 8px;
      border-left: 5px solid #1083b6;
      color: #444;
      margin-bottom: 30px;

      s {
        font-size: 29px !important;
        display: block;
        margin-top: -4px;
        margin-bottom: 11px;
        line-height: 29px !important;
        text-decoration: none;
      }

      em {
        line-height: 1;
        display: block;
        margin: 5px 0 -2px 0px;
        font-size: 17px;
        font-weight: normal;
      }
    }
  }

  .liverTitle {
    position: relative;

    .aAs {
      position: absolute;
      right: 0;
      top: 30px;
      font-size: 14px !important;
      color: #999;
      width: 900px;
      text-align: right;

      span {
        cursor: pointer;
        margin: 0 4px;
        font-size: 14px !important;
        font-weight: normal;
      }

      .cur {
        color: #1083b6;
      }
    }
  }

  .liverList {
    h3 {
      font-size: 28px;
      text-align: center;
      padding-bottom: 40px;
      padding-top: 27px;
    }
  }

  .liverTable {
    td {
      padding: 15px 20px 15px 20px;
    }

    .td2 {
      p {
        padding-bottom: 0;
      }
    }

    .liverTri {
      cursor: pointer;
    }
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.comTable {
  width: 100%;
  border-left: 1px solid #1083b6;
  border-right: 1px solid #1083b6;

  tr:nth-child(2n) {
    background-color: #f4f4f4;
  }

  th {
    height: 47px;
    line-height: 47px;
    color: #fff;
    background: #1083b6;
    font-size: 15px;
    text-align: center;
  }

  td {
    line-height: 22px;
    font-size: 14px;
    color: #2f2f2f;
    text-align: center;
    vertical-align: middle;
    padding: 15px 13px 15px 0;
  }

  td.td2 {
    text-align: left;
  }

  .last td {
    border-bottom: 1px solid #1083b6;
  }

}
</style>
