<template>
    <view>
        <view
            v-if="todayData.type === 1"
            class="today-wrap"
            :class="todayData.isChooseOption ? 'selected' : ''"
        >
            <view class="slogan">每日科普</view>
            <view class="title c-line-clamp2">{{ todayData.title }}</view>
            <!-- 选中后 -->
            <view v-if="todayData.isChooseOption" class="position-wrap">
                <view
                    class="status"
                    :class="isCorrect ? 'right' : 'error'"
                >
                    <view class="status-img" />
                    <view class="text">{{ isCorrect ? '答对了' : '答错了' }}</view>
                </view>
                <view class="process-wrap">
                    <view class="btn-wrap">
                        <view
                            v-for="(item, index) in todayData.options"
                            :key="index"
                            class="btn"
                            :class="index === 0 ? 'right' : 'error'"
                        >
                            <view class="icon-box">
                                <c-icon
                                    :name="item.isCorrect ? 'check' : 'close'"
                                    font-size="12px"
                                    class="icon"
                                />
                                <text class="btn-text">{{ item.title }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="process">
                        <view
                            class="account yes"
                            :style="{
                                width: todayData.options[0].percent + '%',
                            }"
                        />
                    </view>
                    <view class="person-num">
                        <text>{{ todayData.options[0].number }}人<text
                            v-if="todayData.options[0].isChoose"
                            class="select-num right"
                        >已选</text></text>
                        <text><text
                            v-if="todayData.options[1].isChoose"
                            class="select-num"
                        >已选</text>{{ todayData.options[1].number }}人</text>
                    </view>
                </view>
                <view class="result-wrap" @tap="handleShowMore(todayData.url)">
                    <view class="answer">正确选项：<text class="answer-cont">{{ correctData.title }}</text></view>
                    <view
                        v-if="todayData.articleText"
                        class="c-line-clamp4 answer-text"
                    >
                        {{ todayData.articleText }}
                    </view>
                    <view class="more">
                        <text>了解更多</text>
                        <c-icon
                            name="right"
                            font-size="10px"
                            class="icon more-icon"
                        />
                    </view>
                </view>
            </view>
            <!-- 未选中 -->
            <view v-else class="answer-wrap">
                <view v-if="todayData.options && todayData.options.length" class="answer-btn-wrap">

                    <view
                        v-for="(item, index) in todayData.options"
                        :key="index"
                        class="answer-btn"
                        :class="index === 0 ? 'right' : 'error' "
                        @tap="goPk(index)"
                    >
                        {{ item.title }}
                    </view>
                </view>
                <view class="total">
                    {{ todayData.total + '人已参与，选择后可查看专家解读' }}
                </view>
            </view>
        </view>
        <!-- 文章 -->
        <view v-else-if="todayData.type === 2" class="today-wrap">
            <view class="slogan">每日科普</view>
            <view v-if="todayData.title" class="title c-line-clamp2">{{ todayData.title }}</view>
            <view
                v-if="todayData.articleText"
                class="today-article"
                @tap="handleShowMore(todayData.url)"
            >
                <view
                    v-if="todayData.articleText"
                    class="c-line-clamp4 answer-text"
                >
                    {{ todayData.articleText }}
                </view>
                <view class="more">
                    <text>了解更多</text>
                    <c-icon
                        name="right"
                        font-size="10px"
                        class="icon more-icon"
                    />
                </view>
            </view>
        </view>
        <!-- 视频 -->
        <view
            v-else-if="todayData.type === 3"
            class="today-wrap"
            @tap="handleShowMore(todayData.url)"
        >
            <view class="slogan">每日科普</view>
            <view v-if="todayData.title" class="title c-line-clamp2">{{ todayData.title }}</view>
            <view class="video-wrap">
                <view v-if="todayData.articleText" class="video-text c-line-clamp2">{{ todayData.articleText }}</view>
                <view class="poster-wrap">
                    <image
                        v-if="todayData.videoImage"
                        class="poster"
                        :src="todayData.videoImage"
                        mode="aspectFill"
                    />
                    <image
                        class="play"
                        src="https://med-fe.cdn.bcebos.com/yd/daily/play-new.png"
                        mode="widthFix"
                    />
                    <view v-if="todayData.duration" class="duration">{{ todayData.duration }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            isCorrect: false,
            correctData: '',
            todayData: {}
        };
    },
    created() {
        if (this.data.type === 1) {
            const correctData = this.data.options.filter(item => Boolean(item.isCorrect));
            this.correctData = correctData && correctData.length && correctData[0];
            if (this.data.isChooseOption) {
                this.data.options.forEach(item => {
                    if (item.isCorrect && item.isChoose) {
                        this.isCorrect = true;
                    }
                });
            }
        }
        Object.assign(this, {
            todayData: this.data,
        });
    },
    methods: {
        handleShowMore() {
            this.$emit('handleShowMore');
        },
        goPk(optionIndex) {
            this.todayData.isChooseOption = true;
            this.todayData.options[optionIndex].isChoose = true;
            const isCorrect = this.todayData.options[optionIndex].isCorrect;
            this.isCorrect = isCorrect;
            const total = ++this.todayData.total;
            const options = this.todayData.options;
            options.forEach((item, index) => {
                if (index === optionIndex) {
                    ++item.number;
                }
                item.percent = (item.number / total * 100).toFixed(2);
            });
            this.todayData.options = options;
            this.$emit('goPk', this.todayData, 0, optionIndex, true);
        }
    }
};

</script>
<style lang="less" scoped>
    .process-wrap {
        padding-top: .24rem;
        margin: 0 .3rem;
    }

    .btn-wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: .08rem;
        color: #fff;

        .btn {
            width: .79rem;
            height: .33rem;

            &.right {
                background: url('https://med-fe.cdn.bcebos.com/yd/daily/btn-error.png') 0 0 no-repeat;
                background-size: .79rem .33rem;
            }

            &.error {
                background: url('https://med-fe.cdn.bcebos.com/yd/daily/btn-right.png') 0 0 no-repeat;
                background-size: .79rem .33rem;
            }

            .icon-box {
                margin-top: .07rem;
                text-align: center;
                height: .14rem;
                line-height: .14rem;
                font-weight: bold;
            }

            .icon,
            .btn-text {
                display: inline-block;
            }

            .icon {
                padding-right: .03rem;
            }

            .btn-text {
                font-size: .14rem;
                font-weight: bold;
            }
        }
    }

    .process {
        position: relative;
        width: 100%;
        height: .09rem;
        box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.5);
        border-radius: 24px;
        background-image: linear-gradient(-44deg, #07d2c7 0%, #2feba7 100%);
    }

    .account {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 24px;
        z-index: 1;
        overflow: hidden;

        &.no {
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                border-radius: 24px;
                content: '';
                display: block;
                z-index: 2;
                width: 100%;
            }
        }

        &.yes {
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                border-radius: 24px;
                content: '';
                width: 100%;
                display: block;
                z-index: 2;
                background-image: linear-gradient(-37deg, #ff981a 0%, #ffbc10 96%);
            }
        }
    }

    .person-num {
        color: #84a4a0;
        display: flex;
        justify-content: space-between;
        font-size: .13rem;
        line-height: 1;
        padding-top: .07rem;

        .select-num {
            display: inline-block;
            padding: 0 .03rem;
            color: #00c8c8;

            &.right {
                color: #ffb400;
            }
        }
    }

    .today-wrap {
        border-radius: .14rem;
        overflow: hidden;
        background: #fff;
        position: relative;

        &.selected {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .slogan {
            position: relative;
            z-index: 3;
            width: 2.17rem;
            height: .36rem;
            line-height: .36rem;
            margin: 0 auto;
            text-align: center;
            color: #fff;
            background: url('https://internal-amis-res.cdn.bcebos.com/images/title-bg.png') 0 0 no-repeat;
            background-size: 2.17rem .36rem;
            font-weight: bold;
            font-size: .2rem;
        }

        .title {
            margin: .22rem .4rem 0;
            text-align: center;
            font-weight: bold;
            font-size: .21rem;
            line-height: .3rem;
            position: relative;
            z-index: 3;
        }

        .answer-wrap,
        .position-wrap {
            position: relative;
            z-index: 3;
        }

        .status {
            margin-top: .24rem;
            display: flex;
            justify-content: center;

            &.right {
                color: #00c8c8;

                .status-img {
                    background-image: url('https://internal-amis-res.cdn.bcebos.com/images/right.png');
                }
            }

            &.error {
                color: #fd503e;

                .status-img {
                    background-image: url('https://internal-amis-res.cdn.bcebos.com/images/error.png');
                }
            }

            .text {
                font-size: .23rem;
                line-height: 1;
                font-weight: bold;
            }
        }

        .status-img {
            width: .23rem;
            height: .23rem;
            background-size: .23rem .23rem;
            background-position: 0 0;
            background-repeat: no-repeat;
            margin-right: .1rem;
        }

        .total {
            text-align: center;
            font-size: .14rem;
            line-height: 1;
            color: #4b6964;
            margin: .34rem 0 .23rem;
        }

        .answer-btn-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: .19rem;
        }

        .answer-btn {
            width: 1.33rem;
            height: .4rem;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 1.33rem .4rem;
            text-align: center;
            line-height: .4rem;
            color: #fff;
            font-size: .18rem;

            &.right {
                margin-right: .07rem;
                background-image: url('https://med-fe.cdn.bcebos.com/yd/daily/daily-btn-right.png');
            }

            &.error {
                background-image: url('https://med-fe.cdn.bcebos.com/yd/daily/daily-btn-error.png');
            }
        }

        .more {
            color: #00c8c8;
            text-align: center;
            line-height: .14rem;
            padding: .15rem 0 .34rem;
        }

        .more-icon {
            font-weight: bold;
        }

        .answer-text {
            text-align: justify;
        }
    }

    .result-wrap {
        margin-top: .23rem;
        padding: 0 .31rem;
        border-top: 1px dashed #3fbeaf;
        background: #f6fcfb;

        .answer {
            font-size: .18rem;
            color: #00c8c8;
            font-weight: bold;
            padding: .26rem 0 .15rem;

            .answer-cont {
                font-weight: bold;
            }
        }
    }

    .poster-wrap {
        font-size: 0;
        line-height: 1;
        position: relative;
        margin: .14rem 0 .24rem;

        &::before {
            content: '';
            display: block;
            padding-top: 56.25%;
        }

        .poster {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            border-radius: .1rem;
            overflow: hidden;
        }

        .play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: .61rem;
            height: .61rem;
        }

        .duration {
            position: absolute;
            right: .07rem;
            bottom: .06rem;
            opacity: 0.48;
            font-size: .11rem;
            background: #323232;
            border-radius: .09rem;
            padding: .03rem .05rem;
            color: #fff;
        }
    }

    .video-wrap {
        margin: 0 .32rem .3rem;
        position: relative;
        z-index: 3;

        .video-text {
            font-size: .15rem;
            line-height: .22rem;
            margin-top: .2rem;
        }

        .poster-wrap {
            margin-top: .13rem;
        }
    }

    .today-article {
        margin: .2rem .31rem 0;
        position: relative;
        z-index: 3;
    }
</style>
