<template>
<div class="comp clarms-plugins-material" :class="{'en':locale == 'en'}">
<template v-if="!insuredList || insuredList.length == 0">
<div class="reservation-container-2">
<div class="empty">
<div class="tips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('customService.insuranceQuery.noPolicy')}}
<span class="pointer btn" @click="toContact">{{$t('customService.insuranceQuery.customService')}}</span>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="reservation-container-2">
<div class="title default-mt">
<div class="tt t1">{{$t('clarms.step2.label1')}}</div>
<div class="tt clarms-border">
<div class="down-arrow"></div>
<el-select style="text-align: center;" class="clarms-select" v-model="data.insuredIndex" :placeholder="''" @change="insuredChange">
<template v-if="lan == 'en'">
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn?item.insuredNameEn:item.insuredNameCn" :value="index + 1">
</el-option>
</template>
<template v-else>
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn?item.insuredNameCn:item.insuredNameEn" :value="index + 1">
</el-option>
</template>
</el-select>
</div>
<div class="tt t1">{{$t('clarms.step2.label2')}}</div>
</div>
<hr v-if="data.insuredIndex">
<div class="gird-g form default-mt">
<div class="pure-u-1 form-item-2" v-if="data.insuredIndex">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label3')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label4')}}</div>
</div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
<div class="check-border">
<div class="check" v-if="typeSelected.indexOf('1') > -1"></div>
</div>
<span>{{$t('clarms.step2.op1')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
<!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png"> -->
<div class="check-border">
<div class="check" v-if="typeSelected.indexOf('2') > -1"></div>
</div>
<span>{{$t('clarms.step2.op3')}}</span>
</div>
<div class="check-item check-disabled">
<div class="check-border uncheck-border"></div>
<span>{{$t('clarms.step2.op2')}}</span>
</div>
<div class="check-item check-disabled">
<!-- <img src="@/assets/images/clarms/uncheck-disabled.png"> -->
<div class="check-border uncheck-border"></div>
<span>{{$t('clarms.step2.op4')}}</span>
</div>
<div class="check-item check-disabled">
<!-- <img src="@/assets/images/clarms/uncheck-disabled.png"> -->
<div class="check-border uncheck-border"></div>
<span>{{$t('clarms.step2.op5')}}</span>
</div>
</div>
<div v-if="typeSelected.indexOf('1') > -1 || typeSelected.indexOf('2') > -1" class="tips tips2"><img src="@/assets/images/clarms/impor.png">
<span>{{$t('clarms.step2.label5')}}</span>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="typeSelected && typeSelected.length > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label6')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label7')}} </div>
</div>
<div class="value">
<div>
<div class="ipt-wrap">
<input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck">
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png">
<span>{{$t('clarms.step2.label8')}}</span>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20" v-if="data.amount && data.amount > 0">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div class="value">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<div class="cont">
<div class="ipt-date">
<date-picker v-model="data.contactDate" :pluginActivity="pluginActivityHandler" :formatter="'dd-MM-yyyy'" :filtModel="['future']" :check="checkDate" :readonly="true" :cusStyle="{border:'none !important','background-color':'transparent !important','height':'58px', 'color':'#ff6839','font-weight':'bold','text-align': 'center'}"></date-picker>
</div>
</div>
</div>
</div>
</div>
<template v-if="data.contactDate && data.policyDateLegal">
<div class="pure-u-1 form-item-2 form-item-3 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
</div>
</div>
<div class="value">
<clarms-upload ref="HT41" :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload ref="HT26" class="mt24" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
<div class="pure-u-1 form-item-2 form-item-3 mt24">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div class="value">
<clarms-upload ref="HT06" :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload ref="HT34" id="HT34" class="mt24" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',toast:$t('clarms.step2.toast4')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
<clarms-upload ref="HT03" class="mt24" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
</div>
</div>
</template>
</div>
<template v-if="data.contactDate && data.policyDateLegal">
<!-- <template v-if="1>0"> -->
<hr class="hr2" v-if="data.amount > 0">
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
<div class="bottom-tip gray3 mt10">{{$t('clarms.step2.tip1')}}</div>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
<div class="bottom-tip gray3 mt10">{{$t('clarms.step2.tip2')}}</div>
<div class="bottom-tip gray3 mt10">{{$t('clarms.step2.tip3')}}</div>
<div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
<img v-if="agress" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.tip4')}}</span>
</div>
<div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial">
<van-loading v-if="loading" /> {{$t('clarms.step2.btn')}}
</div>
<div class="contact" v-if="!showTips" @click="toContact">
<span>{{$t('clarms.step2.contact2')}}</span>
<span class="underline">{{$t('clarms.step2.contact')}}</span>
</div>
<div class="fail-tips" v-if="showTips">
<img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
<div class="txt">
{{$t('clarms.step2.failure')}}
<span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span>
</div>
</div>
</template>
</div>
</template>
</div>
</template>
<script src="./clarms-plugins-material.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-material.scss";
</style>
<style lang="scss">
.clarms-plugins-material {
.clarms-select {
.el-input__inner {
height: 58px;
border-radius: 8px;
text-align: center;
color: #58595b;
}
}
}
</style>