<template>
    <div class="showGoodsIdx">
        <s-header :name="$t('device.returnCoin')" :noback="false"></s-header>
        <div class="headerCon kBordBott o-plr-10 o-ptb-16 l-flex-RC">
            <div class="line o-mr-6"></div>
            <div>
                <span class="c-color c-text-14">{{ $t('device.showGoodsPage.equipmentName') }}：</span>
                <span class="c-text-color c-text-14">{{ equipmentName }}</span>
            </div>

        </div>
        <div class="">
            <van-field name="stepper" :label="$t('device.returnCoinPage.amount')" class="l-flex-RC">
                <template #input>
                    <van-stepper v-model="amount" max="50"/>
                </template>
                <template #button>
                    <van-button size="small" type="primary" @click="applyReturnCoinClk()">{{ $t('device.returnCoinPage.returnCoinBtn')
                        }}</van-button>
                </template>
            </van-field>
        </div>
        <van-cell :title="$t('device.returnCoinPage.returnCoinRecord')" icon="points"/>
        <div class="outer2 flex-col" v-for="item in recordList" :key="item.id">
            <div class="word">{{ $t('device.returnCoinPage.applyTime') }}：{{ showTime(item.createDate) }}</div>
            <div class="word">{{ $t('device.returnCoinPage.amount') }}：{{ item.amount }}</div>
            <div class="word">{{ $t('device.returnCoinPage.status') }}：{{ item.status == 1 ? $t('device.returnCoinPage.returnCoinSuccess') : (item.status == 2 ? $t('device.returnCoinPage.returnCoinFailed') : $t('device.returnCoinPage.waiting')) }}</div>
            <div class="word" v-if="item.status == 2">{{ $t('device.returnCoinPage.reason') }}：{{ item.reason}}</div>
        </div>

    </div>
</template>

<script>
// 导入接口
import { applyReturnCoin, getReturnCoinList } from '@/service/device/index';
import sHeader from "@/components/SimpleHeader";
import { ref } from "@vue/reactivity";
import { onMounted } from '@vue/runtime-core';
import { useRoute, useRouter } from 'vue-router';
import { showConfirmDialog, showFailToast, showToast } from 'vant';
import { useI18n } from "vue-i18n";
import { getLoginUser, styleUrl } from '../../../common/js/utils';
import dateUtil from "../../../utils/dateUtil";
export default {
    components: {
        sHeader
    },
    setup() {
        // 引入语言
        const { t } = useI18n();
        // 路由
        const route = useRoute();
        const router = useRouter();
        const amount = ref(1);
        const user = getLoginUser();
        const equipmentId = ref('');
        const equipmentName = ref('');
        const clientId = ref('');
        const activeNames = ref(['1']);
        const recordList = ref([]);
        // 刚进页面
        onMounted(() => {
            // 加载样式
            styleUrl('showGoods');
            equipmentId.value = route.query.deviceId || "";
            const name = route.query.name || "";
            clientId.value = route.query.clientId || "";
            if (equipmentId) {
                equipmentName.value = name;
            }
            getList(clientId.value);

        });

        // 获取退币记录
        const getList = async () => { // 声明为异步函数
            try {
                const { data } = await getReturnCoinList({equipmentId: equipmentId.value}); // 使用await等待异步函数执行完毕并返回结果
                // 处理获取到的data
                recordList.value = data.data;
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        // 格式化时间
        const showTime = (time) => {
            return dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(time), "yyyy/MM/dd hh:mm:ss")));
        }


        // 退币申请
        const applyReturnCoinClk = () => {
            const params = {
                equipmentId: equipmentId.value,
                amount: amount.value,
                adminId: user.id
            };
            showConfirmDialog({
                title: t('alarmClean.tips'),
                message: t('device.returnCoinPage.tipsContent'),
            }).then(async () => {
                const { data } = await applyReturnCoin(params);
                console.log("data>>>", data);
                if (data.code) {
                    showToast(t('alarmClean.successfully'));
                    setTimeout(() => {
                        router.go(-1);
                    }, 1500);
                } else {
                    showFailToast(data.message);
                }
            }).catch((error) => {
                console.log(error);
            });
        }

        return {
            equipmentName,
            applyReturnCoinClk,
            amount,
            activeNames,
            recordList,
            showTime
        };
    },
};
</script>

<style lang="less" scoped>

.van-cell {
    font-size: 20px !important;
}
.outer2 {
    box-shadow: 1px 2px 5px 3px rgba(70, 95, 198, 0.14);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    margin: 20px 30px;
    margin-bottom: 20px;
    padding: 10px 20px;

    .word {
        font-size: 14px;
        padding: 3px 0;
        line-height: 20px;
    }
}
</style>