<template>
  <div class="ShopToOrder">
    <!-- 店铺授权 -->
    <foldPanel
      v-model="listShow"
      title="订购平台"
    >
      <div
        slot="content"
        class="block"
      >
        <div class="platList">
          <div
            v-for="(plat,index) in platList"
            :key="index"
            class="platItem"
            @click="linkToPlat(plat.purchaseAddress)"
          >
            <div class="platTop">
              <div v-if="plat.plantLogo !== null">
                <img
                  :src="plat.plantLogo[0].URL"
                  alt=""
                >
              </div>
              <div
                v-else
                class="noLOGOUrl"
              />
              <div class="platName">
                {{ plat.name }}
              </div>
            </div>
            <div class="platLink">
              立即订购
            </div>
          </div>
        </div>
      </div>
    </foldPanel>
    <Spin
      v-if="spinShow"
      fix
    >
      <Icon
        type="ios-loading"
        size="18"
        style="animation: ani-demo-spin 1s linear infinite"
      />
      <div>加载中...</div>
    </Spin>
  </div>
</template>

<script>
  // import R3 from '@syman/burgeon-r3';
  import foldPanel from '../customizedContent/FoldPanel.vue';

  const R3 = window.R3;

  const { network } = R3;
  export default {
    components: { foldPanel },
    data() {
      return {
        platList: [],
        listShow: true,
        spinShow: true,
      };
    },
    created() {
      this.getPlatList();
    },
    methods: {
      getPlatList() {
        network.get('/p/cs/getPurchaseAddress').then(res => {
          if (res.data.code == 0) {
            this.platList = res.data.data;
            this.platList.forEach(item => {
              item.plantLogo = JSON.parse(item.plantLogo);
            });
          }
          this.spinShow = false;
        });
      },
      linkToPlat(url) {
        window.open(url);
      }
    },
  };
</script>
<style lang='less' scoped>
  .ShopToOrder {
    padding-top: 24px;
  }
  .platList {
    display: flex;
    display: -webkit-flex;
    /* justify-content: space-between; */
    flex-direction: row;
    flex-wrap: wrap;
  }
  .platItem {
    position: relative;
    width: 160px;
    height: 162px;
    margin-right: 30px;
    border: 1px solid #D8D8D8;
    cursor: pointer;
    margin-bottom: 20px;
    .platTop {
      height: calc(100% - 40px);
      padding: 25px 0px;
      text-align: center;
      img {
        max-width: 110px;
        height: 40px;
      }
      .noLOGOUrl {
        width: 110px;
        height: 40px;
      }
      .platName {
        margin-top: 4px;
        font-size: 14px;
        color: #888888;
      }
    }
    .platLink {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 38px;
      line-height: 38px;
      font-size: 12px;
      color: var(--primary-color);
      text-align: center;
      border-top: 1px dashed #D7D7D7;
    }
  }
  .platItem:hover {
    box-shadow: 0 0  10px #ccc;
  }
</style>
