<template>
    <c-popup
        show-title-line
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="80%"
        height="80%"
        :title="data.title"
        border-radius="12px"
        close-icon="close-circle"
        class="rule-popup"
        scroll-view
        stop-scroll-through
        :btns="btns"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <!-- 描述 -->
        <view v-if="data.desc" class="rule-desc c-color-title c-font-15 c-gap-bottom-large">
            {{ data.desc }}
        </view>
        <view v-if="data.allRulesList && data.allRulesList.length" class="rule-wrap">
            <view
                v-for="(rule, index) in data.allRulesList"
                :key="'rule' + index"
                class="rule-item"
            >
                <view v-if="rule.date && rule.date.length" class="rule-item-left c-font-normal c-color-gray">
                    <view
                        v-for="(date, i) in rule.date"
                        :key="'date' + i"
                    >
                        {{ date }}
                    </view>
                </view>
                <view class="rule-item-center">
                    <view 
                        class="rule-item-center__circle"
                        :class="{'rule-item-center__circle__selected': data.allRulesStatus >= index}"
                        :style="data.allRulesStatus >= index ? circleActStyle : circleNormalStyle"
                    >
                        <c-icon
                            v-if="data.allRulesStatus >= index"
                            name="check"
                            font-size="10px"
                        />
                    </view>
                    <view :class="index < data.allRulesList.length - 1 ? 'rule-item-center__line' : ''"/>
                </view>
                <view class="rule-item-right">
                    <view class="c-font-normal rule-item-right__operate c-gap-inner-left c-gap-inner-right">{{ rule.operate }}</view>
                    <view class="c-font-medium-less c-color-title rule-item-right__desc">{{ rule.desc }}</view>
                </view>
            </view>
        </view>
        <view v-if="data.allRulesContent && data.allRulesContent.length" class="rule-wrap c-gap-inner-bottom-large">
            <view
                v-for="(con, index) in data.allRulesContent"
                :key="'con' + index"
            >
                <view v-if="con.subTitle" class="rule-title__sub c-color-title c-gap-bottom">{{ con.subTitle }}</view>
                <view
                    v-if="con.subContent && con.subContent.length"
                >
                    <view
                        v-for="(sub, i) in con.subContent"
                        :key="'sub' + i"
                        class="c-font-15 c-color-title"
                    >{{ sub }}</view>
                </view>
            </view>
        </view>
    </c-popup>
</template>

<script>
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

/**
 * @file 规则弹窗
 * @author zhangqian51
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        CPopup,
        CIcon
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            btns: [{
                text: '我知道了',
                type: 'primary',
                color: '#FD503E'
            }]
        };
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 数据
         */
        data: {
            'type': Object,
            'default': () => {}
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': ''
        },
        /** 圆圈默认状态 */
        circleNormalStyle: {
            type: Object,
            default: () => {
                return {
                    'background-color': '#e0e0e0'
                };
            }
        },
        /** 圆圈激活状态 */
        circleActStyle: {
            type: Object,
            default: () => {
                return {
                    'background-color': '#FD503E'
                };
            }
        }
    },
    computed: {
    },
    created() {
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onClose');
        },
    }
};
</script>
<style lang="less" scoped>
.rule {
    &-popup {

    }
    &-wrap {

    }
    &-desc {
        margin-top: .18rem;
    }
    &-item {
        display: flex;
        &-left {
            width: .6rem;
            word-break: break-all;
            flex-shrink: 0;
            text-align: right;
        }
        &-center {
            padding: 3px 10px 0 6px;
            position: relative;
            &__circle {
                position: relative;
                z-index: 10;
                margin: 0 auto;
                width: 16px;
                height: 16px;
                background: #E0E0E0;
                border-radius: 50%;
                color: #fff;
                font-weight: bold;
                text-align: center;
                line-height: 16px;
                box-sizing: border-box;
            }
            &__line {
                width: 1px;
                height: 100%;
                background: #ddd;
                position: absolute;
                left: 14px;
            }
        }
        &-right {
            &__operate {
                background: #FD503E;
                color: #fff;
                display: inline-block;
                border-radius: .11rem;
            }
            &__desc {
                line-height: .21rem;
                padding: .12rem 0;
            }
        }
    }
    &-title__sub {
        font-size: .18rem;
        font-weight: 600;
    }
}
</style>
