Vue.component('med-sync-completeness-overview', {
	template:
		'<div>' +
			'<el-row>' +
				'<h1 style="text-align: center">Medication Synchronization: Completeness</h1>' +
			'</el-row>' +
			'<el-row id="med-sync-completeness-description" class="scrollspy">' +
				'<h2>Description</h2>' +
			'</el-row>' +
			'<el-row>' +
				"<p>The percentage of patients in the medication synchronization program who have all of their chronic medications included in the synchronization.</p>" +
				'<p>A higher rate indicates better performance.</p>' +
			'</el-row>' +
			'<el-row id="med-sync-completeness-add-info" class="scrollspy">' +
				'<h2>Additional Information</h2>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Intended Use</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Quality improvement indicator for health plans.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Data Sources</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Multiple sources that will be different for each pharmacy, such as:</p>' +
					'<ul>' +
						"<li>Pharmacy's internal transaction data, whether automated by pharmacy software, accessed via Excel spreadsheet, or maintained otherwise in pharmacy files.</li>" +
						"<li>Claims data from the plan or switch.</li>" +
						"<li>Hospital discharge data.</li>" +
						'<li>First fill when the patient presents multiple meds that fit the "eligible patient" criteria.</li>' +
					'</ul>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Denominator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					"<p>Individuals who are enrolled in the medication synchronization program.</p>" +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Exclusions</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Long term care patients; hospitalization or other inpatient stay.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Numerator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Individuals who have all chronic medications included in the synchronization over the measurement time period.</p>' +
				'</el-col>' +
			'</el-row>' +
		'</div>'
});

Vue.component('med-sync-completeness-ref-1', {
  template: 
    '<el-popover placement="top-start" width="400" trigger="hover">' +
      '<span>Dechanont S, Maphanta S, Butthum B, et al. Hospital admissions/visits associated with drug-drug interactions: a systematic review and meta-analysis. Pharmacoepidemiol Drug Saf. 2014; 23(5):489-97. PMID: <a href="https://www.ncbi.nlm.nih.gov/pubmed/24616171" target="_blank">24616171</a>.</span>' +
      '<sup slot="reference">1</sup>' +
    '</el-popover>'
});

Vue.component('med-sync-completeness-rationale', {
	template: 
		'<div>' +
			'<el-row id="med-sync-completeness-rationale" class="scrollspy">' +
				'<h2>Rationale</h2>' +
			'</el-row>' +
			'<el-row>' +
				"<p>Medication synchronization allows the alignment of refill dates for all of a patient's chronic medications to a single date. This process serves as a built-in refill reminder and allows the consolidation of all the patient's medications to drive the efficient use of dose reminder packaging, if applicable. Medication synchronization also allows a pharmacy to adopt an appointment-based model to schedule patient care services around the pick-up or delivery date. A recent study of a community pharmacy-based medication synchronization program showed an additional 84 days of therapy, raising percent of days covered from the low 60-percentile to the mid 80-percentile range.</p>" +
				'<p>This QII enables the pharmacy to see how effectively they are engaging their target population in the medication synchronization program.</p>' +
			'</el-row>' +
		'</div>'
});

Vue.component('med-sync-completeness', {
	template:
		'<div id="med-sync-completeness" class="search-filter inview">' +
			'<med-sync-completeness-overview></med-sync-completeness-overview>' +
            '<med-sync-completeness-rationale v-if="rationale"></med-sync-completeness-rationale>' +
			/*'<med-sync-completeness-faqs v-if="faqs"></med-sync-completeness-faqs>' +*/
			'<br><br><br><br>' +
		'</div>',
	props: {
		rationale: {
			default: false
		},
		faqs: {
			default: false
		}
	}
});