Vue.component('pdc-examples', {
	template:
	
	'<div> \
		<div v-for="(item, index) in items"> \
			<!--<p>{{item.title}}</p>--> \
			<div v-if="index"></br></div/> \
			<html-element :item="item.description"></html-element> \
			<div is="el-table" v-if="item.enroll" :data="[{from: \'2018/01/01\', thru: \'2018/12/31\'}]" border style="width: 100%;"> \
				<div is="el-table-column" label="From" prop="from"></div> \
				<div is="el-table-column" label="Thru" prop="thru"></div> \
			</div> \
			<div is="el-table" v-if="item.claims" :data="item.claims" border style="width: 100%;"> \
				<el-table-column type="expand"> \
	              <template scope="props"> \
	              	<span>Overlap: {{ props.row.overlap ? props.row.overlap + \' days\' : \'None\' }}</span><br/> \
	                <span>Date of First Dose: {{ props.row.dateOfFirstDose }}</span><br/> \
	                <span>Date of Last Dose: {{ props.row.dateOfLastDose }}</span> \
	              </template> \
	            </el-table-column> \
				<div is="el-table-column" label="Date of Fill" prop="dateOfFill"></div> \
				<div is="el-table-column" label="Drug Name" prop="drug"></div> \
				<div is="el-table-column" label="Days Supply" prop="daysSupply"></div> \
			</div> \
			<div is="el-tabs" v-if="item.active" v-model="item.active" type="border-card" tab-position="top"> \
				<div is="el-tab-pane" v-if="item.calculation" label="Calculation" name="calculation"> \
					<el-row> \
						<el-col :span="12"> \
							<span>Index Date: {{item.calculation.indexDate}}</span><br/> \
							<span>Days in the Treatment Period: {{item.calculation.daysInMeasPeriod}}</span><br/> \
							<span>Unique Dates of Service: {{item.calculation.uniqueDatesOfService}}</span><br/> \
							<b><span>Denominator: <i class="el-icon-success" v-if="item.calculation.denominator" style="color: rgb(0,178,51)"></i><i class="el-icon-error" v-if="!item.calculation.denominator" style="color: rgb(255,25,25)"></i></span></b><br/> \
						</el-col> \
						<el-col v-if="item.calculation.denominator"  :span="12"> \
							<span>Days Covered: {{item.calculation.daysCovered}}</span><br/> \
							<span>PDC: {{item.calculation.pdc}}</span><br/> \
							<b><span>Numerator: <i class="el-icon-success" v-if="item.calculation.numerator" style="color: rgb(0,178,51)"></i><i class="el-icon-error" v-if="!item.calculation.numerator" style="color: rgb(255,25,25)"></i></span></b> \
						</el-col> \
					</el-row> \
				</div> \
				<div is="el-tab-pane" v-if="item.timeline" label="Timeline" name="timeline"> \
					<my-graph :id="\'timeline\' + item.id" type="timeline" :claims="item.claims" :from="item.from" :thru="item.thru"></my-graph> \
				</div> \
				<div is="el-tab-pane" v-if="item.calendar" label="Calendar" name="calendar"> \
					<my-graph :id="\'calendar\' + item.id" type="calendar" :claims="item.claims" :from="item.from" :thru="item.thru" style="text-align:center;"></my-graph> \
				</div> \
			</div> \
		</div> \
	</div>',
	
	props: {
		items: Array
	}
});