<template>
  <div class="Pdb-service">
    <div class="Pdb-service-question" @click="showQa = !showQa">
      <span>常见问题</span>
      <svg-icon icon-class="arrow" :style="{ transform: `rotate(${showQa ? '90deg' : '0deg'})` }" />
    </div>
    <collapse
      :collapse-data="detail.qaInfo"
      :more-btn="false"
      :hide-icon="true"
      :init-length="3"
      v-show="showQa"
    />
    <cr-divider class="Pdb-service-divider" :hairline="false" />
    <div class="Pdb-service-agreement">
      <a
        href="javascript:;"
        @click="openIframePupop(item.id)"
        v-for="(item, index) in detail.protocolData"
        :key="index"
      >
        {{ item.title }}
      </a>
    </div>
    <popup-with-iframe
      v-model="popupShow"
      :title="pupopData.title"
      :content="pupopData.content"
      :url="pupopData.url"
    />
  </div>
</template>
<script>
import Collapse from "@/components/Collapse";
import PopupWithIframe from "@/components/PopupWithIframe";

export default {
  name: "InsuranceService",
  components: {
    PopupWithIframe,
    Collapse
  },
  props: {
    detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    pupopData() {
      const { currentPupopIndex } = this;
      const { popupArray } = this.detail;
      return popupArray[currentPupopIndex] || {};
    }
  },
  data() {
    return {
      showQa: false,
      popupShow: false,
      currentPupopIndex: null
    };
  },
  methods: {
    openIframePupop(index) {
      this.currentPupopIndex = index;
      this.popupShow = true;
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
