<template>
    <div class="route-item-box flex-column">
        <div class="header flex">
            <div class="number flex_shrink-0">
                {{ data.rowNum }}
            </div>
            <div class="title flex-1">
                {{ data.routestr }}
            </div>
            <div class="default flex_shrink-0">
                {{ data.code }}
            </div>
        </div>
        <div class="main" v-if="data.filedatas && data.filedatas.length > 0">
            <van-swipe :autoplay="autoplay">
                <van-swipe-item v-for="(picture, index) in data.filedatas" :key="index" v-proportion="1/1.732" :stop-propagation="false" @click="photoBrowser(index)">
                    <lj-img-pro
                        :key="'pic' + index"
                        class="file-rel-item"
                        v-if="checkImg(picture.fileType)"
                        :src="picture.url"
                        :md5="picture.filemd5"
                        :fileType="picture.fileType"
                        @image-click="photoBrowser(index)"/>
                    <lj-video-download
                        :key="'vlog' + index"
                        class="file-rel-item"
                        v-else-if="checkTv(picture.fileType)"
                        :src="picture.url"
                        :md5="picture.filemd5"
                        :fileType="picture.fileType"
                        :fileName="picture.fileName"
                    />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="footer">
            <div class="footer-content"  v-html="data.context"></div>
        </div>
    </div>
</template>

<script>
import LjImgPro from "components/lj-img-pro";
import LjVideoDownload from "components/lj-video-download";

export default {
    name: 'route-item',

    components: {
        LjImgPro,
        LjVideoDownload
    },

    data() {
        return {
            
        };
    },

    props: {
        data: Object,
        autoplay: {
            type: Number,
            default: 5000
        }
    },

    mounted() {
        
    },

    methods: {
        photoBrowser(index) {
            var images = [];
            for (const picture of this.data.filedatas) {
                var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                images.push(url);
            }
            $lj.photoBrowser(images, index);
        },
        checkImg(fileType){
            fileType = fileType.trim().toLowerCase();
            return fileType =="bmp" || fileType == "png" || fileType == "gif" || fileType == "jpg" || fileType == "jpeg";
        },
        checkTv(fileType){
            fileType = fileType.trim().toLowerCase();
            return fileType == "mp4" || fileType == "rmvb" || fileType == "avi" || fileType == "ts" || fileType == "mov";
        }
    },
};
</script>

<style lang="less" scoped>
.route-item-box {
    padding: 0 8px;
    padding-top: 16px;

    &:last-child {
        padding-bottom: 24px;
    }

    .header {
        align-items: center;
        .number {
            display: flex;
            align-items: center;
            padding: 0 6px;
            font-size: 14px;
            font-weight: bold;
            color: @light-label-secondary;
            background: @light-gradient-gray;
            border-radius: 4px;
            margin-right: 4px;
        }
        .title {
            // font-size: 14px;
            font-weight: 600;
        }      
        .default {
            color: @light-label-tertiary;
        }      
    }
    .main {
        margin-top: 4px;
        margin-left: 24px;
        border-radius: 4px;
        background-color: @light-fill-quarternary;
    }
    .footer {
        margin-top: 4px;
        margin-left: 24px;
        padding: 6px 8px;
        border-radius: 4px;
        color: @light-label-secondary;
        background-color: @light-fill-quarternary;
        white-space:pre-line;
    }
}
</style>