<template>
    <view 
        class="vacc-card"
    >
        <view
            style="display: flex;"
        >
            <view style="max-width: 100%; flex: 1; display: flex; flex-direction: column;">
                <view 
                    class="vacc-card-info-content"
                    :style="{
                        'padding-bottom': vaccInfo.injectionDate ? '.05rem;' : '.15rem', 
                    }"
                    @tap.stop="onTapCard"
                >
                    <!-- 名称 - 第几针 -->
                    <view
                        style="width: fit-content; max-width:80%; display: flex; flex-direction: row; align-items:center; position:relative;"
                    >
                        <view
                            v-if="isMutexed == true"
                            class="vacc-card-disable"
                        />
                        <!-- 名称 -->
                        <view
                            :class="isMutexed == true ? 'vacc-card-name-disable' : 'vacc-card-name'"
                            style="max-width:80%; overflow:hidden; text-overflow:ellipsis;"
                            @tap.stop="onTapVaccineName"
                        >
                            {{ vaccInfo.vaccName }}
                        </view>
                        <!-- 第1/3针 -->
                        <view class="vacc-card-progress">
                            {{ vaccInfo.progress }}
                        </view>
                    </view>
                    <!-- 自费/免费 - tags标签 -->
                    <view
                        v-if="vaccInfo.vaccTags && vaccInfo.vaccTags.length > 0"
                        style="display: flex; flex-direction: row; align-items:center; margin-top: 9px;"
                    >
                        <view
                            v-for="(tag, index) in vaccInfo.vaccTags"
                            :key="index"
                            class="vacc-card-tag"
                            :style="{
                                border: '1px solid ' + tag.borderColor,
                                color: tag.textColor,
                                background: tag.bgColor,
                            }"
                        >
                            {{ tag.text }}
                        </view>
                    </view>
                    
                    <!-- 疫苗简介描述 -->
                    <view
                        v-if="vaccInfo.vaccInfoText"
                        class="vacc-card-info c-line-clamp1"
                        style="width: 100%;"
                    >
                        {{ vaccInfo.vaccInfoText }}
                    </view>
                </view>

                <!-- 推荐/实际接种时间 点击后弹出时间picker组件可以修改时间 -->
                <view
                    v-if="vaccInfo.injectionDate"
                    class="vacc-card-recommend-time"
                    @tap.stop=""
                >
                    <template v-if="canTapDate">
                        <picker
                            style="width: 100%; height: 100%;"
                            mode="date"
                            fields="day"
                            :start="childBirthDate"
                            :end="nowDate"
                            :value="vaccInfo.injectionDate"
                            :title="'接种时间'"
                            @change="dateSelectChange"
                        >
                            <view class="vacc-card-recommend-time-text">
                                <text v-if="vaccInfo.dateType == 0">{{ '推荐接种时间：' + vaccInfo.injectionDate }}</text>
                                <text v-else-if="vaccInfo.dateType == 1">{{ '实际接种时间：' + vaccInfo.injectionDate }}</text>
                                <text v-else-if="vaccInfo.dateType == 2">{{ '计划接种时间：' + vaccInfo.injectionDate }}</text>
                                <c-icon
                                    name="right"
                                    font-size="12px"
                                    class="c-color-gray"
                                />
                            </view>
                        </picker>
                    </template>
                    <template v-else>
                        <view class="vacc-card-recommend-time-text">
                            <text v-if="vaccInfo.dateType == 0">{{ '推荐接种时间：' + vaccInfo.injectionDate }}</text>
                            <text v-else-if="vaccInfo.dateType == 1">{{ '实际接种时间：' + vaccInfo.injectionDate }}</text>
                            <text v-else-if="vaccInfo.dateType == 2">{{ '计划接种时间：' + vaccInfo.injectionDate }}</text>
                        </view>
                    </template>
                </view>
                
            </view>

            <template v-if="checkable">
                <view
                    style="width: .65rem; display:flex; align-items:center; justify-content: center;"
                    @tap.stop="onCheckTap"
                >
                    <view
                        class="m-checkbox"
                    >
                        <view
                            :style="{
                                color: vaccInfo.isChecked ? '#00C8C8' : '#E0E0E0',
                                fontSize: '24px',
                                height: '24px',
                            }"
                            :class="['m-icon', vaccInfo.isChecked ? 'm-icon-checkboxselected' : 'm-icon-checkbox']"
                        />
                    </view>
                </view>
            </template>

        </view>
        
        <view
            v-if="showStatusLabel"
            class="vacc-card-label"
            :style="{
                color: statusLabelMap[vaccInfo.status].color,
                background: statusLabelMap[vaccInfo.status].bgColor,
            }"
        >
            {{ statusLabelMap[vaccInfo.status].text }}
        </view>
    </view>
</template>
<script>
/**
 * @file 儿童疫苗接种记录时间轴item
 * @author niulei06
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as core from '@utils/core';
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    props: {
        /** 数据 */
        vaccInfo: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /** 宝宝生日，作为日期选择picker组件的日期起始点 */
        childBirthDate: {
            type: String,
            default: () => {
                return '2000-1-1';
            }
        },
        /** 是否显示checkbox，默认显示 */
        checkable: {
            type: Boolean,
            default: () => {
                return true;
            }
        },
        /** 与当前疫苗互斥的疫苗id集合 */
        mutexedList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 点击日期是否弹出日期picker组件，默认不可点击 */
        canTapDate: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        showStatusLabel: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
    },
    data() {
        const nowDate = core.formatDate(new Date().getTime(), 'yyyy-MM-dd');
        return {
            tips: '',
            nowDate: nowDate,
            isMutexed: false,
            statusLabelMap: [
                {
                    text: '未接种',
                    color: '#858585',
                    bgColor: '#EDEDED'
                },
                {
                    text: '已接种',
                    color: '#00C8C8',
                    bgColor: '#EDEDED'
                },
                {
                    text: '未接种-待补种',
                    color: '#FD503E',
                    bgColor: '#FFE2DF'
                },
                {
                    text: '计划中',
                    color: '#4E6EF2',
                    bgColor: '#E4E9FD'
                },
                {
                    text: '已逾期',
                    color: '#FF6600',
                    bgColor: '#EDEDED'
                },
            ]
        };
    },
    watch: {
        vaccInfo(newVal, oldVal) {

        },
        mutexedList(newVal, oldVal) {
            this.isMutexed = newVal && newVal.indexOf(this.vaccInfo.vaccId) != -1;
        }
    },
    created() {
        this.isMutexed = this.mutexedList && this.mutexedList.indexOf(this.vaccInfo.vaccId) != -1;
    },
    destroyed() {

    },
    
    methods: {
        onTapVaccineName() {
            this.$emit('onTapVaccineName');
        },
        onTapCard() {
            this.$emit('onTapCard');
        },
        onCheckTap() {
            this.$emit('onCheckTap');
        },
        // 选择接种时间
        dateSelectChange(e) {
            const value = e.detail.value;
            this.$emit('onTapDate', value);
        },

    }
};
</script>
<style lang="less" scoped>
.vacc-card {
    background: #fff;
    border-radius: .12rem;
    // padding: .15rem .13rem .14rem .13rem;
    white-space: nowrap;
    position: relative;

    &-info-content {
        flex: 1; 
        box-sizing: border-box; 
        padding-top: .15rem; 
        padding-left: .13rem; 
        padding-right: .13rem;
        padding-bottom: .05rem;   
    }

    &-label {
        position: absolute;
        top: 0;
        right: 0;
        background: #8800C8C8;
        padding: 0 6px;
        border-radius: 0 .12rem 0 .10rem;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #00C8C8;
        line-height: 19px;
        font-weight: 400;
    }

    &-disable {
        width: 100%;
        height: .01rem;
        background: #B8B8B8;
        position: absolute;
        top: 50%;
    }

    &-name {
        font-family: PingFangSC-Medium;
        font-size: .18rem;
        color: #1F1F1F;
        line-height: .18rem;
        font-weight: 500;

        &-disable {
            font-family: PingFangSC-Medium;
            font-size: .18rem;
            color: #B8B8B8;
            line-height: .18rem;
            font-weight: 500;   
        }
    }

    &-tag {
        margin-right: 4px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: .12rem;
        line-height: .12rem;
        padding: 2px 5px;
        border-radius: .14rem;
    }

    &-progress {
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #B8B8B8;
        line-height: .14rem;
        font-weight: 400;
        padding-left: .04rem;
    }

    &-info {
        margin-top: .09rem;
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #525252;
        line-height: .14rem;
        font-weight: 400;
    }
    &-warning {
        margin-top: .09rem;
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #FD503E;
        line-height: .14rem;
        font-weight: 400;
    }
    &-recommend-time {
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #1F1F1F;
        line-height: .14rem;
        font-weight: 400;
        

        &-text {
            width: 100%;
            height: .34rem;
            box-sizing: border-box;
            padding-left: .13rem;
            padding-top: .04rem;
            color: #B8B8B8;
        }
    }

}
.checkbox {
    &.swing {
        animation: swing 2s linear infinite;
    }
}

.m-checkbox {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    padding-right: 2px;
    box-sizing: border-box;
    .m-icon {
        line-height: 1;
        border-radius: 100%;
        background: #fff;
    }
    &.disabled {
        .m-icon-checkbox {
            background: #f0f0f0;
        }
    }
}
</style>
