<template>
  <div>
    <div class="profuile">
      <div class="container">
        <div class="row">
          <h2 class="text-center">
            <router-link to="/profuiles">北斗天云简介</router-link>
          </h2>
          <div class="col-md-4">
            <h3>
              <router-link to="/">广东北斗天云科技有限公司</router-link>
            </h3>
            <!--公司介绍-->
            <h6></h6>
            <p class="le">广东北斗天云科技有限公司是在国家大力推进北斗系统建设和应用，提倡军民融合发展,建设智慧城市的战略背景下在中国卫星导航应用管理中心和总参导航测绘局等国家多部门的支持下，
              于2015年在广东省佛山市成立，是广东省重点北斗民用服务企业。
            </p>
            <p class="le">
              自成立以来，公司在中国卫星导航定位应用管理中心的指导和支持下，与中科院、国家北斗产业重点企业北斗天汇科技有限公司等紧密合作，在高起点上快速发展。以“报国为民，造福社会”为已任，树立“壮志凌云，大爱无疆”的核心价值观，致力于打造集研发生产、数据集成、运营服务为一体的高端北斗企业，
              始终把服务于社会、国家、民族和人民作为自己的理想追求，通过北斗产品的研发、推广、应用，弘扬爱国情怀，砥砺强国之志、实践报国之行，让北斗真正深入扎根于国计民生之中，使“社会更和谐、生活更美好”。
            </p>

            <p class="cen">
              <router-link to="/profuiles">更多</router-link>
            </p>
          </div>
          <div class="col-md-8">
            <!-- <img src="@/assets/images/bg1.png" alt=""> -->
            <video class="video-top" controls poster="@/assets/images/bg1.png">
              <source src="http://www.cnbdty.com/bdty-admin/bdty_file/1711425648908.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
    </div>
    <!--公司产品分类介绍 clo-md-3 .products w100% bg#2c2f34-->
    <div class="products">
      <h2 class="text-center">
        <router-link to="/products">产品中心</router-link>
      </h2>
      <div class="container">
        <el-tabs type="border-card" id="productsTab">
          <el-tab-pane class="fade in" v-for="item in homeTypeList" :key="item.ptsid" :label="item.name" >
            <div class="row" @click.capture="handleToProducts">
              <div class="col-md-3 col-sm-6" v-for="product in item.productList">
                <router-link :to="`/products/detail/${product.ptsid}`" :data-type="product.type" :data-id="item.ptsid">
                  <img :src="product.thumbnail" :data-src="product.thumbnail" alt="" :data-type="product.type" :data-id="item.ptsid" />
                </router-link>
                <router-link :to="`/products/detail/${product.ptsid}`">
                  <p :data-type="product.type" :data-id="item.ptsid">{{product.title}}</p>
                </router-link>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!--企业宣传片展示 左图右文-->
    <div class="about">
      <h2 class="text-center">
        <router-link to="/profuiles" class="tips-p">走进天云</router-link>
      </h2>
      <div class="container">
        <div class="row">
          <div class="col-md-6 aboutwh">
            <h3>天云文化</h3>
            <a class="btn-block" style="margin-bottom:10px;">
              <img src="@/assets/images/top2.png" alt="" />
            </a>
            <!-- <p class="tips-p">北斗巡天，云福中华</p> -->
            <p>企业使命：报国为民 · 造福社会</p>
            <p>企业精神：仰望星空 · 脚踏实地</p>
            <p>企业理念：
              <div style="margin-left: 15px;">
                <p>经营理念：品牌引领 · 以义致远</p>
                <p>管理理念：以人为本 · 润物无声</p>
                <p>质量理念：求精求新 · 创无止境</p>
                <p>客户理念：心心相应 · 善做善成</p>
                <p>合作理念：竭诚厚信 · 互利共赢</p>
                <p>团队理念：凝气聚力 · 合舟共济</p>
                <p>人才理念：德才兼备 · 不拘一格</p>
              </div>
            </p>
            <p>企业愿景：打造研发生产、数据集成、运营服务一体化的高端北斗企业</p>
            <p>...</p>
          </div>
          <div class="col-md-6">
            <h3>天云历程</h3>
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in activities"
                  :key="index"
                  :timestamp="item.timestamp">
                  {{item.content}}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--核心业务-->
    <!--核心业务，合作伙伴，招商加盟-->
    <div class="join">
      <div class="container">
        <h2 class="text-center centera">
          <router-link to="/business">核心业务</router-link>
        </h2>
        <div class="row" @click.capture="handleSetBusinessTitle">
          <div class="col-md-3" v-for="item in caseList.list" :key="item.ptsid">
            <router-link :to="{name: 'business-detail', params: {id: item.ptsid}}">
              <img class="img-xz" :src="item.thumbnail" :data-src="item.thumbnail" alt="" :data-title="item.title" />
            </router-link>
            <h4 class="text-left">
              <router-link :to="{name: 'business-detail', params: {id: item.ptsid}}">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top" :open-delay="500" :enterable="false">
                  <p class="title-ell biza" :data-title="item.title">{{item.title}}</p>
                </el-tooltip>
              </router-link>
            </h4>
            <p class="cen">
              <router-link class="joina" :to="{name: 'business-detail', params: {id: item.ptsid}}" :data-title="item.title">
                了解详情
              </router-link>
            </p>
          </div>
        </div>
        <!-- <div class="row">
          </div>
          <div class="col-md-6 col-xs-12">
            <div class="row">
              <h5>
                <a>核心业务</a>
              </h5>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <span>
                  <a>品牌招商</a>
                </span>
                <img src="@/assets/img/home/join-1-(1).jpg" alt="" />
                <time>
                  100%完美的服务体系，祝您成就事业的辉煌。
                  专业团队，为您服务。优质专业实力。
                  完善的产品价格体系，确保全国统一进货价.
                </time>
                <p>
                  <router-link class="joina" to="">了解我们</router-link>
                </p>
              </div>
              <div class="col-md-6  col-sm-6 col-xs-12">
                <span>
                  <a>加盟流程</a>
                </span>
                <img src="@/assets/img/home/join-1-(2)_02.gif" alt="" />
                <time>请您详细阅读公司的招商资料或拨打热线
                  与我司招商经理实地考察调研
                  详细进行综合评估后即可确定实施方案</time>
                <p>
                  <router-link class="joina" to="/about">加入我们</router-link>
                </p>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="news"><!--公司新闻动态介绍-->
      <div class="container">
        <h2 class="text-center">
          <router-link to="/news">新闻动态</router-link>
        </h2>
        <div class="row" @click.capture="handleSetTitle">
          <div class="col-md-3" v-for="item in newsList.list" :key="item.ptsid">
            <router-link :to="{name: 'news-detail', params: {id: item.ptsid}}">
              <img class="img-xz" :src="item.thumbnail" :data-src="item.thumbnail" alt="" :data-title="item.title" />
            </router-link>
            <h4 class="text-left">
              <router-link :to="{name: 'news-detail', params: {id: item.ptsid}}">
                <el-tooltip class="item" effect="dark" :content="item.title" placement="top" :open-delay="500" :enterable="false">
                  <p class="title-ell" :data-title="item.title">{{item.title}}</p>
                </el-tooltip>
              </router-link>
            </h4>
            <p class="cen">
              <router-link class="tanniu newsa" :to="{name: 'news-detail', params: {id: item.ptsid}}" :data-title="item.title">
                了解详情
              </router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {
      activeId: '',
      activities: [
        {
          content: '广东北斗天云科技有限公司在佛山成立，并与北斗天汇结成战略合作伙伴',
          timestamp: '2015年'
        },
        {
          content: '北斗天云研发的北斗卫星应用运营平台通过国家通信导航与北斗卫星应用产品质量监督检验中心检测，正式上线运行',
          timestamp: '2015年'
        },
        {
          content: '广东北斗天云科技文化（北京）有限公司在北京成立',
          timestamp: '2016年'
        },
        {
          content: '完成北斗车辆位置管理平台、北斗个人位置管理平台、北斗海洋应急指挥平台建设，助力海洋渔业、智慧城市、平安校园、应急救援等领域业务高效开展',
          timestamp: '2016年'
        },
        {
          content: '北斗天云承办首届“弘扬北斗文化，推动北斗应用”论坛在珠海成功举办，孙家栋等北斗专家、院士出席',
          timestamp: '2017年'
        },
        {
          content: '北斗天云通过国家高新技术企业认定，成功入列国家高新技术企业',
          timestamp: '2017年'
        },
        {
          content: '北斗天云加入中国卫星导航定位协会，成为理事单位',
          timestamp: '2018年'
        },
        {
          content: '北斗天云在广东省内先后设立17家分（子）公司，全方位支持公司业务开展',
          timestamp: '2018年'
        },
      ]
    }
  },

  computed: {
    ...mapGetters([
      'homeTypeList',
      'newsList',
      'caseList'
    ])
  },

  mounted() {
    this.getHomeCniyvTypeList({
      limit: 7,
      orderField: 'sort'
    })

    this.getCaseList({
      limit: 4,
      type: 'biz'
    })

    this.getNewsList({
      limit: 4
    })

    $(".products #productsTab div a").hover(
      function () {
        $(this).find("img").stop().animate({ "opacity": "1" }, 700)
      }, function () {
        $(this).find("img").stop().animate({ "opacity": "0.5" }, 700)
      }
    )
    $(".join img").hover(
      function () {
        $(this).stop().animate({ "opacity": "1" }, 700)
      }, function () {
        $(this).stop().animate({ "opacity": "0.5" }, 700)
      }
    )
  },

  methods: {
    ...mapActions({
      setNavPath: 'app/setNavPath',
      getHomeCniyvTypeList: 'cniyv/getHomeCniyvTypeList',
      getNewsList: 'news/getNewsLists',
      getCaseList: 'cases/getCaseLists'
    }),

    handleToProducts(e) {
      const activeType = e.target.dataset.type
      const activeId = e.target.dataset.id
      localStorage.setItem('menuPath', '/products')
      localStorage.setItem('lastChecked', activeType)
      localStorage.setItem('activeId', activeId)
      this.setNavPath('/products')
    },

    handleSetTitle(e) {
      const activeTitle = e.target.dataset.title
      localStorage.setItem('menuPath', '/news')
      localStorage.setItem('newsTitle', activeTitle)
      this.setNavPath('/news')
    },

    handleSetBusinessTitle(e) {
      const activeTitle = e.target.dataset.title
      localStorage.setItem('menuPath', '/business')
      localStorage.setItem('bizTitle', activeTitle)
      this.setNavPath('/business')
    },
  }
}
</script>
<style scoped>
:deep(.el-tabs__nav) {
  float: none;
  background-color: #2c2f34;
  border-bottom: solid 2px #26292e;
}
:deep(.el-tabs__item) {
  line-height: inherit;
  padding: 11px 31px;
  height: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
:deep(.el-tabs__header .el-tabs__item) {
  color: #c5d0df;
  margin-right: 3px;
}

:deep(.el-tabs--border-card) {
  box-shadow: none;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover) {
  color: #333;
  background-color: #eee;
  
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  color: #555;
  /* margin: 0 3px; */
}

:deep(.el-tabs--border-card) {
  background-color: #2c2f34;
  border: none;
}

#productsTab div a img {
  max-width: 100%;
  height: 235px;
  border-radius: 3px;
  opacity: 0.5;
  /* object-fit: contain; */
}

#productsTab div a {
  color: #e2e2e2;
  display: block;
  margin-bottom: 20px;
}

#productsTab div a:hover {
  color: #fff;
}

h2 {
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
}

.centera a {
  color: #e6e6e6;
}

.joina {
  margin: 0;
}

.text-left a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  padding-left: 5px !important;
  font-size: 14px;
}

.video-top {
  width: 100%;
  height: 500px;
  object-fit: fill;
  margin-top: 25px;
}

.tips-p {
  animation: blink 2s linear infinite;
  /* text-align: center; */
  /* font-size: 30px; */
  /* font-weight: bold; */
  background: #333 linear-gradient(
    135deg,
    transparent 25%,
    transparent 40%,
    #4585fccc 40%,
    #4786fc80 60%,
    transparent 60%,
    transparent
  );
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes blink {
  0% {
    background-position: -100% 0;
  }

  /* 50% {
    opacity: 0;
  } */

  100% {
    background-position: 130% 0;
  }
}

.biza {
  color: #e6e6e6;
}

.title-ell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  /* padding-left: 5px !important; */
}
</style>
