<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div style="margin: auto 100px" v-if="partners && partners.length > 0">
    <div :key="index" v-for="(item,index) in partners">
      <p class="d-flex flex-row justify-center mb-5">
        <img src="~assets/hzhb02.png" v-if="item.typeOfTech===0" />
        <img src="~assets/hzhb03.png" v-if="item.typeOfTech===1" />
        <img src="~assets/hzhb04.png" v-if="item.typeOfTech===2" />
      </p>
      <div
        class="d-flex flex-wrap pointer"
        v-if="item.backendSearchList && item.backendSearchList.length > 0"
      >
        <div
          :class="(i+1)%4===0? 'logo-box1' : ''"
          :key="i"
          @click="openProfile(list.name,list.description)"
          class="logo-box d-flex flex-column align-center white"
          v-for="(list,i) in item.backendSearchList"
        >
          <div class="logo-pic-box">
            <img :src="list.logoUrl" class="logo-pic pa-2" v-if="list.logoUrl" />
            <div class="d-flex flex-column justify-center logo-text" v-else>{{ list.name }}</div>
          </div>
          <div class="font-16 title-color mx-2">{{ list.name }}</div>
        </div>
      </div>
    </div>
    <company-profile :show-profile="showProfile" @closeProfile="closeProfile" v-if="showProfile" />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import CompanyProfile from './CompanyProfile.vue';
export default {
  name: 'PartnerShip',
  components: { CompanyProfile },
  props: {
    title: {
      type: String,
      default: '',
    },
    typeOfPlatform: {
      type: String,
      default: '',
    },
  },

  data() {
    return { showProfile: false };
  },

  computed: mapState('home', ['partners', 'profile']),

  async created() {
    this.setPartners([]);
    const { title, typeOfPlatform } = this;
    const params = {
      param: {
        pageNum: 1,
        // pageSize: -1,
        type: title === '合作伙伴' ? 1 : 2,
        typeOfPlatform: typeOfPlatform === '关于我们' ? 2 : 1,
      },
    };
    await this.getFrontSearchCompany(params);
  },

  methods: {
    ...mapMutations('home', ['setPartners', 'setProfile']),
    ...mapActions('home', ['getFrontSearchCompany']),

    // 介绍
    openProfile(title, description) {
      this.setProfile(null);
      const profile = {
        title,
        description,
      };
      this.setProfile(profile);
      this.showProfile = true;
    },

    closeProfile() {
      this.showProfile = false;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import './PartnerShip.styl';
</style>
