<template>
    <view>
        <view class="guarantee-card">
            <view class="guarantee-card-info">
                <image v-if="item.sloganIcon" :src="item.sloganIcon" class="guarantee-card-sloganicon" mode="widthFix"/>
                <view class="guarantee-card-question" v-if="item.question">{{item.question}}</view>
            </view>
            <view v-if="item.btns && item.btns.length > 0" class="guarantee-card-btns c-gap-top">
                <view 
                    v-for="btn in item.btns" 
                    :class="['guarantee-card-btn c-gap-left', selected === btn.text ? 'guarantee-card-btnselected' : 'guarantee-card-btnnormal']"
                    :style="{'background': selected === btn.text && btn.selectedColor ? btn.selectedColor : '#ffffff'}"
                    @tap="onBtnTap(btn)">
                    {{btn.text}}
                </view>
            </view>
        </view>
        <view v-if="descs && descs.length > 0" class="guarantee-card-desc" id="im-guarantee-card-desc">
            <view v-for="desc in descs" class="c-inline" @tap="onDescTap(desc)" :style="{'color': desc.color ? desc.color : '#999999'}">
                {{desc.text}}
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-用户权益保障-及时性调查
* @author huanghongwei
* @categories 业务组件
* @tags [component]
*/
import {request} from '../../utils/request';
import * as core from '../../utils/core';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 参数
        */
        item: {
            'type': Object,
            'default': {}
        }
    },
    data() {
        return {
            selected: '',
            descs: []
        };
    },
    mounted() {
        if (this.item.selected && this.item.btns && this.item.btns.length > 0) {
            this.selected = this.item.selected;
            this.item.btns.forEach(element => {
                if (element.text && element.resultContent
                && element.resultContent.length > 0 && this.item.selected === element.text) {
                    this.descs = element.resultContent;
                }
            });
        }
    },
    methods: {
        onBtnTap: core.throttle(function (btn) {
            if (this.selected) {
                // 已有选中的
                return;
            }
            if (btn.callbackUrl) {
                request({
                    url: btn.callbackUrl,
                    method: 'GET',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(res => {
                    if (res.data) {
                        this.selected = btn.text;
                        this.descs = btn.resultContent || [];
                        /**
                         * 滚动到新增的附加信息处
                        */
                        this.$emit('popup', {'type': 'scrollToView', 'pos': 'im-guarantee-card-desc'});
                    }
                });
            }
        }, 1 * 2000),
        onDescTap(item) {
            if (item.popupInfo) {
                /**
                 * 弹出弹窗
                */
                this.$emit('popup', item);
            }
        }
    }
};
</script>

<style lang="less" scoped>
.guarantee-card {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    &-info {
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        color: #555555;
        letter-spacing: 0;
    }
    &-question {
        margin-top: 8px;
        font-size: 16px;
        color: #333333;
        line-height: 16px;
    }
    &-btn {
        width: 70px;
        height: 28px;
        border-radius: 19px;
        line-height: 28px;
        text-align: center;
    }
    &-btnselected {
        color: #FFFFFF;
    }
    &-btnnormal {
        background: #FFFFFF;
        border: 1px solid #F1F1F1;
    }
    &-btns {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &-sloganicon {
        margin-top: 2px;
        width: 90px;
        height: 11px;
    }
    &-desc {
        margin-top: 18px;
        padding: 10px 12px;
        background: #ececec;
        border-radius: 10px;
        font-size: 13px;
    }
}
</style>
