<template>
    <view>
        <!-- 规则弹窗 -->
        <c-popup
            row-tile
            scroll-view
            :show="isShow"
            :z-index="'921'"
            :show-close="true"
            :show-close-handler="false"
            max-height="56.84%"
            height="56.84%"
            :title="title"
            border-radius="12px"
            close-icon="close-circle"
            class="award-popup"
            stop-scroll-through
            @close="handlePopupClose"
            @masktap="handlePopupClose"
        >
            <view v-if="popupType === 'award' && data && data.notice" class="award__tips">
                <!-- <c-icon v-if="data.notice.icon" :name="data.notice.icon" color="#FF6050" font-size="12px" /> -->
                <c-icon
                    name="tip"
                    color="#FF6050"
                    font-size="14px"
                    class="icon"
                />
                {{ data.notice.text }}
            </view>
            <view v-if="popupType === 'award'" class="award__wrap">
                <view v-if="(data && data.tips) || (data && data.amount)" class="award__banner">
                    <view v-if="data && data.tips" class="award__banner__left">
                        <text class="text">{{ data.tips.text }}</text>
                        <c-icon
                            v-if="data.tips.icon"
                            :name="data.tips.icon"
                            @tap="handleShowTips('awardTip')"
                        />
                        <c-icon
                            v-else
                            name="question-circle"
                            @tap="handleShowTips('awardTip')"
                        />
                    </view>
                    <view v-if="data && data.amount">
                        <text class="unit">{{ data.amount.unit }}</text>
                        <text class="num">{{ data.amount.num }}</text>
                    </view>
                </view>
                <template v-if="data && data.tips && data.tips.recordList && data.tips.recordList.length > 0">
                    <view
                        v-for="(item, i) in data.tips.recordList"
                        :key="i"
                        class="award__list"
                    >
                        <view class="award__list__left">
                            <image class="award__list__img" :src="item.img"/>
                            <view class="award__list__name">{{ item.name }}</view>
                            <view v-if="!!item.isNewUser" class="award__list__new-user">新用户</view>
                        </view>
                        <view class="award__list__status">{{ item.status }}</view>
                        <view class="award__list__price">
                            <text class="num">{{ item.amount }}</text>
                        </view>
                    </view>
                </template>
                <view v-else class="no-content fighting">
                    <image
                        class="no-content__img fighting"
                        src="https://med-fe.cdn.bcebos.com/act/fission/no-content__img.png"
                    />
                    <view class="no-content__text">还没有成功邀请到好友～</view>
                </view>
            </view>
            <view v-if="popupType === 'withdraw'" class="withdraw__wrap">
                <view class="withdraw__banner">
                    <view v-if="data && data.amount">
                        <text class="unit">{{ data.amount.unit }}</text>
                        <text class="num">{{ data.amount.num }}</text>
                    </view>
                    <view v-if="data && data.btnGroup" class="btn-group">
                        <view
                            v-for="(btn, i) in data.btnGroup"
                            :key="btn && btn.text"
                            class="btn"
                            :class="btn.status ? 'btn--' + i : 'btn--' + i + ' btn--' + i + '--disabled'"
                            @tap="handlePoint(btn, i)"
                        >
                            {{ btn.text }}
                        </view>
                    </view>
                    <view v-if="data && data.tips" class="award__banner__left">
                        <c-icon
                            v-if="data.tips.icon"
                            :name="data.tips.icon"
                            @tap="handleShowTips('withdrawTip')"
                        />
                        <c-icon
                            v-else
                            name="question-circle"
                            @tap="handleShowTips('withdrawTip')"
                        />
                        <text class="text">{{ data.tips.text }}</text>
                    </view>
                </view>
                <template v-if="data && data.recordList && data.recordList.length > 0">
                    <view
                        v-for="(item, i) in data.recordList"
                        :key="i"
                        class="withdraw__list"
                    >
                        <view class="withdraw__list__left">
                            <view class="withdraw__list__text">{{ item.date }}</view>
                            <view v-if="!!item.isNewUser" class="award__list__new-user">新用户</view>
                        </view>
                        <view class="withdraw__list__status">{{ item.status }}</view>
                        <view class="withdraw__list__amount">
                            {{ item.amount }}
                        </view>
                    </view>
                </template>
                <view v-else class="no-content sad">
                    <image class="no-content__img sad" src="https://med-fe.cdn.bcebos.com/act/fission/no-content.png"/>
                    <view class="no-content__text">还没有提现记录～</view>
                </view>
            </view>
        </c-popup>
    </view>
</template>

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

/**
 * @file 运营预估收益
 * @author xueyanhui
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup,
        CIcon
    },
    data() {
        return {};
    },
    props: {
        /**
         * 哪个弹窗 award:预估收益  withdraw:提现
         */
        popupType: {
            type: String,
            default: ''
        },
        /**
         * 是否显示
         */
        isShow: {
            type: Boolean,
            default: false
        },
        /**
         * 标题
         */
        title: {
            type: String,
            default: ''
        },
        /**
         * 数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 弹窗关闭
             */
            this.$emit('handleAwardPopupClose');
        },
        handleShowTips() {
            /**
             * 弹窗关闭，展示tips
             */
            this.$emit('handleShowTips');
        },
        handlePoint(btn, i) {
            if (!btn.status) {
                this.$api.showToast({title: i === 0 ? '≥50元可提现' : '≥8元可兑券', icon: 'none'});
            }
            btn.status && this.$emit('handlePoint', btn);
        }
    }
};
</script>
<style lang="less" scoped>
.award-popup {
    .award {
        &__wrap {
            padding: 0 0.1rem;
            line-height: 21px;
            font-size: 14px;
            color: #666666;
            box-sizing: border-box;
        }

        &__tips {
            display: flex;
            height: 0.32rem;
            line-height: 0.32rem;
            background: #fff4f3;
            color: #ff6161;
            font-size: 0.14rem;
            padding: 0 0.1rem;
            box-sizing: border-box;
            .icon {
                margin-right: 0.06rem;
            }
        }

        &__banner {
            height: 0.59rem;
            display: flex;
            background-image: linear-gradient(125deg, #ff754f 0%, #fb4556 100%);
            border-radius: 0.1rem 0.1rem 0.08rem 0.08rem;
            font-size: 0.14rem;
            align-items: center;
            padding: 0 0.15rem;
            margin-top: 0.1rem;
            color: #ffffff;
            justify-content: space-between;
            &__left {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .unit {
                font-size: 0.15rem;
                margin-right: 0.05rem;
                font-weight: 600;
            }

            .num {
                font-size: 0.24rem;
                font-weight: 600;
            }

            .text {
                margin-right: 0.04rem;
            }
        }

        &__list {
            display: flex;
            justify-content: space-between;
            height: 0.72rem;
            align-items: center;
            margin: 0 0.13rem;
            box-sizing: border-box;

            &:not(:last-child) {
                border-bottom: 0.007rem solid #eee;
            }

            &__left {
                display: flex;
                width: 1.8rem;
                align-items: center;
            }

            &__status {
                width: 0.7rem;
            }
            &__price {
                width: 0.6rem;
                text-align: center;
            }

            &__img {
                width: 0.35rem;
                height: 0.35rem;
                border-radius: 0.35rem;
                border: 0.01rem solid rgba(0, 0, 0, 0.1);
                margin-right: 0.06rem;
            }

            &__name {
                word-break: break-all;
                overflow: hidden;
                width: 1.08rem;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            &__new-user {
                width: 0.47rem;
                height: 0.16rem;
                line-height: 0.16rem;
                background: #fd503e;
                border-radius: 0.08rem;
                color: #fff;
                text-align: center;
                font-size: 0.12rem;
            }
        }
    }

    .withdraw {
        &__banner {
            background-image: linear-gradient(-45deg, #ff6050 100%, #fe7c6c 100%);
            border-radius: 0.1rem 0.1rem 0.08rem 0.08rem;
            font-size: 0.14rem;
            padding: 0.2rem 0.15rem;
            color: #ffffff;
            box-sizing: border-box;
            margin: 0.2rem 0.1rem 0.1rem 0.1rem;
            text-align: center;
            .btn-group {
                display: flex;
                justify-content: center;
                .btn {
                    width: 0.88rem;
                    height: 0.28rem;
                    box-sizing: border-box;
                    border-radius: 0.14rem;
                    border: 0.01rem solid #fff;
                    margin: 0.1rem 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &:not(:last-child) {
                        margin-right: 0.05rem;
                    }
                    &--0 {
                        color: rgb(251, 73, 85);
                        background: #fff;
                        &--disabled {
                            color: rgba(251, 73, 85, 0.7);
                        }
                    }

                    &--1 {
                        color: #fff;
                        background: transparent;
                        &--disabled {
                            color: rgba(255, 255, 255, 0.7);
                        }
                    }
                }
            }
            .unit {
                font-size: 0.15rem;
                margin-right: 0.05rem;
                font-weight: 600;
            }

            .num {
                font-size: 0.24rem;
                font-weight: 600;
            }

            .text {
                margin-left: 0.04rem;
            }
        }

        &__list {
            display: flex;
            justify-content: space-between;
            height: 0.72rem;
            align-items: center;
            margin: 0 0.25rem;
            box-sizing: border-box;

            &:not(:last-child) {
                border-bottom: 0.007rem solid #eee;
            }

            &__left {
                display: flex;
                align-items: center;
            }
            &__text {
                color: #555;
                margin-right: 0.05rem;
            }

            &__status {
                width: 0.7rem;
                font-size: 0.14rem;
                text-align: center;
                color: #000;
            }

            &__amount {
                color: #ff6050;
            }
        }
    }

    .no-content {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.fighting {
            height: 30vh;
        }

        &.sad {
            height: 20vh;
        }
        &__img {
            height: 0.72rem;
            margin-bottom: 0.1rem;

            &.fighting {
                width: 1.29rem;
            }
            &.sad {
                width: 0.88rem;
                // margin-top: 0.3rem;
            }
        }

        &__text {
            font-family: PingFangSC-Thin;
            font-size: 0.15rem;
            color: #999999;
        }
    }
}
</style>
