<!-- 智慧模式 -->
<template>
    <div class="smart-wrapper">
        <div class="swiper swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in modeList">
                    <div class="swiper-item">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div class="select-wrapper">
                <img src="@/assets/imgs/device-detail/smart-mode/select@2x.png">
            </div>
        </div>

        <!-- 底部 -->
        <div class="smart-btm">
            <div class="illustrate">
                <img src="@/assets/imgs/device-detail/smart-mode/illustrate@2x.png">
            </div>
            <div class="switch-btn-container">
                <div class="switch-btn" @click="changeSwitch()">
                    <img :src="getImgSrc(onOffImg)" alt="">
                </div>
                <div class="btn-text">开关</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, onMounted, onActivated, nextTick } from 'vue';
import { Swiper, Navigation, Pagination } from "swiper";
import "swiper/swiper-bundle.css";
import { SmartModeEnum } from './enmu/smart-mode';
import { $commonService } from '@/services/framework/dependency-injection-service';

const getImgSrc = $commonService.$imgService.getImgSrc;
let mySwiper: Swiper; // 声明swiper
/** 智慧模式数组 */
const modeList = ref<any[]>([
    {
        id: SmartModeEnum.COLD,
        name: '偏冷' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png'
    },
    {
        id: SmartModeEnum.COOL,
        name: '凉爽' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png'
    },
    {
        id: SmartModeEnum.COMFORT,
        name: '舒适' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png'
    },
    {
        id: SmartModeEnum.WARM,
        name: '温暖' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png'
    },
    {
        id: SmartModeEnum.HOT,
        name: '偏热' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png'
    },
    {
        id: SmartModeEnum.COLD,
        name: '偏冷' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cold@2x.png'
    },
    {
        id: SmartModeEnum.COOL,
        name: '凉爽' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_cool@2x.png'
    },
    {
        id: SmartModeEnum.COMFORT,
        name: '舒适' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_comfort@2x.png'
    },
    {
        id: SmartModeEnum.WARM,
        name: '温暖' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_warm@2x.png'
    },
    {
        id: SmartModeEnum.HOT,
        name: '偏热' ,
        bgImg: '/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png',
        onOffImg: '/assets/imgs/device-detail/smart-mode/switch_hot@2x.png'
    },
])
/** 传参 */
const props = defineProps<{
    /** 开关机状态 */
    ifRun: boolean;
    /** 当前智慧模式 */
    mode: number;
}>()
const { ifRun, mode } = toRefs(props);
/** 开关机状态 */
const onOff = ref(ifRun);
/** 开关机图片 */
const onOffImg = ref('');
/** 当前的智慧模式 */
const smartMode = ref(mode);
/** 向父组件传递事件 */
const emit = defineEmits(['changeBg', 'changeSwitch', 'changeSmartMode']);

onMounted(() => {
    initSwiper();
    // 获取开关机状态图片
    getShowImg();
})

/** 初始化swiper */
const initSwiper = () => {
    const currentModeIndex = modeList.value.findIndex(item => item.id === smartMode.value);
    console.log('smartMode.value', smartMode.value)
    console.log('currentModeIndex', currentModeIndex)
    mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        slidesPerView: 5, // slide可展示的数量
        centeredSlides: true,
        observer: true,
        observeParents: true,
        initialSlide: currentModeIndex, // 初始时展示的位置
        on: {
            touchStart: () => {
            },
            touchMove: () => {
            },
            slideChangeTransitionEnd: () => {
                mySwiper && emit("changeSmartMode", modeList.value[mySwiper.realIndex].id);
                nextTick(() => {
                    getShowImg();
                })
            },
        }
    })
}

/** 获取展示的背景 */
const getShowImg = () => {
    if (onOff.value) {
        const smartModeData = modeList.value.find(item => item.id === smartMode.value);
        // 获取开关机状态图片
        onOffImg.value = smartModeData.onOffImg;
        // 向父组件发送事件，展示背景图
        emit('changeBg', smartModeData.bgImg);
    } else {
        // 获取开关机状态图片
        onOffImg.value = "/assets/imgs/device-detail/smart-mode/switch_shutdown@2x.png";
        // 向父组件发送事件，展示背景图
        emit('changeBg', "/assets/imgs/device-detail/smart-mode/smart_bg_shutdown@2x.png");
    }
}

/** 开关切换 */
const changeSwitch = () => {
    emit('changeSwitch', !onOff.value);
    nextTick(() => {
        getShowImg();
    })
}
</script>

<style lang="scss" scoped>
.smart-wrapper {
    width: 100%;
    height: 100%;
    position: relative;

    .swiper-container {
        position: relative;
        width: 100%;
        height: 426px;

        .select-wrapper {
            position: absolute;
            width: 212px;
            height: 416px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            img {
                width: 100%;
            }
        }
    }

    .swiper-slide {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.6);
        color: rgba($color: #FFF, $alpha: .2);
    }

    .swiper-slide-active,.swiper-slide-duplicate-active{
        transform: scale(1);
        color: rgba($color: #FFF, $alpha: .7);
  	}

    .swiper-slide-prev, .swiper-slide-next {
        transform: scale(0.8);
        color: rgba($color: #FFF, $alpha: .4);
    }

    .swiper-item {
        font-size: 60px;
        width: 65px;
        text-align: center;
    }

    .smart-btm {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;

        .illustrate {
            margin-left: 91px;
            width: 56px;
            height: 56px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .switch-btn-container {
            margin-right: 64px;
            position: relative;
            .switch-btn {
                width: 110px;
                height: 110px;
                border-radius: 50%;
                background: url('@/assets/imgs/device-detail/smart-mode/circle-bg@2x.png') no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 56px;
                }
            }
            .btn-text {
                position: absolute;
                color: #FFF;
                font-size: 28px;
                width: 100%;
                text-align: center;
                margin-top: 20px;
            }
        }
    }
}
</style>