<template>
  <div class="center-imaging-services">
    <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 :to="{ path: '/services' }">
          {{ $t('service.menuName') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ $t('service.subMenu1') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-tabs v-model="activeName" class="custom_tab" ref="custom_tab">
        <el-tab-pane :label="$t('imagingService.tab1')" name="1">
          <div class="item">
            <div style="margin-bottom: 30px;">
              <p>{{ $t('imagingService.msg1') }}</p>
              <p>{{ $t('imagingService.msg2') }}</p>
            </div>
            <h2>{{ $t('imagingService.title1') }}</h2>
            <div class="img_content">
              <img
                v-if="$i18n.locale === 'zh'"
                src="@/static/images/new_irc01.png"
                alt=""
              />
              <img
                v-if="$i18n.locale === 'en'"
                src="@/static/images/image3.png"
                alt=""
                style="width: 500px;"
              />
            </div>
            <h2>{{ $t('imagingService.title2') }}</h2>
            <div class="img_content">
              <img
                v-if="$i18n.locale === 'zh'"
                src="@/static/images/irc01.png"
                alt=""
              />
              <img
                v-if="$i18n.locale === 'en'"
                src="@/static/images/image1.png"
                alt=""
                style="width: 800px;"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('imagingService.tab2')" name="2">
          <div class="item">
            <h2>{{ $t('imagingService.tab2' )}}</h2>
            <ul>
              <li>
                <i class="el-icon-caret-right"></i>
                WHO、RECIST、RECIST1.1
              </li>
              <li>
                <i class="el-icon-caret-right"></i>
                Choi、Lugano 2014、LYRIC、RECIL
              </li>
              <li>
                <i class="el-icon-caret-right"></i>
                irRC、irRECIST、iRECIST、imRECIST
              </li>
              <li>
                <i class="el-icon-caret-right"></i>
                mRECIST Mesothelima、mRECIST HCC、PERCIST
              </li>
              <li>
                <i class="el-icon-caret-right"></i>
                RANO、PCWG3
              </li>
              <li>
                <i class="el-icon-caret-right"></i>
                {{ $t('imagingService.msg3') }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('imagingService.tab3')" name="3">
          <div class="item">
            <h2>{{ $t('imagingService.tab3') }}</h2>
            <div class="img_content">
              <img
                v-if="$i18n.locale === 'zh'"
                src="@/static/images/irc03.png"
                alt=""
              />
              <img
                v-if="$i18n.locale === 'en'"
                src="@/static/images/image2.png"
                alt=""
                style="width: 800px;"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('imagingService.tab4')" name="4">
          <div class="item">
            <div style="margin-bottom: 30px;">
              <p>{{ $t('imagingService.msg4') }}</p>
            </div>
            <img
              v-if="$i18n.locale === 'zh'"
              src="@/static/images/new_irc04.png"
              alt=""
              style="display: block;margin: 0 auto;width: 600px;"
            />
            <img
              v-if="$i18n.locale === 'en'"
              src="@/static/images/image6.png"
              alt=""
              style="display: block;margin: 0 auto;width: 600px;"
            />
            <h2>{{ $t('imagingService.title3') }}</h2>
            <p>{{ $t('imagingService.msg5') }}</p>
            <p style="margin-bottom: 20px;">{{ $t('imagingService.msg6') }}</p>
            <img
              v-if="$i18n.locale === 'zh'"
              src="@/static/images/new_irc05.png"
              alt=""
              style="display: block;margin: 0 auto;width: 620px;"
            />
            <img
              v-if="$i18n.locale === 'en'"
              src="@/static/images/image4.png"
              alt=""
              style="display: block;margin: 0 auto;object-fit: cover;width: 700px;"

            />
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('imagingService.tab6')" name="5">
          <div class="item">
            <p>{{ $t('imagingService.msg7') }}</p>
            <p>{{ $t('imagingService.msg7_1') }}</p>
            <p>{{ $t('imagingService.msg7_2') }}</p>
            <p style="margin-bottom: 20px;">{{ $t('imagingService.msg7_3') }}</p>

            <template v-if="$i18n.locale === 'zh'">
              <h2>{{ $t('imagingService.title4') }}</h2>
              <div style="display: flex;">
                <ul>
                  <li>
                    <i class="el-icon-caret-right"></i>
                    {{ $t('imagingService.msg8') }}
                  </li>
                  <li>
                    <i class="el-icon-caret-right"></i>
                    {{ $t('imagingService.msg9') }}
                  </li>
                  <li>
                    <i class="el-icon-caret-right"></i>
                    {{ $t('imagingService.msg10') }}
                  </li>
                  <li>
                    <i class="el-icon-caret-right"></i>
                    {{ $t('imagingService.msg11') }}
                  </li>
                  <li>
                    <i class="el-icon-caret-right"></i>
                    {{ $t('imagingService.msg12') }}
                  </li>
                </ul>
                <img
                  src="@/static/images/irc05.png"
                  alt=""
                  style="width:300px;position:relative;top:-60px;"
                />
              </div>
            </template>
            <template v-if="$i18n.locale === 'en'">
              <h2>Major features of this system are as follows</h2>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div style="width: 750px;">
                  <p style="font-size: 16px;margin-bottom: 20px;"> 1. An image management & reading tool for treatment response assessment </p>
                  <ul style="padding-left: 24px;margin: 0 0 5px 0;">
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Image studies are managed and organized based on visits by default.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Multiple studies of different modalities can be clustered into one visit.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Image studies of different visits can be displayed in the same window side by side.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Image series containing lesions are clearly marked as key series.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Lesion marking tools can be customized.
                    </li>
                  </ul>
                </div>
                <div style="width: 400px;margin-right: 20px;text-align: center;">
                  <viewer :images="[`@/static/static/images/imaging_5_1.png`]">
                    <img style="height: 150px;cursor: pointer" src="@/static/images/imaging_5_1.png" alt="">
                    <div>
                      <span class="el-icon-view"></span>
                      <span style="margin-left: 4px">click image</span>
                    </div>
                  </viewer>
                </div>
              </div>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div style="width: 750px;">
                  <p style="font-size: 16px;margin-bottom: 20px;">
                    2. An intelligent lesion marking tool
                  </p>
                  <ul style="padding-left: 24px;margin: 0 0 5px 0;">
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatic generation of lesion entries in electronic image case report forms (eICRF).
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Lesion information & measurement data are automatically recorded into eICRF.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Based on measurement data, automatically detect a lesion’s type, and update its state.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Intelligently remind total/per organ lesion number limits, and non-conformity issues.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatic verification of lesion information’s accuracy, and intelligent error alerts.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatically display a slice which most likely contains the intended target lesion.
                    </li>
                  </ul>
                </div>
                <div style="width: 400px;margin-right: 20px;text-align: center;">
                  <viewer :images="[`@/static/static/images/imaging_5_2.png`]">
                    <img style="height: 150px;cursor: pointer" src="@/static/images/imaging_5_2.png" alt="">
                    <div>
                      <span class="el-icon-view"></span>
                      <span style="margin-left: 4px">click image</span>
                    </div>
                  </viewer>
                </div>
              </div>

              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div style="width: 750px;">
                  <p style="font-size: 16px;margin-bottom: 20px;">
                    3. An automated treatment response computational tool
                  </p>
                  <ul style="padding-left: 24px;margin: 0 0 5px 0;">
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatically identify minimal, maximal values, and compute sums, change rates etc., based on measurement data.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatically compute treatment responses of target, non-target, & new lesions.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatically compute the overall treatment response.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Reviewers can override automatically generated assessment results.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatic verification of lesion information’s accuracy, and intelligent error alerts.
                    </li>
                    <li>
                      <i class="el-icon-caret-right"></i>
                      Automatically generate electronic imaging case report forms.
                    </li>
                  </ul>
                </div>
                <div style="width: 400px;margin-right: 20px;text-align: center;">
                  <viewer :images="[`@/static/static/images/imaging_5_3.png`]">
                    <img style="height: 150px;cursor: pointer" src="@/static/images/imaging_5_3.png" alt="">
                    <div>
                      <span class="el-icon-view"></span>
                      <span style="margin-left: 4px">click image</span>
                    </div>
                  </viewer>
                </div>
              </div>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('imagingService.tab5')" name="6">
          <div class="item">
            <p style="margin-bottom: 20px;">{{ $t('imagingService.msg13') }}</p>
            <h2>{{ $t('imagingService.title5') }}</h2>
            <div class="flex_row">
              <ul style="width: 700px">
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg14') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg15') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg16') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg17') }}
                </li>
                <!-- <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg18') }}
                </li> -->
              </ul>
              <div style="width:340px;">
                <img
                  v-if="$i18n.locale === 'zh'"
                  src="@/static/images/new_irc07.jpg"
                  alt=""
                  style="width: 340px;position:relative;top:-40px;"
                />
                <!-- <img
                  v-if="$i18n.locale === 'en'"
                  src="@/static/images/image7.png"
                  alt=""
                  style="width: 340px;position:relative;top:-40px;"
                /> -->
              </div>
            </div>

            <h2>{{ $t('imagingService.title6') }}</h2>
            <div class="flex_row">
              <ul style="width: 700px">
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg19') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg20') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg21') }}
                </li>
                <li>
                  <i class="el-icon-caret-right"></i>
                  {{ $t('imagingService.msg22') }}
                </li>
              </ul>
              <div style="width:340px;">
                <img
                  v-if="$i18n.locale === 'zh'"
                  src="@/static/images/new_irc08.jpg"
                  alt=""
                  style="width: 300px;position:relative;top:-60px;"
                />
                <img
                  v-if="$i18n.locale === 'en'"
                  src="@/static/images/image5.png"
                  alt=""
                  style="width: 300px;position:relative;top:-60px;"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '1'
    }
  },

  methods: {

  },
  mounted () {
    this.$nextTick(() => {
      // 获取第一个标签项
      if (this.$refs.custom_tab && this.$refs.custom_tab.$el) {
        const firstTab = this.$refs.custom_tab.$el.querySelector('.el-tabs__item')
        firstTab.style.fontSize = '22px'
      }
    })
  }
}
</script>

<style lang="scss">
.center-imaging-services {
  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;
          text-align: justify;
        }
        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;
            text-align: justify;
          }
        }
        .flex_row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }

    }
  }
}
</style>
