<template>
  <div class="page about--page">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <div class="parts p1">
            <logo/>
            <span>{{ staticData.s1.t1 }}</span>
            <p>{{ staticData.s1.t2 }}</p>
          </div>
          <div class="parts p2 row">
            <div class="col-12 col-lg-6 order-1 order-lg-0">
              <p>{{ staticData.s1.t3 }}</p>
            </div>
            <div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
              <div class="imgBox anim-fadeIn">
                <div class="img">
                  <div class="shape"></div>
                  <img src="~/assets/img/about/about-s1-i1.jpg" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="parts p3 row">
            <div class="col-12 col-lg-6 mb-5 mb-lg-0">
              <div class="imgBox imgBox-reverse anim-fadeIn">
                <div class="img">
                  <div class="shape reverse"></div>
                  <img src="~/assets/img/about/about-s1-i2.jpg" alt="">
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <p>{{ staticData.s1.t4 }}</p>
            </div>
          </div>
          <div class="parts p4 row">
            <div class="col-12">
              <p>{{ staticData.s1.t5 }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s2" v-if="history.length" id="history_timeline">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2 class="title title-shape-center">{{ staticData.s2.t1 }}</h2>
          </div>
          <div class="col-12">
            <div class="timeline anim-fadeIn">

              <template v-for="(item,index) in history">
                <div class="circle" :key="item._id" :class="!index ? 'active' : null" :data-c-n="index" @click="activeHistory(item,index)">
                  <span>{{ mDate(item.year) }}</span>
                </div>
                <div class="line" :key="item._id + 1" :data-l-n="index" v-if="index < history.length - 1"></div>
              </template>
            </div>
            <div class="timeline-content anim-fadeIn">
              <div class="row">
                <div class="col-12 col-md-6 order-1 order-md-0">
                  <div class="txtBox">
                    <h5 ref="title">{{ history[0].history_details[$route.params.lang].title }}</h5>
                    <p ref="caption">{{ history[0].history_details[$route.params.lang].caption }}</p>
                  </div>
                </div>
                <div class="col-12 col-md-6 order-0 order-md-1 mb-3 mb-md-0">
                  <div class="imgBox" v-if="history.length">
                    <img ref="image" :src="history[0].image" :alt="history[0].history_details[$route.params.lang].title">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s3">
      <div class="container">
        <h2 class="title title-shape">{{ staticData.s3.t1 }}</h2>
        <p v-html="staticData.s3.t2"></p>
      </div>
    </section>

    <section class="s4">
      <div class="container">
        <div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
          <div class="row">
            <div class="col-12 col-lg-5 img">
              <img :src="require('~/assets/img/about/'+ item.img)" alt="">
            </div>
            <div class="col-12 col-lg-7 txt">
              <p>{{ item.title }}</p>
              <a :href="`/standards_pdf/${item.link.url}`" download class="btn btn-primary" target="_blank">{{ item.link.txt }}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <CustomersCommunication/>
  </div>
</template>


<script>
import moment from 'moment-jalaali'
import {fadeInAnimation} from '~/mixins/animations'

export default {
  data() {
    return {
      history: null
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.about[this.$route.params.lang]
    }
  },
  mixins: [fadeInAnimation],
  methods: {
    activeHistory(item, index) {
      for (let i = 0; i < this.history.length; i++) {
        i > index ? $(`.circle[data-c-n="${i}"]`).removeClass('active') : null
        i > index ? $(`.line[data-l-n="${i - 1}"]`).removeClass('active') : null

        i < index ? $(`.circle[data-c-n="${i + 1}"]`).addClass('active') : null
        i < index ? $(`.line[data-l-n="${i}"]`).addClass('active') : null
      }

      this.$gsap.timeline({
        yoyo: true,
        repeat: 1
      }).to([this.$refs.image, this.$refs.title, this.$refs.caption],
          {
            opacity: 0,
            duration: 0.1,
            onComplete: () => {
              this.$refs.image.src = item.image
              this.$refs.title.textContent = item.history_details[this.$route.params.lang].title
              this.$refs.caption.textContent = item.history_details[this.$route.params.lang].caption
            }
          })
    },
    mDate(date) {
      if (this.$route.params.lang === 'en') return moment().jYear(date).year()
      else return date
    }
  },
  head() {
    return {
      title: this.staticData.hero
    }
  },
  async asyncData({$axios, error}) {
    try {
      const history = await $axios.get(`/api/public/history`)
      return {
        history: history.data
      }
    } catch (e) {
      error({status: 404, message: 'There is problem here'})
    }
  }
}
</script>
