<template>
  <div>
    <div class="Pdb-service" v-if="detail.qaInfo">
      <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>
    <div class="Pdb-service">
      <div class="Pdb-service-agreement">
        <p class="Pdbc-agreement-title">查看</p>
        <div>
          <a
            href="javascript:;"
            @click="openIframePupop(item.id)"
            v-for="(item, index) in detail.protocolData"
            :key="index"
          >
            {{ item.title }}
          </a>
        </div>
      </div>
    </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>
