<template>
  <div class="app-container operations-container">
    <div class="common-title">公司经营</div>
    <div class="part-swiper">
      <div class="swiper-containers">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="(item, index) in operList" :key="index">
            <div class="swiper-div">
              <div class="operations-title">{{item.range}}-<span>{{item.year}}</span></div>
              <div class="flex-box text-cl1 operations-info">
                {{item.name}}
                <span><img src="@/assets/images/detail/overview/oper_source.png">{{item.name}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="swiper-button-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
      <div class="swiper-button-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
    </div>
    <div class="flex-box operations-list">
      <div class="list-item" v-for="(item, index) in gsjyList" :key="index">
        <div class="flex-box list-item-all"><img :src="item.ico">{{item.name}}</div>
        <div class="list-item-amount">{{item.amount}}</div>
      </div>
    </div>
  </div>
</template>

<script>
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css"
export default {
  name: 'Overview',
  data() {
    return {
      operList: [
        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'},
        {name:'债务信用评级', rate:'中国标普信用', range:'AA', year:'2021'}
      ],
      gsjyList: [
        { name: '总资产', ico: require('@/assets/images/detail/overview/gsjy_ico1.png'), amount: '1699.7'},
        { name: '净资产', ico: require('@/assets/images/detail/overview/gsjy_ico2.png'), amount: '1699.7'},
        { name: '授信余额', ico: require('@/assets/images/detail/overview/gsjy_ico3.png'), amount: '1699.7'},
        { name: '营业收入', ico: require('@/assets/images/detail/overview/gsjy_ico4.png'), amount: '1699.7'},
        { name: '总负债', ico: require('@/assets/images/detail/overview/gsjy_ico5.png'), amount: '1699.7'}
      ],
    }
  },
  created() {
  },
  mounted() {
    this.companySwiper()
  },
  methods: {
    companySwiper(){
      new Swiper('.swiper-containers', {
        slidesPerView: 4,
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .operations-container{
    margin: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    .part-swiper{
      position: relative;
      margin-top: 16px;
      .swiper-containers{
        width: calc(100% - 38px);
        height: 96px;
        margin-top: 8px;
        margin-left: 25px;
        overflow: hidden;
        .swiper-slide{
          .swiper-div{
            width: calc(100% - 12px);
            height: 96px;
            background: url("~@/assets/images/detail/overview/swiper_bg.png") no-repeat;
            background-size: 100% 100%;
            .operations-title{
              margin-right: 22px;
              font-weight: bold;
              font-size: 20px;
              color: #0081FF;
              padding: 24px 16px 0 16px;
              span{
                font-size: 16px;
              }
            }
            .operations-info{
              padding: 14px 16px 10px 16px;
              justify-content: space-between;
              font-size: 14px;
              color: #416587;
              span{
                font-size: 12px;
                img{
                  width: 10px;
                  height: 10px;
                  margin-right: 3px;
                }
              }
            }
          }
        }
      }
      .swiper-button-prev, .swiper-button-next{
        width: 16px;
        height: 96px;
        background: #F0F5FC;
        top: 0;
        margin-top: 0;
        &.swiper-button-disabled{
          opacity: 1;
          color:#AAAAAA;
          background: #F5F5F5;
        }
        i{
          color: #AAAAAA;
        }
        &:hover i{
          color:#667199;
        }
        &:after{
          content: "";
        }
      }
    }
    .operations-list{
      flex-wrap: wrap;
      justify-content: space-between;
      .list-item{
        width: calc(20% - 12px);
        height: 88px;
        padding: 18px;
        margin-top: 14px;
        font-size: 14px;
        color: #232323;
        border: 1px solid #E2E7EE;
        text-align: center;
        .list-item-all{
          justify-content: center;
          img{
            width: 24px;
            height: 24px;
            margin-right: 4px;
          }
        }
        .list-item-amount{
          padding-top: 6px;
          font-weight: bold;
        }
      }
    }
  }
</style>
