<template>
  <div class="Image-Based-Surgical-Planning">
    <div class="banner"></div>
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right"
        style="padding: 5px;background-color: #f1f1f1;margin-top: 10px;">
        <el-breadcrumb-item :to="{ path: '/home' }">{{ $t('home.menuName') }}</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/services">{{ $t('service.menuName') }}</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/services/3DPostProcessingServices">{{ $t('service.subMenu2')
            }}</a></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('processingService.tab6') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="solution">
        <div class="soluDetail">
          <div class="cont" style="display: block;margin-top: 0;">
            <div class="itemX">
              <h2 class="liverTitle cf"><s>{{ $t(`ImageBasedSurgicalPlanning.title5`) }}</s><em>{{
                $t(`ImageBasedSurgicalPlanning.title6`) }}</em>
                <div class="aAs cf">
                  <span :class="{ cur: activeName === 'LM' }" @click.stop="handleClick('LM')">{{
                    $t(`ImageBasedSurgicalPlanning.tab_LM`) }}</span>
                  | <span :class="{ cur: activeName === 'FSF' }" @click.stop="handleClick('FSF')">{{
                    $t(`ImageBasedSurgicalPlanning.tab_FSF`) }}</span> | <span :class="{ cur: activeName === 'TAVI' }"
                    @click.stop="handleClick('TAVI')">{{
                      $t(`ImageBasedSurgicalPlanning.tab_TAVI`) }}</span> | <span :class="{ cur: activeName === 'KM' }"
                    @click.stop="handleClick('KM')">{{
                      $t(`ImageBasedSurgicalPlanning.tab_KM`) }}</span> | <span :class="{ cur: activeName === 'PT' }"
                    @click.stop="handleClick('PT')">{{
                      $t(`ImageBasedSurgicalPlanning.tab_PT`) }}</span> | <span :class="{ cur: activeName === 'AAA' }"
                    @click.stop="handleClick('AAA')">{{
                      $t(`ImageBasedSurgicalPlanning.tab_AAA`) }}</span>
                </div>
              </h2>
              <div class="liverList cf">
                <h3>{{ $t(`ImageBasedSurgicalPlanning.tab_${activeName}`) }}</h3>
                <p style="float:right;  font-size:14px; color:#777; margin-bottom:0px; "><i
                    class="fa fa-search-plus"></i>{{ $t(`ImageBasedSurgicalPlanning.msg1`) }}</p>
                <table class="comTable liverTable cf">
                  <tbody>
                    <tr>
                      <th width="180">{{ $t(`ImageBasedSurgicalPlanning.title1`) }}</th>
                      <th width="">{{ $t(`ImageBasedSurgicalPlanning.title2`) }}</th>
                      <th width="180">{{ $t(`ImageBasedSurgicalPlanning.title3`) }}</th>
                    </tr>
                    <tr v-for="(item, index) in list" :key="item.id" :class="{ last: index === list.length - 1 }">
                      <td class="td1" v-html="$t(`ImageBasedSurgicalPlanning.${item.key}.series_${item.id}`)"></td>
                      <td class="td2">
                        <p v-html="$t(`ImageBasedSurgicalPlanning.${item.key}.clinical_${item.id}`)">
                        </p>
                      </td>
                      <td class="td3">
                        <img :src="getSrc(item.img)" class="liverTri" @click.stop="openShowImage(item, index)">
                      </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}`)
    },
    openShowImage(item, index) {
      this.images = []
      this.rowData = Object.assign({}, item)
      let { viewFrom, viewLength } = item
      for (let i = 1; i <= viewLength; i++) {
        this.images.push(require(`../../../../../static/images/mass/${viewFrom}/${index + 1}/${i}.jpg`))
      }
      this.visible = true
    }
  },
  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",
            "key": "LM",
            "img": "static/images/livermass1a.jpg",
            "viewFrom": "liver",
            "viewLength": 21
          },
          {
            "id": "LM2",
            "key": "LM",
            "img": "static/images/livermass1b.jpg",
            "viewFrom": "liver",
            "viewLength": 21
          },
          {
            "id": "LM3",
            "key": "LM",
            "img": "static/images/livermass1c.jpg",
            "viewFrom": "liver",
            "viewLength": 21
          },
          {
            "id": "LM4",
            "key": "LM",
            "img": "static/images/livermass1d.jpg",
            "viewFrom": "liver",
            "viewLength": 21
          },
          {
            "id": "LM5",
            "key": "LM",
            "img": "static/images/livermass1e.jpg",
            "viewFrom": "liver",
            "viewLength": 4
          },
          {
            "id": "LM6",
            "key": "LM",
            "img": "static/images/livermass1f.jpg",
            "viewFrom": "liver",
            "viewLength": 4
          },
          {
            "id": "LM7",
            "key": "LM",
            "img": "static/images/livermass1g.jpg",
            "viewFrom": "liver",
            "viewLength": 7
          },
          {
            "id": "LM8",
            "key": "LM",
            "img": "static/images/livermass1h.jpg",
            "viewFrom": "liver",
            "viewLength": 5
          }
        ],
        "FSF": [
          {
            "id": "FSF1",
            "key": "FSF",
            "img": "static/images/bone1.jpg",
            "viewFrom": "bone",
            "viewLength": 21
          },
          {
            "id": "FSF2",
            "key": "FSF",
            "img": "static/images/bone2.jpg",
            "viewFrom": "bone",
            "viewLength": 21
          },
          {
            "id": "FSF3",
            "key": "FSF",
            "img": "static/images/bone3.jpg",
            "viewFrom": "bone",
            "viewLength": 21
          },
          {
            "id": "FSF4",
            "key": "FSF",
            "img": "static/images/bone4.jpg",
            "viewFrom": "bone",
            "viewLength": 30
          },
          {
            "id": "FSF5",
            "key": "FSF",
            "img": "static/images/bone5.jpg",
            "viewFrom": "bone",
            "viewLength": 6
          }
        ],
        "TAVI": [
          {
            "id": "TAVI1",
            "key": "TAVI",
            "img": "static/images/tavi1.jpg",
            "viewFrom": "tavi",
            "viewLength": 4
          },
          {
            "id": "TAVI2",
            "key": "TAVI",
            "img": "static/images/tavi2.jpg",
            "viewFrom": "tavi",
            "viewLength": 2
          },
          {
            "id": "TAVI3",
            "key": "TAVI",
            "img": "static/images/tavi3.jpg",
            "viewFrom": "tavi",
            "viewLength": 1
          },
          {
            "id": "TAVI4",
            "key": "TAVI",
            "img": "static/images/tavi4.jpg",
            "viewFrom": "tavi",
            "viewLength": 12
          },
          {
            "id": "TAVI5",
            "key": "TAVI",
            "img": "static/images/tavi5.jpg",
            "viewFrom": "tavi",
            "viewLength": 32
          },
          {
            "id": "TAVI6",
            "key": "TAVI",
            "img": "static/images/tavi6.jpg",
            "viewFrom": "tavi",
            "viewLength": 32
          }
        ],
        "KM": [
          {
            "id": "KM1",
            "key": "KM",
            "img": "static/images/kidney1.jpg",
            "viewFrom": "kidney",
            "viewLength": 2
          },
          {
            "id": "KM2",
            "key": "KM",
            "img": "static/images/kidney2.jpg",
            "viewFrom": "kidney",
            "viewLength": 2
          },
          {
            "id": "KM3",
            "key": "KM",
            "img": "static/images/kidney3.jpg",
            "viewFrom": "kidney",
            "viewLength": 21
          },
          {
            "id": "KM4",
            "key": "KM",
            "img": "static/images/kidney4.jpg",
            "viewFrom": "kidney",
            "viewLength": 21
          },
          {
            "id": "KM5",
            "key": "KM",
            "img": "static/images/kidney5.jpg",
            "viewFrom": "kidney",
            "viewLength": 21
          },
          {
            "id": "KM6",
            "key": "KM",
            "img": "static/images/kidney6.jpg",
            "viewFrom": "kidney",
            "viewLength": 21
          },
          {
            "id": "KM7",
            "key": "KM",
            "img": "static/images/kidney7.jpg",
            "viewFrom": "kidney",
            "viewLength": 7
          }
        ],
        "PT": [
          {
            "id": "PT1",
            "key": "PT",
            "img": "static/images/pancreas1.jpg",
            "viewFrom": "pancreas",
            "viewLength": 16
          },
          {
            "id": "PT2",
            "key": "PT",
            "img": "static/images/pancreas2.jpg",
            "viewFrom": "pancreas",
            "viewLength": 6
          },
          {
            "id": "PT3",
            "key": "PT",
            "img": "static/images/pancreas3.jpg",
            "viewFrom": "pancreas",
            "viewLength": 21
          },
          {
            "id": "PT4",
            "key": "PT",
            "img": "static/images/pancreas4.jpg",
            "viewFrom": "pancreas",
            "viewLength": 21
          },
          {
            "id": "PT5",
            "key": "PT",
            "img": "static/images/pancreas5.jpg",
            "viewFrom": "pancreas",
            "viewLength": 21
          },
          {
            "id": "PT6",
            "key": "PT",
            "img": "static/images/pancreas6.jpg",
            "viewFrom": "pancreas",
            "viewLength": 21
          },
          {
            "id": "PT7",
            "key": "PT",
            "img": "static/images/pancreas7.jpg",
            "viewFrom": "pancreas",
            "viewLength": 21
          },
          {
            "id": "PT8",
            "key": "PT",
            "img": "static/images/pancreas8.jpg",
            "viewFrom": "pancreas",
            "viewLength": 4
          },
          {
            "id": "PT9",
            "key": "PT",
            "img": "static/images/pancreas9.jpg",
            "viewFrom": "pancreas",
            "viewLength": 4
          }
        ],
        "AAA": [
          {
            "id": "AAA1",
            "key": "AAA",
            "img": "static/images/belly1.jpg",
            "viewFrom": "belly",
            "viewLength": 30
          },
          {
            "id": "AAA2",
            "key": "AAA",
            "img": "static/images/belly2.jpg",
            "viewFrom": "belly",
            "viewLength": 21
          },
          {
            "id": "AAA3",
            "key": "AAA",
            "img": "static/images/belly3.jpg",
            "viewFrom": "belly",
            "viewLength": 21
          },
          {
            "id": "AAA4",
            "key": "AAA",
            "img": "static/images/belly4.jpg",
            "viewFrom": "belly",
            "viewLength": 21
          },
          {
            "id": "AAA5",
            "key": "AAA",
            "img": "static/images/belly5.jpg",
            "viewFrom": "belly",
            "viewLength": 21
          },
          {
            "id": "AAA6",
            "key": "AAA",
            "img": "static/images/belly6.jpg",
            "viewFrom": "belly",
            "viewLength": 5
          },
          {
            "id": "AAA7",
            "key": "AAA",
            "img": "static/images/belly7.jpg",
            "viewFrom": "belly",
            "viewLength": 5
          },
          {
            "id": "AAA8",
            "key": "AAA",
            "img": "static/images/belly8.jpg",
            "viewFrom": "belly",
            "viewLength": 4
          },
          {
            "id": "AAA9",
            "key": "AAA",
            "img": "static/images/belly9.jpg",
            "viewFrom": "belly",
            "viewLength": 4
          },
          {
            "id": "AAA10",
            "key": "AAA",
            "img": "static/images/belly10.jpg",
            "viewFrom": "belly",
            "viewLength": 4
          },
          {
            "id": "AAA11",
            "key": "AAA",
            "img": "static/images/belly11.jpg",
            "viewFrom": "belly",
            "viewLength": 4
          }
        ]
      }
    }
  },
}
</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: 1200px;
    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: 100%;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 73px;

  .soluDetail {
    padding-top: 0;
  }

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

  p {
    font-size: 16px;
    line-height: 26px;
    color: #2f2f2f;
    padding-bottom: 0;
    // 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: 18px !important;
        display: block;
        margin-top: -4px;
        margin-bottom: 11px;
        line-height: 18px !important;
        text-decoration: none;
        font-weight: normal;
      }

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

  .liverTitle {
    position: relative;
    border: none;
    margin-top: 0;

    .aAs {
      position: absolute;
      right: 0;
      top: 24px;
      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: 18px;
      text-align: center;
      padding-bottom: 20px;
      padding-top: 2px;
      font-weight: normal;
    }
  }

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

    .td1 {
      text-align: left;
    }

    .td2 {
      p {
        padding-bottom: 0;
        text-align: justify;
      }
    }

    .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>
