<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ThemeTitle class="theme">广东省渔业企业介绍专题</ThemeTitle>
    <template v-if="enterpriseList.length>0">
      <div v-for="(enterprise,i) in enterpriseList" :key="i" :class="index==i?('box'+(i+1)+' cur'):('box'+(i+1))" @mouseenter="showOne(i)" @mouseleave="startTimer">
        <m-card mode="2" :title="enterprise.name">
          <EnterpriseCard :enterprise='enterprise'></EnterpriseCard>
        </m-card>
      </div>
      <div class="box7">
        <m-card mode="2" :title="' '" style="margin-top:3rem">
          <EnterpriseCard :mode="'complete'" :enterprise='firstEnterprise'></EnterpriseCard>
        </m-card>
      </div>
    </template>
  </div>
</template>

<script>
import ThemeTitle from './components/title'
import EnterpriseCard from './components/enterprise-card'
import axios from 'axios'
export default {
  name: 'Enterprise',
  components: {
    ThemeTitle,
    EnterpriseCard
  },
  data() {
    return {
      index: 0,
      enterpriseList: [],
      firstEnterprise: {},
      timerHanlder:null,
      timeInterval:5000
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get(this.$api.FILE_URL + 'gd-enterprise.json').then(res => {
        this.enterpriseList = res.data.enterprise
        this.firstEnterprise = this.enterpriseList[0]

        this.startTimer()
      })
    },
    showOne(index){
      clearInterval(this.timerHanlder)
      this.index = index
      this.firstEnterprise = this.enterpriseList[this.index]
    },
    startTimer(){
      let _vm = this
      this.timerHanlder = setInterval(function() {
        _vm.changeEnterprise()
      }, this.timeInterval)
    },
    changeEnterprise(){
      if(this.index === -1){
        this.index = 0
      }else if(this.index<(this.enterpriseList.length-1)){
        this.index ++
      }else{
        this.index = 0
      }
      this.firstEnterprise = this.enterpriseList[this.index]
    }
  }
}
</script>

<style lang="stylus" scoped>
#container
  $gd-layout()
  grid-gap 1.5rem
  grid-template-areas \
    '. theme .'\
    'box1 box7 box2'\
    'box3 box7 box4'\
    'box5 box7 box6'
  grid-template-rows 4rem 1fr 1fr 1fr
  grid-template-columns 1fr 2fr 1fr
  .theme
    grid-area theme
    width 60%
  .box1
    grid-area box1
    opacity 0.3
  .box2
    grid-area box2
    opacity 0.3
  .box3
    grid-area box3
    opacity 0.3
  .box4
    grid-area box4
    opacity 0.3
  .box5
    grid-area box5
    opacity 0.3
  .box6
    grid-area box6
    opacity 0.3
  .box7
    grid-area box7
  .cur
    opacity 1
  .area
    font-size 1.8rem
    position absolute
    width 60%
    top 10%
    left 30%
    right 30%
    text-align center
    p
      color #fff
      font-family $font-pang
    b
      font-size 3rem
    >span
      font-family $font-pang
</style>
