<template>
    <div class="showGoodsIdx">
        <s-header :name="$t('device.alramClean')" :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>
        <van-cell center
            :title="cleanFunction == true ? $t('alramClean.openCleanFunction') : $t('alramClean.closeCleanFunction')" size="large"
            title-style="color: #404d74;">
            <template #right-icon>
                <van-switch :model-value="cleanFunction" @update:model-value="cleanFunctionStatus" size="24" />
            </template>
        </van-cell>
        <van-cell v-if="showCheckBtn" center
            :title="checked ? $t('alramClean.openStatus') : $t('alramClean.closeStatus')" size="large"
            title-style="color: #404d74;">
            <template #right-icon>
                <van-switch :model-value="checked" @update:model-value="updateStatus" size="24" />
            </template>
        </van-cell>

    </div>
</template>

<script>
// 导入接口
import { updateAlarmCleanStatus, getAlarmClean, changeCleanFunction } 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 { styleUrl } from '../../../common/js/utils';
export default {
    components: {
        sHeader
    },
    setup() {
        // 引入语言
        const { t } = useI18n();
        // 路由
        const route = useRoute();
        const router = useRouter();

        const switchStates = ref([]);

        const equipmentId = ref('');
        const equipmentName = ref('');
        const clientId = ref('');
        const checked = ref(true);
        const showCheckBtn = ref(true)

        const cleanFunction = ref(false);

        // 刚进页面
        onMounted(() => {
            // 加载样式
            styleUrl('showGoods');
            equipmentId.value = route.query.deviceId || "";
            const name = route.query.name || "";
            clientId.value = route.query.clientId || "";
            // console.log("route.query.clientId>>>", route.query.clientId);
            cleanFunction.value = route.query.cleanFunction || false;
            if (equipmentId) {
                equipmentName.value = name;
            }
            getList(clientId.value);
            console.log(cleanFunction.value)

        });

        // 获取清洗提醒开关状态
        const getList = async (clientId) => { // 声明为异步函数
            try {
                const { data } = await getAlarmClean(clientId); // 使用await等待异步函数执行完毕并返回结果
                // 处理获取到的data
                console.log("data>>>", data);
                if (data.data === null) {
                    showCheckBtn.value = false;
                } else {
                    if (data.code === '00000') {
                        if (data.data.status === '0') {
                            checked.value = false;
                        }
                    }
                }
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }


        const cleanFunctionStatus = (newValue) => {
            const params = {
                equipmentId: equipmentId.value,
                cleanFunction: newValue ? '1' : '0',
            };
            showConfirmDialog({
                title: t('alramClean.tips'),
                message: t('alramClean.content'),
            }).then(async () => {
                const { data } = await changeCleanFunction(params);
                if (data.code) {
                    // checked.value = newValue;
                    showToast(t('alramClean.successfully'));
                    setTimeout(() => {
                        router.go(-1);
                    }, 1500);
                } else {
                    showFailToast(data.message);
                }
            }).catch((error) => {
                console.log(error);
            });
        }

        const updateStatus = (newValue) => {
            const params = {
                clientId: clientId.value,
                status: newValue ? '1' : '0',
            };
            showConfirmDialog({
                title: t('alramClean.tips'),
                message: t('alramClean.content'),
            }).then(async () => {
                console.log("params.clientId>>>", params.clientId);
                console.log("params.status>>>", params.status);
                const { data } = await updateAlarmCleanStatus(params);
                console.log("updateData>>>", data);
                if (data.code) {
                    // checked.value = newValue;
                    showToast(t('alramClean.successfully'));
                    setTimeout(() => {
                        router.go(-1);
                    }, 1500);
                } else {
                    showFailToast(data.message);
                }
            }).catch((error) => {
                console.log(error);
            });
        }

        return {
            equipmentName,
            switchStates,
            checked,
            updateStatus,
            showCheckBtn,
            cleanFunction,
            cleanFunctionStatus
        };
    },
};
</script>

<style lang="less" scoped></style>