<template>
  <div style="background:#F8F8F8;height:100%">
    <div class="swiper-container" ref="swiperContainer">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in imgList" :key="index">
                <img :src="item" alt="" style="width:100%;height:180px">
            </div>
        </div>
        <div class="swiper-pagination" ref="swiperPagination"></div>
    </div>
    <div class="describesBox">
        <div class="companyName">{{name}}</div>
        <div class="address">地址：{{address}}</div>
        <div class="describes" v-html="describes"></div>
    </div>
    <div class="contentBox">
        <div class="title">
            <div class="yuan" style="margin-right:5px"></div>
            <div>公司特色</div>
            <div class="yuan" style="margin-left:5px"></div>
        </div>
        <div v-html="content"></div>
    </div>
    <div style="height:40px;background:#fff" v-if="showFixedBox"></div>
    <div class="fixedBox" v-if="showFixedBox" @click="apply">申请入股</div>
  </div>
</template>

<style scoped>
 .swiper-container {width: 100%;height: 180px;}
 .describesBox{width: 100%;border-radius: 5px 5px 0 0;margin-top: -5px;background: #fff;padding: 20px 15px;position: relative;top: -10px;z-index: 2;}
 .companyName{font-size:17px;color: #171413;font-weight:500;line-height:32px;}
 .address{font-size:11px;color: #999;margin-bottom: 20px}
 .describes{font-size: 12px;color: #666}
 .contentBox{width: 100%;background: #fff;padding: 20px 15px;}
 .contentBox .title{font-size: 17px;color: #171413;display: flex;justify-content: center;align-items: center;margin-bottom: 20px}
 .yuan{width: 6px;height: 6px;border-radius: 50%;border: 1px solid #DCBE8F}
 .fixedBox{width: 100%;height: 40px;line-height: 40px;font-size: 14px;color: #fff;position: fixed;bottom: 0;background: #C1A170;text-align: center}
</style>

<script>
  import Swiper from 'swiper';
  import {getDetail} from 'api/base_info/branch_company';

  import {mapGetters} from 'vuex';

  export default {
      components:[Swiper],
    name: 'companyDetail',
    data() {
      return {
          showFixedBox:1,
          id:'',
          imgList:[],
          name:'',
          address:'',
          describes:'',
          content:'',
      }
    },
    created() {
        let id = this.$route.query.id;
        this.id = this.$route.query.id;
        this.detail();
        if(this.$route.query.showFixedBox==1){
            this.showFixedBox = true
        }else{
            this.showFixedBox = false
        }
        
    },
    methods: {
        apply(){
            this.$router.push({path: '/stockCrowdDetail?id=' + this.id})
        },
        detail(){
          getDetail(this.id).then(res=>{
              console.log(res)
              if(res.status == 200){
                  if(res.data.images!=''){
                      var arr = res.data.images.split(',')
                      this.imgList = arr
                      this.$nextTick(function () {
                          this.swiperInit()
                      })
                  }else{
                      this.imgList = []
                  }
                  this.name = res.data.name
                  this.address = res.data.address
                  this.describes = res.data.describes
                  this.content = res.data.content
              }
          })
      },
      swiperInit(){
          new Swiper(this.$refs.swiperContainer, {
            pagination: {
                el: this.$refs.swiperPagination,
                clickable: true
            },
            spaceBetween: 0,
            centeredSlides: true,
            autoplay:{
                delay:2000
            },
            autoplayDisableOnInteraction:true,
            observer:true
　　　　}); 
      }
    },
    mounted() {
        
    },
  }
</script>
