<template>
  <div class="plan-container">
    <card
      :title="item.title"
      :content="item.desc"
      v-for="(item, index) in planInfo"
      :key="index"
      footer="1"
      :class="{
        'has-table': item.desc.indexOf('table') > -1,
        'no-url': !item.options,
        'no-desc': !item.desc
      }"
    >
      <div slot="footer">
        <a
          href="javascript:;"
          @click="openIframePupop(it)"
          v-for="(it, idx) in item.options"
          :key="idx"
        >
          {{ it.title }}
        </a>
      </div>
    </card>
    <popup-with-iframe
      v-model="popupShow"
      :title="pupopData.title"
      :content="pupopData.content"
      :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,
      pupopData: {},
      currentPupopIndex: null
    };
  },
  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 "mi-more":
        this.planInfo = mi.greenInfo;
        break;
      case "ai":
        this.planInfo = ai.planInfo;
        break;
      default:
        break;
    }
  },
  methods: {
    openIframePupop(pupopData) {
      if (pupopData.type === "page") {
        window.location.href = pupopData.path;
        return;
      }
      this.pupopData = pupopData;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
