<template>
    <div class="m-textnavigation">
        <scroll-view class="m-textnavigation__scroll" :scroll-x="true">
            <ul class="m-textnavigation__list">
                <li class="m-textnavigation__item" :class="{'m-textnavigation__item--active': item.active}" v-for="(item, index) in list" :key="index" @click="setTab(item)">{{ item.name }}</li>
            </ul>
        </scroll-view>
        <m-custom :layout="layout"></m-custom>
    </div>
</template>

<script>
    import MCustom from './index'

    // tab导航
    export default {
        name: 'MTextnavigation',
        components: {MCustom},
        props: {
            // 内容
            content: {
                type: Object,
            },
        },

        // 数据
        data() {
            return {
                list: [],
                templateId: '',
                layout: [],
            }
        },

        // 初始化
        created() {
            const self = this

            self.init()
        },

        // 函数
        methods: {
            init() {
                const self = this

                self.list = self.content.formData.form.models[0].navs
                self.templateId = self.list[0].id
                self.list[0].active = true
                self.getInfo()
            },

            // 设置tab
            setTab(val) {
                const self = this

                self.list.forEach((item, index) => {
                    if (val.id === item.id) {
                        item.active = true
                        self.templateId = item.id
                    } else {
                        item.active = false
                    }
                    self.list.splice(index, 1, item)
                })

                self.getInfo()
            },

            // 获取模版数据
            getInfo() {
                const self = this

                self.api.get('/Shop/GetDecorateCustomPage', {
                    id: self.templateId,
                }).then(res => {
                    let data = JSON.parse(res.data)
                    self.layout = data.indexLayoutList || []
                })
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {
            content(val) {
                const self = this

                if (val) {
                    self.init()
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .m-textnavigation {
        height: px(115);
        background-color: #fff;

        &__scroll {
            width: 100%;
            height: 100%;
        }

        &__list {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        &__item {
            position: relative;
            flex: none;
            padding: 0 px(50);
            font-size: px(44);
            color: #999;

            &--active {
                color: #000;

                &:after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: px(50);
                    right: px(50);
                    z-index: 1;
                    height: px(10);
                    background-color: #f89484;
                }
            }
        }
    }
</style>