<template>
    <b-med-container
        bg-color="#ffffff"
        class="med-meeting"
        :hide-header="true"
        :is-skt-show="!isPageRender"
        skt-tpl="experthome"
    >
        <!-- 顶部 -->
        <top-bar
            bar-bg="transparent"
            :text-color="textColor"
            :blank="false"
            :z-index="202"
            :title="title"
            @navigateHome="navigateHome"
        />
        <view class="content">
            <!-- 头部图片 -->
            <c-image
                has-compress
                :src="headImg"
                mode="widthFix"
                width="100%"
                height="266px"
                lazy-load
                :is-round="false"
                :extra="{column: 12}"
                :hack-white-stroke="false"
            />
            <!-- 头部图片-阴影 -->
            <view class="head-image shadow">
                <c-image
                    has-compress
                    :src="shadow"
                    width="100%"
                    height=".53rem"
                    mode="widthFix"
                    :is-round="false"
                    :hack-white-stroke="false"
                    lazy-load
                    :extra="{column: 12}"
                />
            </view>
            <view
                class="video-wrap"
            >
                <view class="video-title">
                    <c-image
                        has-compress
                        width="2.49rem"
                        height=".25rem"
                        :src="videoTitleImg"
                        mode="widthFix"
                        :is-round="false"
                        :hack-white-stroke="false"
                        lazy-load
                        :extra="{column: 8}"
                    />
                </view>
                <view v-if="showVideo && videoData && videoData.video" class="video-inner-wrap">
                    <c-video
                        :id="'video'"
                        :video-data="videoData"
                        class="video"
                        :has-gap="false"
                        height="43.1562vw"
                        :has-radius="false"
                        :object-fit="'contain'"
                        :need-duration="false"
                        @play="playVideo"
                    />
                </view>
                <view
                    v-else
                    class="video-stage"
                >
                    <image
                        v-if="videoData && videoData.poster"
                        class="poster"
                        :src="videoData.poster"
                        mode="widthFix"
                    />
                </view>
            </view>
            <!-- 谣言 -->
            <view
                class="head-image"
            >
                <c-image
                    has-compress
                    :src="fakeUrl"
                    mode="widthFix"
                    width="100%"
                    height="auto"
                    lazy-load
                    :is-round="false"
                    :hack-white-stroke="false"
                    :extra="{column: 8}"
                />
            </view>
            <!-- 题列表 -->
            <view v-if="list.length" class="question-wrap">
                <view
                    v-for="(item, index) in list"
                    :key="index"
                    class="question"
                >
                    <!-- <view class="num">{{ 'NO.' + (index + 1) }}</view> -->
                    <view class="title">
                        <text>{{ `Q${index + 1}：` + item.pkTitle }}</text>
                    </view>
                    <view
                        class="btn-wrap c-row"
                    >
                        <view
                            v-for="(optionsItem, optionsIndex) in item.options"
                            :key="optionsIndex"
                            class="answer"
                            :class="{
                                'yes': optionsItem.isChoose && optionsItem.isCorrect,
                                'no': optionsItem.isChoose && !optionsItem.isCorrect,
                            }"
                            @tap="goPk(item, index, optionsIndex)"
                        >
                            {{ optionsItem.isChoose
                                ? optionsItem.isCorrect
                                    ? optionsItem.title + '(正确)' : optionsItem.title + '(错误)' : optionsItem.title }}
                        </view>
                    </view>
                    <!-- 参与人数-->
                    <view v-if="!item.isChooseOption" class="total">
                        {{ item.total + '人已参与鉴定，选择答案后即可查看专家解读' }}
                    </view>
                    <!-- 进度条 -->
                    <view
                        v-if="item.isChooseOption"
                        class="tap-style"
                        :class="index === activeIndex ? 'animation' : ''"
                    >
                        <view class="process-wrap">
                            <view class="process">
                                <view
                                    class="account"
                                    :class="{
                                        'yes': item.options[0].isChoose
                                            && item.options[0].isCorrect
                                            || item.options[1].isChoose
                                            && item.options[1].isCorrect,
                                        'no': !(item.options[0].isChoose
                                            && item.options[0].isCorrect
                                            || item.options[1].isChoose
                                            && item.options[1].isCorrect),
                                        'animation': index === activeIndex,
                                    }"
                                    :style="{
                                        width: item.options[0].percent + '%',
                                    }"
                                />
                            </view>
                            <view class="person-num">
                                <text>{{ item.options[0].number }}人</text>
                                <text>{{ item.options[1].number }}人</text>
                            </view>
                        </view>
                        <!-- 专家 -->
                        <view class="doctor-wrap">
                            <view
                                class="doctor"
                            >
                                <c-image
                                    has-compress
                                    :src="item.doctorImage"
                                    width=".39rem"
                                    height=".39rem"
                                    mode="widthFix"
                                    :is-round="false"
                                    radius="50%"
                                    lazy-load
                                    :extra="{column: 2}"
                                />
                            </view>
                            <text class="doctor-text">{{ item.doctor }}</text>
                        </view>
                        <!-- 解析图片 -->
                        <view class="explain-wrap">
                            <view class="explain">
                                <c-image
                                    has-compress
                                    :src="item.image"
                                    width="100%"
                                    height="auto"
                                    mode="widthFix"
                                    :is-round="false"
                                    radius=".06rem"
                                    lazy-load
                                    :extra="{column: 9}"
                                />
                            </view>
                        </view>
                    </view>
                    <view
                        class="question-top-bg"
                        :style="{
                            'background-image': 'url(' + borderTop + ')',
                        } | imgCompress('background-image', {column: 12})"
                    />
                    <view
                        class="question-content-bg"
                        :style="{
                            'background-image': 'url(' + borderMideum + ')',
                        } | imgCompress('background-image', {column: 12})"
                    />
                    <view
                        class="question-bottom-bg"
                        :style="{
                            'background-image': 'url(' + borderBottom + ')',
                        } | imgCompress('background-image', {column: 12})"
                    />
                </view>
            </view>
            <!-- 科普 -->
            <view v-if="flag" class="head-image tech">
                <c-image
                    has-compress
                    :src="teahUrl"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    :is-round="false"
                    lazy-load
                    :extra="{column: 12}"
                    :hack-white-stroke="false"
                />
            </view>
            <!-- btn -->
            <view v-if="flag" class="teach-warp">
                <view class="teach-item">
                    <view
                        v-for="(item, index) in btnGroupTwoData"
                        :key="'customItem' + index"
                        style="margin-bottom: 0.17rem;"
                    >
                        <c-image
                            has-compress
                            :src="item.bgUrl"
                            mode="widthFix"
                            lazy-load
                            :width="item.isTwo ? '29.9517vw' : '45.1691vw'"
                            height=".38rem"
                            :extra="{column: item.isTwo ? 6 : 4}"
                            :is-round="false"
                            :hack-white-stroke="false"
                            @tap="goDisease(item)"
                        />
                    </view>
                </view>
            </view>
            <!-- 关于 -->
            <view
                v-if="flag"
                class="head-image about"
            >
                <c-image
                    has-compress
                    :src="aboutUrl"
                    mode="widthFix"
                    width="100%"
                    height="auto"
                    lazy-load
                    :is-round="false"
                    :extra="{column: 12}"
                    :hack-white-stroke="false"
                />
            </view>
            <view v-if="flag" class="gap intro">
                <c-image
                    has-compress
                    :src="introUrl"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    lazy-load
                    :is-round="false"
                    :extra="{column: 12}"
                    :hack-white-stroke="false"
                />
            </view>
            <!-- go btn -->
            <view
                v-if="flag"
                class="yd-btn"
            >
                <c-image
                    :src="goYdBgUrl"
                    width="2.42rem"
                    height=".52rem"
                    mode="widthFix"
                    lazy-load
                    :is-round="false"
                    :extra="{column: 7}"
                    :hack-white-stroke="false"
                    @tap="goYd"
                />
            </view>
        </view>
    </b-med-container>
</template>

<script>
/* global getApp */
/**
 * @file 百度健康医典 世界大会活动页
 * @author mazihan
 */

import container from '@components/common/container';
import TopBar from '@components/common/topbar';
import Video from '@components/common/video';
import * as Conf from '@utils/conf';
import config from './config';
import {request} from '@utils/request';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';
import {shareBdBox} from '@utils/share';
import CImage from '@components/common/image';

export default {
    config: {
        navigationStyle: 'custom',
        navigationBarTextStyle: 'black'
    },
    components: {
        BMedContainer: container,
        TopBar: TopBar,
        CVideo: Video,
        CImage
    },
    data() {
        return {
            title: ' ',
            list: [], // 答题列表
            canClick: true,
            isPageRender: false,
            flag: false,
            showVideo: false,
            activeIndex: '',
            videoData: {
                video: '',
                poster: '',
                title: '',
                duration: 0
            },
            shareInfo4Bd: {
                title: '2021世界艾滋病日百度健康医典特别策划专题',
                content: '点击查看更多相关权威科普知识',
                imageUrl: 'https://med-fe.cdn.bcebos.com/bdhealth/logo/bdhealth_logo_180.png'
            },
            ...config
        };
    },
    onShow() {
        this.showVideo = true;
    },
    onLoad(options) {
        this.getThemeInfo(options);
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    methods: {
        getThemeInfo(options) {
            if (!options.channelId) {
                Object.assign(options, {channelId: 308, medical: 1});
            }
            request({
                url: Conf.apiHost + '/med/page/jp/special/info',
                method: 'GET',
                data: options,
                isNeedLogin: false,
                isFirstScreen: true
            })
                .then(res => {
                    if (res.data) {
                        const {topicModuleList = []} = res.data;
                        topicModuleList.forEach(item => {
                            if (item.moduleKey === 'topicWorldPK' && item.list) {
                                this.list = item.list;
                            }
                            if (item.moduleKey === 'topicVideo' && item.list) {
                                this.videoData = Object.assign(this.videoData, {
                                    poster: item.list[0].image,
                                    video: item.list[0].videoLink,
                                });
                            }
                        });
                        if (process.env.MARS_ENV === 'h5') {
                            shareBdBox(this.shareInfo4Bd);
                        }
                    }
                    res.update.call(this, () => {
                        if (process.env.MARS_ENV === 'swan') {
                            this.$mp.scope.removeSkeleton();
                        }
                        this.isPageRender = true;
                        this.showVideo = true;
                        setTimeout(() => {
                            this.flag = true;
                        }, 100);
                    });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        goPk(item, index, optionsIndex) {
            if (!this.list[index].isChooseOption && this.canClick) {
                this.activeIndex = index;
                this.list[index].isChooseOption = true;
                this.list[index].options[optionsIndex].isChoose = true;
                // 前端处理所有数据
                const total = ++this.list[index].total;
                const options = this.list[index].options;
                options.forEach((item, index) => {
                    if (index === optionsIndex) {
                        ++item.number;
                    }
                    item.percent = (item.number / total * 100).toFixed(2);
                });
                this.list[index].options = options;
                this.canClick = false;
                request({
                    url: Conf.apiHost + '/med/page/jp/special/select',
                    method: 'GET',
                    data: {
                        itemId: item.itemId,
                        option: optionsIndex,
                        type: 0 // 0是PK 1是投票
                    },
                    isNeedLogin: false
                })
                    .then(res => {
                        if (res.data) {
                            this.canClick = true;
                        }
                        ubcSend({
                            type: 'clk',
                            value: 'sjdh_wenda',
                            ext: {
                                value_id: index
                            }
                        });
                    })
                    .catch(err => {
                        this.canClick = true;
                        console.log(err);
                    });
            }
        },
        goDisease(data) {
            navigate({
                url: data.url
            });
            this.pause();
            ubcSend({
                type: 'clk',
                value: 'sjdh_citiaoanniu',
                ext: {
                    value_id: data.text || ''
                }
            });
            this.showVideo = false;
        },
        goYd() {
            navigate({
                url: this.homeurl
            });
            this.pause();
            ubcSend({
                type: 'clk',
                value: 'sjdh_tupianqu',
            });
            this.showVideo = false;
        },
        playVideo() {
            ubcSend({
                type: 'clk',
                value: 'sjdh_shipin',
            });
        },
        navigateHome() {
            navigate({
                url: this.homeurl
            });
            this.pause();
            ubcSend({
                type: 'clk',
                value: 'sjdh_home',
            });
            this.showVideo = false;
        },
        pause() {
            const videoContext = this.$api.createVideoContext('video');
            videoContext.pause();
        }
    }
};
</script>

<style lang="less">
.med-meeting {
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    background: #fed4d5;

    .content {
        padding-bottom: 0.4rem;
        position: relative;
        z-index: 100;
        background: #fed4d5;
        color: #ff4341;
    }

    .head-image {
        width: 100%;
        display: block;
        position: relative;
        z-index: 2;
        margin: .2rem 0 .15rem;

        &.head {
            height: 64.4122vw;
            margin: 0;
        }

        &.shadow {
            height: 12.8825vw;
            margin-top: -.18rem;
            margin-bottom: 0;
        }

        &.tech {
            margin-top: -.2rem;
        }

        &.about {
            margin-top: 0.06rem;
        }
    }

    .gap {
        margin: 0 0.15rem;

        .intro {
            width: 100%;
            display: block;
        }
    }

    .yd-btn {
        // width: 2.42rem;
        // height: .4rem;
        // display: block;
        margin: 0.3rem auto 0;
        display: flex;
        justify-content: center;
    }

    .video-wrap {
        width: 92.7536vw;
        margin: 0 .15rem;
        padding: .11rem 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        position: relative;
        background-image: linear-gradient(180deg, #ff8484 0%, #ff5a5a 100%);
        box-shadow: inset -1px -1px 1px 0 #fe373a, inset 1px 1px 2px 0 rgba(255, 255, 255, 0.83);
        border-radius: .15rem;
        z-index: 3;
        margin-top: -.25rem;

        .video-inner-wrap {
            padding: 6px;
            border-radius: .09rem;
            overflow: hidden;
            background: #fff;
            margin: 0 .1rem;
        }

        .video {
            height: 100%;
            width: 100%;
        }

        .video-stage {
            width: 100%;
            height: 100%;

            .poster {
                width: 100%;
                height: 100%;
            }
        }

        .video-title {
            text-align: center;
            margin: .09rem 0 .07rem;
            display: flex;
            justify-content: center;
        }

        .video-title-image {
            width: 2.49rem;
            height: .25rem;
        }
    }

    .question-wrap {
        margin: 0 0.15rem 0;

        .question {
            position: relative;
            margin-bottom: .44rem;
            z-index: 101;
        }

        .question-top-bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: .54rem;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .question-content-bg {
            position: absolute;
            left: 0;
            right: 0;
            top: .54rem;
            bottom: .32rem;
            background-size: 100% 100%;
            background-repeat: repeat;
        }

        .question-bottom-bg {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -.14rem;
            height: 0.46rem;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .num {
            color: #01e3cc;
            text-align: center;
            padding-top: 0.04rem;
            position: relative;
            z-index: 2;
        }

        .tap-style {
            position: relative;
            z-index: 2;
            padding: 0 9.6618vw;

            &.animation {
                animation: move 1s linear;
            }
        }
        @keyframes move {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .title {
            font-size: 0.2rem;
            padding: 0.57rem 9.6618vw 0;
            color: #ff4341;
            position: relative;
            z-index: 1;
            line-height: .34rem;
            font-weight: bold;
        }

        .btn-wrap {
            margin-top: 0.17rem;
            padding: 0 9.6618vw;
            position: relative;
            z-index: 2;
        }

        .total {
            font-size: .12rem;
            color: #ff4341;
            text-align: center;
            padding: .1rem 0 .24rem;
            position: relative;
            z-index: 1;
        }

        .answer {
            width: 30.5958vw;
            height: 9.4203vw;
            background-size: 100% 100%;
            background-image: url('https://internal-amis-res.cdn.bcebos.com/images/azbzt_weidianjianniu.png');
            background-repeat: no-repeat;
            text-align: center;
            font-size: 0.16rem;
            color: #ff4341;
            line-height: 9.4203vw;
            font-weight: bold;

            &.yes {
                color: #fff;
                background-image: url('https://internal-amis-res.cdn.bcebos.com/images/azbzt_zhengque.png');
            }

            &.no {
                color: #fff;
                background-image: url('https://internal-amis-res.cdn.bcebos.com/images/azbzt_cuowu.png');
            }
        }

        .process-wrap {
            padding-top: 0.14rem;
        }

        .process {
            position: relative;
            width: 100%;
            height: 0.09rem;
            background-image: linear-gradient(180deg, #b5b5b5 31%, #edecec 68%);
            box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.5);
            border-radius: 24px;
        }

        .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;
                    animation: aw 1s ease-in-out;
                    animation-fill-mode: forwards;
                    background-image: linear-gradient(180deg, #f78c8c 2%, #ef5a62 98%);
                    box-shadow: 0 1px 2px 0 rgba(133, 133, 133, 0.50), inset 0 3px 4px 0 #ffb7b7;
                }
            }

            &.yes {
                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    border-radius: 24px;
                    content: '';
                    display: block;
                    z-index: 2;
                    animation: aw 1s ease-in-out;
                    animation-fill-mode: forwards;
                    background-image: linear-gradient(180deg, #32e0c5 2%, #06c7bd 98%);
                    box-shadow: 0 1px 2px 0 rgba(133, 133, 133, 0.50), inset 0 3px 4px 0 #61effd;
                }
            }
        }
        @keyframes aw {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        .person-num {
            color: #ff5151;
            display: flex;
            justify-content: space-between;
            font-size: 0.12rem;
            line-height: 0.17rem;
            padding-top: 0.06rem;
            padding-bottom: 0.14rem;
        }

        .doctor-wrap {
            display: flex;
            height: 0.39rem;
        }

        .doctor {
            width: 0.39rem;
            height: 0.39rem;
            border-radius: 50%;
            overflow: hidden;
        }

        .doctor-text {
            font-size: 0.16rem;
            padding-left: 0.06rem;
            line-height: 0.39rem;
            color: #736565;
        }

        .explain-wrap {
            padding: 0.15rem 0;
        }

        .explain {
            padding: .1rem;
            position: relative;
            background: #fed4d5;
            border-radius: 0.1rem;
            box-sizing: border-box;

            &::before {
                content: '';
                width: 0;
                height: 0;
                border-left: 0.08rem solid transparent;
                border-right: 0.08rem solid transparent;
                border-bottom: 0.08rem solid #fed4d5;
                position: absolute;
                top: -0.07rem;
                left: 0.08rem;
            }
        }

        .explain-image {
            width: 100%;
            display: block;
            border-radius: .06rem;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }

    .teach-warp {
        position: relative;
        z-index: 3;
    }

    .teach-item {
        display: flex;
        justify-content: space-between;
        padding: 0 0.15rem;
        flex-wrap: wrap;

        .btn-img-three {
            width: 29.9517vw;
            height: 9.4202vw;
            margin-bottom: 0.17rem;
        }

        .btn-img-two {
            width: 45.1691vw;
            height: 9.4202vw;
            margin-bottom: 0.14rem;
        }
    }
}
</style>
