<template>
  <div class="plan-container">
    <card
      :title="item.title"
      :content="item.desc"
      v-for="(item, index) in detail"
      :key="index"
      :footer="item.url"
      :class="{ 'no-url': !item.url }"
    >
      <a href="javascript:;" @click="openIframePupop(index)" v-if="item.url" slot="footer">
        {{ item.url }}
      </a>
    </card>
    <popup-with-iframe v-model="popupShow" :title="pupopData.title" :url="pupopData.path" />
  </div>
</template>
<script>
import PopupWithIframe from "@/components/PopupWithIframe";
import card from "@/components/Card";

import detail from "@/api/detail.plan.mock";
export default {
  name: "GoodsDetail",
  components: {
    card,
    PopupWithIframe
  },
  data() {
    return {
      detail,
      popupShow: false,
      currentPupopIndex: null
    };
  },
  computed: {
    pupopData() {
      const { detail, currentPupopIndex } = this;
      const { title, path } = detail[currentPupopIndex] || { title: "", path: "" };
      return {
        title: title.substring(0, title.length - 3),
        path
      };
    }
  },
  methods: {
    openIframePupop(index) {
      this.currentPupopIndex = index;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
