<template>
    <view>
        <u-popup :show="show" round="10" @close="close" :closeable="true">
            <view class="pop-card">
                <view class="card-title">
                    <text>答题卡</text>
                    <view class="a">
                        <image :src="staticUrl('/static/icon-study-yes.png')"></image>{{successNum}}
                    </view>
                    <view class="b">
                        <image :src="staticUrl('/static/icon-study-no.png')"></image>{{errorNum}}
                    </view>
                </view>
                <view class="card-content">
                    <view v-for="(item,index) in list" 
                        class="item"
                         :class="{'correct':item.is_correct,'error': !item.is_correct}"
                        @click="selItem(index)">
                        {{index + 1}}
                    </view>
                </view>
            </view>
        </u-popup>

    </view>
</template>

<script>
    export default {
        name: "pop-card",
        props: {
            showPop: {
              type: Boolean  
            },
           successNum: {
           	type: Number | String
           },
           errorNum: {
           	type: Number | String
           },
           list: {
              type: Array,
              default: () => [] 
           }
        },
        data() {
            return {
                show: false
            };
        },
        watch: {
            showPop(val) {
                this.show = val
            }
        },
        methods: {
            close() {
                  this.$emit('close')
            },
            selItem(index) {
                this.$emit('selItem',index)
            }
        }
    }
</script>

<style lang="scss">
    .pop-card {
        height: 600rpx;
        display: flex;
        flex-direction: column;

        .card-title {
            display: flex;
            padding: 30rpx;

            .a {
                display: flex;
                align-items: center;
                margin: 0 30rpx;
                font-size: 30rpx;
                color: #37C594;
            }

            .b {
                display: flex;
                align-items: center;
                font-size: 30rpx;
                color: #F01B1B;
            }

            image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
            }
        }

        .card-content {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;

            .item {
                margin: 20rpx;
                width: 80rpx;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                border: 1px solid rgba(0, 0, 0, 0.2);
                color: rgba(0, 0, 0, 0.6);
                border-radius: 50%;

                &.correct {
                    color: #49c99c;
                    background-color: #f3f8f6;
                    border: 1px solid transparent;
                }

                &.error {
                    color: #fa6e6e;
                    background-color: #fff3f3;
                    border: 1px solid transparent;
                }
            }
        }
    }
</style>
