<template>
    <view>
        <!-- 规则弹窗 -->
        <c-popup
            row-tile
            show-title-line
            :show="isShow"
            :z-index="'921'"
            :show-close="true"
            :show-close-handler="false"
            max-height="80.3%"
            height="80.3%"
            :title="'活动规则'"
            border-radius="12px"
            close-icon="close-circle"
            class="rule-popup"
            stop-scroll-through
            @close="handlePopupClose"
            @masktap="handlePopupClose"
        >
            <view class="rule__wrap">
                <!-- 规则内容 -->
                <view v-if="data" class="rule__content">
                    <view v-for="item in data" :key="item">
                        {{ item }}
                    </view>
                </view>

                <!-- 投诉反馈 -->
                <view
                    v-if="feedback"
                    class="rule__operation"
                    @tap="handleLink"
                >
                    {{ feedback && feedback.text }}
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import {navigate} from '@utils/navigate';
/**
 * @file: 活动组件，含操作
 * @author: xueyanhui
 * @categories: 业务组件
 * @tags: [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup
    },
    data() {
        return {};
    },
    props: {
        /**
         * 是否显示
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 数据 数组形式
         */
        data: {
            type: Array,
            default: () => []
        },
        /**
         * 链接 投诉反馈
         */
        feedback: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 弹窗关闭
             */
            this.$emit('handleRulePopupClose');
        },
        /**
         * @fun 点击交互操作
         */
        handleLink() {
            this.$emit('handleRulePopupClose');
            navigate({
                url: this.feedback && this.feedback.url
            });
        }
    }
};
</script>
<style lang="less" scoped>
.rule {
    &__wrap {
        padding: 0.2rem 4vw;
        line-height: 24px;
        font-size: 14px;
        color: #333;
    }
    &__operation {
        text-decoration: underline;
        display: block;
        text-align: center;
        color:#000;
        margin: 0.3rem 0;
    }
}
.img-background {
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
</style>
