<template>
  <div>
    <rotation />
    <div class="inner content-box" style="margin-top: 50px; margin-bottom: 50px">
      <div :key="index" v-for="(item, index) in list">
        <div class="d-flex justify-space-between" v-if="index % 2 === 0">
          <div class="introduce-box" style="width: 50% !important">
            <p class="introduce-title">{{ item.title }}</p>
            <p class="introduce-content">{{ item.content }}</p>
          </div>
          <img />
          <video width="50%" :poster="item.imgUrl" controls>
            <source src="https://www.sxwikionline.com/greenvalley/01.mp4" type="video/mp4" />
            <source src="https://www.sxwikionline.com/greenvalley/01.mp4" type="video/ogg" />
          </video>
        </div>
        <div class="d-flex justify-space-between" v-else>
          <video width="50%" :poster="item.imgUrl" controls>
            <source src="https://www.sxwikionline.com/greenvalley/02.mp4" type="video/mp4" />
            <source src="https://www.sxwikionline.com/greenvalley/02.mp4" type="video/ogg" />
          </video>
          <div class="introduce-box" style="width: 50% !important">
            <p class="introduce-title">{{ item.title }}</p>
            <p class="introduce-content">{{ item.content }}</p>
          </div>
        </div>
      </div>
      <a-pagination
        :current="current"
        :page-size="pageSize"
        :total="total"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
        v-show="total > 2"
      />
    </div>
  </div>
</template>

<script>
import Rotation from 'components/Rotation/Rotation.vue';
export default {
  name: 'Introduce',
  components: { Rotation },
  data() {
    return {
      title: '关于我们-公司介绍',
      arr: [
        { name: '关于我们', url: '/About/Introduce' },
        { name: '公司介绍', url: '' },
      ],
      list: [
        {
          title: '山西维基智汇科技有限公司',
          content:
            '研究院的介绍包含研究院，公司架构，和各中心的介绍。' +
            '各中心介绍包含科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、' +
            '数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、' +
            '山西奥依工业设计咨询服务中心；研究院的介绍包含研究院，公司架构，和各中心的介绍。',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
          videoUr: 'https://www.sxwikionline.com/greenvalley/01.mp4',
        },
        {
          title: '山西维基智汇科技有限公司',
          content:
            '各中心介绍包含科创体系与科创能力咨询服务中心、' +
            '知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、' +
            '科创战略协同研究中心、山西奥依工业设计咨询服务中心',
          imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
          videoUr: 'https://www.sxwikionline.com/greenvalley/02.mp4',
        },
      ],
      current: 1,
      pageSize: 2,
      total: 10,
    };
  },

  methods: {
    onShowSizeChange(current, size) {
      console.log(current, size);
      this.current = current;
    },
  },
};
</script>

<style lang="stylus" scoped>
.pagination {
  margin-top: 48px;
  text-align: right;
}
</style>
