<template>
    <view
        :style="isPic ? 'margin: 30px 17px 20px;' : ''"
        class="bk-direct"
        :class="dust ? 'dust' : ''"
    >
        <view
            v-if="selectedIndex !== 0"
            class="bk-direct-btn bk-direct-btn-prev"
            @tap="tabPrev"
        >
            上一节：{{ tabList[selectedIndex - 1] ? tabList[selectedIndex - 1].level1Tag : '' }}
        </view>
        <view
            v-if="selectedIndex !== tabList.length - 1"
            class="bk-direct-btn bk-direct-btn-next"
            @tap="tabNext"
        >
            下一节：<text>{{ tabList[selectedIndex + 1] ? tabList[selectedIndex + 1].level1Tag : '' }}</text>
        </view>
    </view>
</template>

<script>
export default {
    config: {
        component: true
    },
    props: {
        /**
         * tabList
         */
        tabList: {
            type: Array,
            default: () => []
        },
        /**
         * 选中index
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * 是否有图解
         */
        isPic: {
            type: Boolean,
            default: false
        },
        /**
         * 是否有蒙层
         */
        dust: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentIndex: 0
        };
    },
    mounted() {
        this.currentIndex = this.selectedIndex;
    },
    methods: {
        tabPrev() {
            this.currentIndex--;
            /**
             * 点击上一节
             */
            this.$emit('directTap', this.currentIndex);
        },
        tabNext() {
            this.currentIndex++;
            /**
             * 点击下一节
             */
            this.$emit('directTap', this.currentIndex);
        }
    },
    watch: {
        selectedIndex(selectedIndex) {
            this.currentIndex = selectedIndex;
        }
    }
};
</script>
<style lang="less" scoped>
.dust {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.bk-direct {
    display: flex;
    align-items: flex-start;
    margin: 30px 0 20px;
    margin-top: 30px;

    .bk-direct-btn {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #00c8c8;
        border-radius: 60px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        font-family: 'PingFangSC-Regular';
        font-weight: bold;
        &-prev {
            margin-right: 8px;
        }
    }
}
</style>
