<template>
  <div class="app-container operations-container">
    <div class="common-title">公司经营</div>
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
    <div class="part-swiper" v-if="operList.length>0&&!isSkeleton">
      <div class="swiper-containers swiper-oper" :style="operList.length<=6?'margin-left:0px; width: 100%;':''">
        <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.bratingSubjectLevel}}-<span>{{item.ratingDate}}</span></div>
              <div class="flex-box operations-info">
                <div>{{item.bondType || '--'}}</div>
                <span class="text-cl1" :title="item.creditRatingAgency"><img src="@/assets/images/detail/overview/oper_source.png">{{item.creditRatingAgency || '--'}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="swiper-button-prev swiper-oper-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
      <div class="swiper-button-next swiper-oper-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
    </div>
    <div class="part-swiper" v-if="operList.length==0&&!isSkeleton">
      <no-data />
    </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?item.amount+'亿元':'--'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {bondCreditRating} from '@/api/detail/party-a/overview'
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import skeleton from '@/views/project/projectList/component/skeleton'
import "@/assets/lib/swiper/swiper-bundle.css"
import NoData from '../../component/noData'
export default {
  name: 'Overview',
  props: ['companyId', 'financial'],
  components: {
    NoData,skeleton
  },
  data() {
    return {
      operList: [],
      isSkeleton:true,
      gsjyList: [
        { name: '总资产', ico: require('@/assets/images/detail/overview/gsjy_ico1.png'), amount: ''},
        { name: '净资产', ico: require('@/assets/images/detail/overview/gsjy_ico2.png'), amount: ''},
        { name: '授信余额', ico: require('@/assets/images/detail/overview/gsjy_ico3.png'), amount: ''},
        { name: '营业收入', ico: require('@/assets/images/detail/overview/gsjy_ico4.png'), amount: ''},
        { name: '总负债', ico: require('@/assets/images/detail/overview/gsjy_ico5.png'), amount: ''}
      ],
    }
  },
  created() {
    this.handleQuery()
  },
  mounted() {
    this.companySwiper()
  },
  methods: {
    companySwiper(){
      new Swiper('.swiper-oper', {
        slidesPerView: 6,
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-oper-next',
          prevEl: '.swiper-oper-prev',
        }
      })
    },
    async handleQuery() {
      this.isSkeleton = true;
      let res = await bondCreditRating({cid: this.companyId})
      if(res.code==200){
        this.isSkeleton = false;
        this.operList = res.data || []
        this.$nextTick(() => {
          this.companySwiper()
        })
      }
    },
    handleFinancial(){
      if(this.financial){
        let { totalAssets, belongNetAssets, creditBalance, operatingIncome, totalLiabilities } = this.financial
        let jyqkObj = { totalAssets, belongNetAssets, creditBalance, operatingIncome, totalLiabilities }
        this.gsjyList.forEach((item, index) => {
          item.amount = jyqkObj[Object.keys(jyqkObj)[index]]?parseFloat(jyqkObj[Object.keys(jyqkObj)[index]].toFixed(2)):0
        })
      }
    }
  },
  watch: {
    financial(newVal, oldVal) {
      this.handleFinancial()
    }
  }
}
</script>

<style lang="scss" scoped>
  .operations-container{
    margin: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    border-radius: 4px;
    .part-swiper{
      position: relative;
      margin-top: 16px;
      .swiper-oper{
        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: #232323;
              padding: 24px 16px 0 16px;
              span{
                font-size: 16px;
              }
            }
            .operations-info{
              padding: 14px 16px 10px 16px;
              justify-content: space-between;
              font-size: 14px;
              color: #232323;
              div{
                flex-shrink: 0;
              }
              span{
                font-size: 12px;
                margin-left: 6px;
                img{
                  width: 10px;
                  height: 10px;
                  margin-right: 3px;
                }
              }
            }
          }
        }
      }
      .swiper-oper-prev, .swiper-oper-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>
