<template>
  <div class="plan-container">
    <card
      :title="item.title"
      :content="item.desc"
      v-for="(item, index) in planInfo"
      :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 cii from "@/api/detail.huatai.zhongjixian";
import li from "@/api/detail.huagui.shouxian";
import mi from "@/api/detail.taikang.yiliaobaozhang";
import ai from "@/api/detail.zhongan.yiwai";
export default {
  name: "GoodsPlan",
  components: {
    card,
    PopupWithIframe
  },
  data() {
    return {
      planInfo: [],
      popupShow: false,
      currentPupopIndex: null
    };
  },
  computed: {
    pupopData() {
      const { planInfo, currentPupopIndex } = this;
      const { title, path } = planInfo[currentPupopIndex] || { title: "", path: "" };
      return {
        title: title.substring(0, title.length - 3),
        path
      };
    }
  },
  mounted() {
    const detailType = this.$route.query.type;
    switch (detailType) {
      case "cii":
        this.planInfo = cii.planInfo;
        break;
      case "li":
        this.planInfo = li.planInfo;
        break;
      case "mi":
        this.planInfo = mi.planInfo;
        break;
      case "ai":
        this.planInfo = ai.planInfo;
        break;
      default:
        break;
    }
  },
  methods: {
    openIframePupop(index) {
      this.currentPupopIndex = index;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
