<template>
    <view class="selected_award">
        <view class="award_list">
            <view v-for="(i, idx) in _list" :key="idx" class="award_list_item">
                {{ i?.rewardName }}<text class="num">{{ i?.rewardNum }}</text>
                <image
                    v-if="isEdit"
                    :src="`${OSS_URL}/iconfont/close_icon.png`"
                    mode=""
                    class="close_icon"
                    @click="handleRemove(idx)"
                ></image>
            </view>
        </view>
        <image
            v-if="isEdit && _list.length < maxNum"
            :src="`${OSS_URL}/upload_icon.png`"
            class="upload_icon"
            mode=""
            @click="handleShowPopup"
        ></image>
        <!-- 弹窗 -->
        <CustomPopup
            v-model="showCustomPopup"
            titleText="选择奖励"
            @handleCancelBtn="handleCancelPopup"
            @handleConfirmBtn="handleConfirmPopup"
        >
            <view class="popup_box">
                <view class="award_form">
                    <view class="award_form_label"> 奖励名称 </view>
                    <view class="award_form_input" @click="handleChooseAward">
                        {{ formData.rewardName }}
                        <text v-if="!formData.rewardName" style="color: #a9aab5; font-size: 30rpx"
                            >请输入</text
                        >
                        <image
                            :src="`${OSS_URL}/iconfont/down_arrow.png`"
                            class="more_down"
                            mode=""
                        ></image>
                    </view>
                </view>
                <view v-if="awardEmpty" class="error">请选择任务奖励</view>
                <view class="award_form">
                    <view class="award_form_label"> 数量 </view>
                    <view class="award_form_input">
                        <input v-model="formData.rewardNum" type="number" placeholder="请输入" />
                        <view class="handle_icon">
                            <view class="up_dowm" @click="handleUpNumber('up')">
                                <image
                                    :src="`${OSS_URL}/iconfont/number_icon.png`"
                                    mode=""
                                    class="icon"
                                ></image>
                            </view>
                            <view class="up_dowm" @click="handleUpNumber('down')">
                                <image
                                    :src="`${OSS_URL}/iconfont/number_icon.png`"
                                    mode=""
                                    class="icon reduce"
                                ></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </CustomPopup>
        <!-- 空奖励弹窗 -->
        <CustomPopup
            v-model="showAwardEmptyPopup"
            titleText="奖励选择说明"
            cancelBtnText=""
            @handleConfirmBtn="showAwardEmptyPopup = false"
        >
            <view class="award_empty"> 如需选择奖励，<br />请在奖励管理中设置奖励内容。 </view>
        </CustomPopup>
        <Picker
            v-model="showPicker"
            :pickVal="pickVal"
            :pickList="pickList"
            title="选择奖励"
            @confirm="confirmPicker"
        />
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getRewardListApi } from '@/api';
import CustomPopup from '@/components/CustomPopup/index.vue';
import Picker from '@/components/Picker/index.vue';

const props = defineProps({
    list: {
        type: Array,
        default: [],
    },
    // 编辑查看
    isEdit: {
        type: Boolean,
        default: true,
    },
    // 编辑查看
    maxNum: {
        type: Number,
        default: 3,
    },
});
const emits = defineEmits(['handleConfirmBtn']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const showCustomPopup = ref(false);
const showAwardEmptyPopup = ref(false);
const showPicker = ref(false);
const pickVal = ref([0]); // 奖励选中值
const pickList = ref([]); // 奖励列表
const _list = ref([]); // 已选奖励
const total = ref(0);
const formData = ref({
    rewardName: '',
    rewardId: '',
    rewardNum: 1,
});

const awardEmpty = ref(false); // 奖励名称是否空
// 点击弹窗
function handleShowPopup(type) {
    showCustomPopup.value = true;
    awardEmpty.value = false;
}
// 获取奖励列表
async function fetchRewardList() {
    pickList.value = [];
    try {
        uni.showLoading({
            title: '加载中',
        });
        let { data } = await getRewardListApi({ size: -1 });
        total.value = data.totalRows;
        if (data.totalRows > 0) {
            data.rows.map((item, idx) =>
                pickList.value.push({
                    name: item.rewardName,
                    rewardId: item.id,
                    index: idx,
                }),
            );
        }
        uni.hideLoading();
    } catch (err) {
        uni.hideLoading();
    }
}
// 奖励
async function handleChooseAward() {
    await fetchRewardList();
    showCustomPopup.value = false;
    if (total.value === 0) {
        showAwardEmptyPopup.value = true;
        return;
    }
    showPicker.value = true;
}

function confirmPicker(val) {
    if (val) {
        let idx = val[0];
        pickVal.value = [Number(idx)];
        formData.value.rewardName = pickList.value[idx].name;
        formData.value.rewardId = pickList.value[idx].rewardId;
    }
    awardEmpty.value = false;
    showPicker.value = false;
    showCustomPopup.value = true;
}
// 数量
function handleUpNumber(type) {
    switch (type) {
        case 'up':
            formData.value.rewardNum++;
            break;
        case 'down':
            if (formData.value.rewardNum === 1) return;
            formData.value.rewardNum--;
            break;
    }
}
// 取消选择奖励
function handleCancelPopup() {
    formData.value = {
        rewardName: '',
        rewardId: '',
        rewardNum: 1,
    };
}
// 确认选择奖励
function handleConfirmPopup() {
    awardEmpty.value = formData.value.rewardId ? false : true;
    if (awardEmpty.value) return;
    _list.value.push(formData.value);
    emits('handleConfirmBtn', _list.value);

    showCustomPopup.value = false;
    formData.value = {
        rewardName: '',
        rewardId: '',
        rewardNum: 1,
    };
}
// 移除已选中奖励
function handleRemove(idx) {
    _list.value.splice(idx, 1);
    emits('handleConfirmBtn', _list.value);
}

watch(
    () => props.list,
    val => {
        if (val) {
            _list.value = val;
        }
    },
    {
        immediate: true,
    },
);
</script>

<style lang="scss" scoped>
.selected_award {
    .award_list {
        font-size: 28rpx;

        &_item {
            position: relative;
            display: inline-block;
            padding: 8rpx 30rpx;
            margin: 0 16rpx 16rpx 0;
            color: #615dff;
            border: 1rpx solid #615dff;
            background-color: rgba(97, 93, 255, 0.1);
            border-radius: 8rpx;

            &::after {
                content: '';
                position: absolute;
                top: 6rpx;
                left: 6rpx;
                display: block;
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                background-color: #fff;
                border: 1rpx solid #615dff;
            }

            .close_icon {
                position: absolute;
                top: -8rpx;
                right: -8rpx;
                width: 24rpx;
                height: 24rpx;
                background-color: #fff;
                border-radius: 50%;
            }

            .num {
                margin-left: 16rpx;
                color: #333333;
            }
        }
    }

    .upload_icon {
        width: 122rpx;
        height: 122rpx;
    }

    .popup_box {
        padding: 0 30rpx;
        min-height: 280rpx;
        font-size: 30rpx;
        color: #333;
        box-sizing: border-box;

        .error {
            margin: -15rpx 0 0 150rpx;
            font-size: 26rpx;
            color: #ff3d3d;
            text-align: left;
        }

        .award_form {
            display: flex;
            align-items: center;
            margin: 30rpx 0;

            &_label {
                margin-right: 30rpx;
                width: 120rpx;
                line-height: 42rpx;
                text-align: justify;
                text-align-last: justify;
            }

            .award_form_input {
                position: relative;
                padding: 24rpx 20rpx;
                box-sizing: border-box;
                height: 90rpx;
                line-height: 42rpx;
                width: 384rpx;
                background-color: #f9f9fb;
                border-radius: 16rpx;
                text-align: left;

                .more_down {
                    position: absolute;
                    right: 20rpx;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 30rpx;
                    height: 30rpx;
                }

                .handle_icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 70rpx;
                    border-left: 1rpx solid #eee;
                    z-index: 99;

                    .up_dowm {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 45rpx;

                        &:first-child {
                            border-bottom: 1rpx solid #eee;
                        }

                        .icon {
                            width: 30rpx;
                            height: 30rpx;
                        }
                        .reduce {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
    }

    .award_empty {
        padding: 25rpx 0;
        text-align: center;
        height: 140rpx;
        line-height: 45rpx;
        font-size: 32rpx;
        color: #333;
        box-sizing: border-box;
    }
}
</style>
