<template>
    <view>
        <!-- 规则弹窗 -->
        <c-popup
            row-tile
            :show="isShow"
            :z-index="'921'"
            :show-close="true"
            :show-close-handler="false"
            max-height="80.3vh"
            height="80.3vh"
            :title="'活动规则'"
            :title-style="{color: '#1f1f1f', fontSize: '0.18rem', lineHeight: '0.26rem'}"
            border-radius="0.21rem"
            close-icon="guanbi"
            class="rule-popup"
            stop-scroll-through
            @close="handlePopupClose"
            @masktap="handlePopupClose"
        >
            <view class="rule__wrap swan-security-padding-bottom">
                <!-- 规则时间 -->
                <view v-if="data.actDate" class="rule__date">
                    <view class="rule__date__title">{{ data.actDate.title }}</view>
                    <view class="rule__date__timeline">{{ data.actDate.timeline }}</view>
                </view>
                <!-- 规则内容 -->
                <view v-if="data.list" class="rule__cont">
                    <view
                        v-for="(item, index) in data.list"
                        :key="index"
                        :style="{
                            color: item.color ? item.color : 'inherit',
                        }"
                        :class="'rule__' + item.type"
                    >
                        <text v-if="item.text">{{ item.text }}</text>
                        <view v-else-if="item.texts">
                            <view v-for="(text, index) in item.texts" :key="index">{{ text }}</view>
                        </view>
                    </view>
                </view>
                <!-- 投诉反馈 -->
                <c-navigate
                    v-if="feedbackUrl"
                    :url="feedbackUrl"
                    url-type="2"
                >
                    <view class="rule__feedback c-gap-inner-bottom">投诉反馈</view>
                </c-navigate>
            </view>
        </c-popup>
    </view>
</template>

<script>
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';
/**
 * @file 运营顶部button
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup,
        CNavigate
    },
    data() {
        return {};
    },
    props: {
        /**
         * 是否显示
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        feedbackUrl: {
            type: String,
            default: ''
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 弹窗关闭
             */
            this.$emit('handleRulePopupClose');
        }
    }
};
</script>
<style lang="less" scoped>
.rule {
    &__wrap {
        padding: 0 6.5vw;
        line-height: 21px;
        font-size: 14px;
        color: #666;
    }

    &__date {
        padding-top: 22px;

        &__title {
            color: #333;
            font-weight: bold;
        }
    }

    &__cont {
        margin-top: 20px;
    }

    &__title {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 10px;
        color: #333;
        font-weight: bold;
    }

    &__text {
        margin-bottom: 22px;
    }

    &__feedback {
        text-decoration: underline;
        text-align: center;
    }
}

.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
</style>
