<template>
    <view class="refute-rumour-card">
        <view :class="!hasCenterTitle ? 'refute-rumour-card-position' : ''">
            <view class="refute-rumour-card-header">
                <view class="refute-rumour-card-header-left">
                    <view
                        class="c-gap-right-small"
                    >
                        <c-image
                            v-if="iconUrl"
                            has-compress
                            :src="iconUrl"
                            width=".17rem"
                            height=".17rem"
                            :extra="{
                                column: 1
                            }"
                            :is-round="false"
                            :hack-white-stroke="false"
                        />
                    </view>
                    <text>{{ cardData.title }}</text>
                </view>
                <b-navigate
                    v-if="hasCenterTitle"
                    :url="cardData.right_url"
                    class="refute-rumour-card-header-right"
                    :extra="{
                        mod: 'answer-center'
                    }"
                >
                    <image
                        v-if="iconUrl2"
                        :src="iconUrl2"
                        class="card-icon c-gap-right-small"
                        style="vertical-align: middle;"
                        lazy-load
                    />
                    <text>{{ cardData.right_text }}</text>
                </b-navigate>
            </view>
            <view
                v-if="cardData.list"
                class="refute-rumour-card-wrap"
            >
                <swiper
                    :current="swiperIndex"
                    :style="{
                        height: '210px'
                    }"
                    @change="swiperChange"
                >
                    <swiper-item
                        v-for="(answerCard, index) in cardData.list"
                        :key="index"
                    >
                        <view class="refute-rumour-card-content">
                            <view>
                                <view
                                    class="refute-rumour-card-content-title"
                                    :class="answerCard.result ? 'c-line-clamp1' : 'c-line-clamp2'"
                                >{{ answerCard.title }}
                                </view>
                                <view
                                    v-if="!answerCard.result"
                                    class="refute-rumour-card-content-answer"
                                >
                                    <!-- eslint-disable max-len -->
                                    <view
                                        class="refute-rumour-card-content-answer-block refute-rumour-card-content-answer-true c-gap-right"
                                        @tap="chooseTap(index, 1)"
                                    >
                                        <c-icon
                                            name="like"
                                            font-size="14px"
                                            class="c-gap-right"
                                        />
                                        <text>真的</text>
                                    </view>
                                    <view
                                        class="refute-rumour-card-content-answer-block refute-rumour-card-content-answer-false"
                                        @tap="chooseTap(index, 2)"
                                    >
                                        <c-icon
                                            name="dislike"
                                            font-size="14px"
                                            class="c-gap-right"
                                        />
                                        <text>假的</text>
                                    </view>
                                    <!-- eslint-enable max-len -->
                                </view>
                                <view
                                    v-if="answerCard.result"
                                    class="refute-rumour-card-content-result"
                                >
                                    <view
                                        class="result"
                                        :style="{
                                            color: answerCard.result.key === '0' ? '#00C8C8' : '#FF7D00'
                                        }"
                                    >
                                        {{ answerCard.result.title }}
                                    </view>
                                    <b-navigate
                                        :url="answerCard.url"
                                        :extra="{
                                            mod: 'check-truth' + index
                                        }"
                                    >
                                        <view class="check-truth">
                                            <image
                                                v-if="iconUrl3"
                                                :src="iconUrl3"
                                                class="card-icon c-gap-right-small"
                                            />
                                            <text>查看真相</text>
                                        </view>
                                    </b-navigate>

                                    <view class="refute-rumour-card-content-choose-wrap">
                                        <view class="refute-rumour-card-content-choose">
                                            <view
                                                class="refute-rumour-card-content-choose-true"
                                                :style="{
                                                    width: answerCard.info[0].str_percent
                                                }"
                                            >
                                                <view
                                                    class="refute-rumour-card-content-choose-true-bar"
                                                    :class="answerCard.info[0].percent === '1'
                                                        ? 'refute-rumour-card-content-choose-true-bar-radius' : ''"
                                                >
                                                    <view
                                                        v-if="answerCard.info[0].percent !== '1'"
                                                        class="triangle"
                                                    ></view>
                                                </view>
                                            </view>
                                            <view
                                                class="refute-rumour-card-content-choose-false"
                                                :style="{
                                                    width: answerCard.info[1].str_percent
                                                }"
                                            >
                                                <view
                                                    class="refute-rumour-card-content-choose-false-bar"
                                                    :class="answerCard.info[1].percent === '1'
                                                        ? 'refute-rumour-card-content-choose-false-bar-radius' : ''"
                                                >
                                                    <view
                                                        v-if="answerCard.info[1].percent !== '1'"
                                                        class="triangle"
                                                    ></view>
                                                </view>
                                            </view>
                                        </view>
                                        <view class="refute-rumour-card-content-choose">
                                            <view class="true-text">{{ answerCard.info[0].title }}</view>
                                            <view class="false-text">{{ answerCard.info[1].title }}</view>
                                        </view>
                                        <view class="refute-rumour-card-content-choose">
                                            <view
                                                class="percent-choose-true"
                                            >{{ answerCard.info[0].str_percent }}人选择</view>
                                            <view
                                                class="percent-choose-false"
                                            >{{ answerCard.info[1].str_percent }}人选择</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
                <view
                    v-if="swiperIndex !== 0"
                    class="previous"
                    @tap="previousTap"
                >
                    <c-icon
                        name="left"
                        font-size="24px"
                        class="c-gap-right"
                    />
                </view>
                <view
                    v-if="cardData.list && cardData.list.length && swiperIndex !== cardData.list.length - 1"
                    class="next"
                    @tap="nextTap"
                >
                    <c-icon
                        name="right"
                        font-size="24px"
                        class="c-gap-right"
                    />
                </view>
            </view>
            <view
                v-if="!cardData.list && cardData.result"
                class="refute-rumour-card-content"
            >
                <view class="answer-result">
                    <view class="answer-result-img">
                        <c-image
                            has-compress
                            :src="cardData.result.img"
                            width=".4rem"
                            height="auto"
                            mode="widthFix"
                            :extra="{column: 2}"
                        />
                    </view>
                    <view class="answer-result-detail">{{ cardData.result.result }}</view>
                    <view class="answer-result-conclusion">{{ cardData.result.text }}</view>
                    <view class="answer-result-link">
                        <view
                            class="answer-result-link-btn"
                            @tap="onTapShare(cardData.result.rec_img)"
                        >
                            邀请好友答题
                        </view>
                        <b-navigate
                            v-if="hasCenterTitle"
                            :url="cardData.result.more_url"
                            :extra="{
                                mod: 'refute-rumour-more'
                            }"
                        >
                            <view class="answer-result-link-btn">更多辟谣知识</view>
                        </b-navigate>
                        <view
                            v-else
                            class="answer-result-link-btn"
                            @tap="onTapMore"
                        >更多辟谣知识</view>
                    </view>
                    <view class="question-update">{{ cardData.buttom_text }}</view>
                </view>
            </view>
        </view>
        <!-- h5分享 -->
        <template-mars target="h5">
            <share-img
                v-if="isShareOpen"
                :src="shareImg"
                @close="onCloseShare"
            />
        </template-mars>
    </view>
</template>

<script>
/**
 * @author xuyong08
 * @file 辟谣答题中心卡片
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
// import Image from '../../components/common/image';
import Navigate from '../../components/common/navigate';
import ShareImg from '../../components/common/share-img';
import * as Conf from '../../utils/conf';
import {request} from '../../utils/request';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import CImage from '@components/common/image';


export default {
    config: {
        component: true
    },
    components: {
        'c-icon': Icon,
        // 'c-img': Image,
        'b-navigate': Navigate,
        'share-img': ShareImg,
        CImage
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        answerResult: {
            type: Boolean,
            default: false
        },
        hasCenterTitle: {
            type: Boolean,
            default: true
        },
        shareBtn: {
            type: Boolean,
            default: true
        }
    },
    created() {
        const systemInfo = getSystemInfo();
        this.isIphoneX = systemInfo.model.search('iPhone X') !== -1;
    },
    data() {
        return {
            isIphoneX: false,
            env: process.env.MARS_ENV,
            iconUrl: 'https://medical-kg.cdn.bcebos.com/boutique%2Frumor%2F%E8%BE%9F%E8%B0%A3icon.png',
            iconUrl2: 'https://medical-kg.cdn.bcebos.com/boutique%2Frumor%2F%E8%A7%A3%E7%AD%94icon.png',
            iconUrl3: 'https://medical-kg.cdn.bcebos.com/boutique%2Frumor%2F%E7%9C%9F%E7%9B%B8icon.png',
            cardData: {},
            hasCenter: true,
            swiperIndex: 0,
            apiUrl: '/med/page/jp/rumor/votecenter',
            isShareOpen: false
        };
    },
    watch: {
        data(val) {
            this.cardData = this.data;
            if (this.cardData.list) {
                for (let i = 0; i < this.data.list.length; i++) {
                    if (this.data.list[i].selected) {
                        this.swiperIndex = i;
                    }
                }
            }
        }

    },
    mounted() {
        this.cardData = this.data;
        if (this.cardData.list) {
            for (let i = 0; i < this.data.list.length; i++) {
                if (this.data.list[i].selected) {
                    this.swiperIndex = i;
                }
            }
        }
    },
    methods: {

        // 滑动切换
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },

        // 切换上一个
        previousTap() {
            this.swiperIndex--;
        },

        // 切换下一个
        nextTap() {
            this.swiperIndex++;
        },

        // 选择答案
        chooseTap(index, type) {
            let url = type === 1 ? this.cardData.list[index].true_url : this.cardData.list[index].false_url;
            this.getResult(url, index);
        },

        // 选择请求结果接口
        getResult(url, index) {
            request({
                url: url,
                method: 'GET',
                data: Object.assign({}, {
                }),
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(res => {
                    let data = res && res.data && res.data.data;
                    let cardItem = Object.assign(
                        this.cardData.list[index],
                        {result: data.result, info: data.info, url: data.url}
                    );
                    this.cardData.list.splice(index, 1, cardItem);
                    this.count(this.cardData.list);
                }).catch(err => {
                    console.log(err);
                });
        },

        count(arr) {
            let num = 0;
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].result) {
                    num++;
                }
            }
            if (num === arr.length) {
                setTimeout(() => {
                    this.getData();
                }, 2000);
            }
        },

        getData() {
            request({
                url: Conf.apiHost + this.apiUrl,
                method: 'GET',
                data: {},
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(res => {
                    let data = res && res.data && res.data.data;
                    this.cardData = data.vote_view && data.vote_view;
                }).catch(err => {
                    console.log(err);
                });
        },

        onTapShare(shareImg) {
            if (process.env.MARS_ENV === 'swan') {
                this.$api.openShare({
                    title: '百度健康•辟谣答题',
                    content: '参与辟谣知识问答，争做答题小能手！',
                    path: '',
                    imageUrl: '',
                    shareUrl: '',
                    success: () => {

                    }
                });
            }
            else if (process.env.MARS_ENV === 'h5') {
                this.shareImg = shareImg;
                this.isShareOpen = true;
            }
        },

        onCloseShare() {
            this.isShareOpen = false;
        },

        onTapMore() {
            const query = this.$api.createSelectorQuery().select('#recommendWrap');
            query.boundingClientRect(rect => {
                let top = rect.top || 0;
                if (this.isIphoneX && this.env === 'swan') {
                    top = top - 88;
                }
                else {
                    top = top - 60;
                }
                this.$api.pageScrollTo({
                    scrollTop: top,
                    duration: 300
                });
            })
                .exec();
        }
    }
};
</script>
<style lang="less" scoped>
.refute-rumour-card {
    &-position {
        position: absolute;
        left: 50%;
        bottom: 15px;
        transform: translateX(-50%);
        width: calc(100% - 34px);
        background: #fff;
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0 3px 17px 0 rgba(0, 0, 0, .08);
    }

    &-header {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px 0 20px;
        border-bottom: 1px solid #f1f1f1;

        &-left {
            display: flex;
            align-items: center;
            color: #555;
            font-size: 14px;
        }

        &-right {
            display: flex;
            align-items: center;
            color: #00c8c8;
            font-size: 14px;
        }

        .card-icon {
            width: 17px;
            height: 17px;
        }
    }

    &-wrap {
        position: relative;

        .previous {
            position: absolute;
            left: 20px;
            top: 45%;
            color: #ccc;
        }

        .next {
            position: absolute;
            right: 20px;
            top: 45%;
            color: #ccc;
        }
    }

    &-content {
        position: relative;
        height: 210px;

        &-title {
            padding: 14px 20px 0 20px;
            font-size: 24px;
            font-family: 'PingFang-SC-Medium';
            line-height: 30px;
            color: #333;
        }

        &-result {
            .result {
                font-family: 'PingFang-SC-Medium';
                font-size: 17px;
                font-weight: 500;
                color: #00c8c8;
                letter-spacing: 0;
                line-height: 47px;
                text-align: center;
            }

            .check-truth {
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
                line-height: 28px;
                font-family: 'PingFang-SC-Regular';
                color: #555;
                background: #f8f8f8;
                margin: 0 auto 15px;
                border-radius: 14px;
            }
        }

        &-answer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: absolute;
            bottom: 35px;
            left: 0;

            &-block {
                width: 150px;
                height: 36px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                color: #fff;
                font-size: 14px;
            }

            &-true {
                background-image: linear-gradient(-134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
            }

            &-false {
                background-image: linear-gradient(-134deg, #ffa500 0%, #ffbc10 55%, #ffd36c 100%);
            }
        }

        &-choose-wrap {
            padding: 0 17px;
        }

        &-choose {
            display: flex;
            justify-content: space-between;

            &-true {
                &-bar {
                    position: relative;
                    width: 100%;
                    height: 15px;
                    background-image: linear-gradient(-134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
                    border-radius: 7.5px 0 0 7.5px;

                    .triangle {
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 0;
                        height: 0;
                        border-color: #fff transparent;
                        border-width: 0 0 15px 6px;
                        border-style: solid;
                    }
                }

                &-bar-radius {
                    border-radius: 7.5px;
                }
            }

            &-false {
                &-bar {
                    position: relative;
                    width: 100%;
                    height: 15px;
                    background-image: linear-gradient(-134deg, #ffa500 0%, #ffbc10 55%, #ffd36c 100%);
                    border-radius: 0 7.5px 7.5px 0;

                    .triangle {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 0;
                        height: 0;
                        border-color: #fff transparent;
                        border-width: 15px 6px 0 0;
                        border-style: solid;
                    }
                }

                &-bar-radius {
                    border-radius: 7.5px;
                }
            }

            .true-text {
                color: #00c8c8;
                font-size: 14px;
                line-height: 34px;
            }

            .percent-choose-true {
                font-size: 13px;
                color: #999;
                line-height: 13px;
            }

            .false-text {
                color: #ff7d00;
                font-size: 14px;
                line-height: 34px;
                text-align: right;
            }

            .percent-choose-false {
                font-size: 13px;
                color: #999;
                line-height: 13px;
                text-align: right;
            }
        }

        .answer-result {
            padding-top: 23px;

            &-img {
                display: flex;
                justify-content: center;

                .img-show {
                    width: 40px;
                    height: auto;
                }
            }

            &-detail {
                font-size: 19px;
                line-height: 36px;
                color: #333;
                text-align: center;
            }

            &-conclusion {
                font-size: 13px;
                line-height: 26px;
                text-align: center;
                color: #999;
                margin-bottom: 8px;
            }

            &-link {
                display: flex;
                justify-content: center;

                &-btn {
                    font-size: 13px;
                    color: #fff;
                    padding: 13px 34px;
                    background-image: linear-gradient(-134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
                    text-align: center;
                    margin: 0 5px;
                    border-radius: 30px;
                    line-height: 13px;
                }
            }

            .question-update {
                font-size: 12px;
                color: #999;
                line-height: 32px;
                text-align: center;
            }
        }
    }

    .card-icon {
        width: 17px;
        height: 17px;
    }
}
</style>
