<template>
  <div class="demo-page includes-toc">
    <toc :sections="sections" />
    <section
      v-for="({
        description,
        id,
        props: sectionProps,
        text,
      }) in sections"
      :id="id"
      :key="id"
    >
      <h2>{{ text }}</h2>
      <p>{{ description }}</p>
      <RfpTable v-bind="{ ...sectionProps }" />
    </section>
  </div>
</template>

<script>
  const info = {
    employer_name: 'Stop Loss Staging (Spec Alts Only)',
    employer_website: 'https://www.watchtowerbenefits.com',
    employer_sic: '60606',
    benefit_administrator: 'bSwift',
    employer_location: 'Chicago, IL 60606',
    employer_total_lives: 'Not provided',
    effective_date: '2021-01-01',
    project_due_date: '2020-03-10',
    reason_for_rfp: 'Seeking improved claim paying capabilities, Seeking improved billing capabilities',
    rfp_cover_memo: 'Sample Cover',
    broker_name: 'Threeflow',
    broker_of_record_label: 'Threeflow, 3-4 yrs',
    open_enrollment_this_year: 'Yes',
    open_enrollment_strategy: 'Enrollment firm',
    hdhp: 'No',
    market_activity: '5 Quoted, 0 Declined, 1 Pending',
    products: 'Stop Loss - Net',
    incumbent_carriers: 'Sun Life',
    broker_contacts: 'Shaheeb Roshan',
    event_contacts: 'Shaheeb Roshan\'s Evil Twin', // this property will exist after broker team feature is merged into staging
    inforce_sources_message: 'Census, StopLoss::ExperienceSource, and StopLoss::RateSource files are staged and uploaded to the Carrier Site',
  };
  export default {
    name: 'RFPTable',
    components: {
      toc: () => import('@/views/examples/Toc'),
    },
    computed: {
      /**
       * Return an array of objects with a variety of props to test.
       *
       * @returns {Array}
       */
      sections() {
        return [
          {
            id: 'section-all-values',
            text: 'With all values',
            description: 'Includes Cover Memo, edit Due date button, and documents',
            props: {
              editLink: { name: 'ExamplesIndex' },
              info,
              showCoverMemo: true,
              showDocuments: true,
              documentManagerLink: { name: 'ExamplesIndex' },
              projectType: this.$TF.ReusableData.projectTypes.goToMarket,
            },
          },
          {
            id: 'section-all-values-with-stop-loss',
            text: 'With all values + Stop Loss',
            description: 'Test to remove "Fully Insured Transplant Carrier" row',
            props: {
              editLink: { name: 'ExamplesIndex' },
              info: {
                ...info,
                stop_loss_tpa_company: 'test Medical Claim Administrator',
                stop_loss_rx_vendor: 'test Prescription Drug Administrator',
                stop_loss_transplant_carrier: 'Not provided',
              },
              hasStopLoss: true,
              showCoverMemo: true,
              showDocuments: true,
              documentManagerLink: { name: 'ExamplesIndex' },
              projectType: this.$TF.ReusableData.projectTypes.goToMarket,
            },
          },
          {
            id: 'section-all-values-without-router',
            text: 'With all values w/o router',
            description: 'Includes "showDocuments" info but not the router button',
            props: {
              info,
              showDocuments: true,
              projectType: this.$TF.ReusableData.projectTypes.goToMarket,
            },
          },
          {
            id: 'section-buid-type',
            text: 'Build Type Project',
            description: 'Hide Placement event contacts row if project is a build-type project.',
            props: {
              info,
              showDocuments: true,
              projectType: this.$TF.ReusableData.projectTypes.initialBuild,
            },
          },
          {
            id: 'section-without-values',
            text: 'Without any value',
            description: 'Does not show "Edit" Due date button or "Documents" row',
            props: {
              info: {
                project_due_date: 'Due Date Not Specified',
                rfp_cover_memo: 'Not Provided',
              },
              projectType: this.$TF.ReusableData.projectTypes.goToMarket,
            },
          },
          {
            id: 'section-hide-params',
            text: 'Using the "hideParams" prop',
            description: 'Does not show "market_activity" when passing "[market_activity]"',
            props: {
              info,
              hideParams: ['market_activity'],
              projectType: this.$TF.ReusableData.projectTypes.goToMarket,
            },
          },
        ];
      },
    },
  };
</script>

<style>
  section {
    padding: 70px 20px 0;
  }
</style>
