<template>
    <div class="iot-record-detail">
        <el-card class="top-card" :body-style="{ padding: '26px 20px' }">
            <div class="title-wrap">
                <el-button class="top-button" type="info" size="small" @click="goBack()">
                    <i class="el-icon-arrow-left"></i>
                    {{ $t('product.product-edit.473153-44') }}
                </el-button>
                <span class="info-item">{{ $t('record.239091-2') }}：{{ recordFile.app }}</span>
                <span class="info-item">{{ $t('record.239091-3') }}：{{ recordFile.stream }}</span>
            </div>
        </el-card>
        <el-card class="main-card" :body-style="{ padding: '20px' }">
            <el-row>
                <el-col :span="6">
                    <div class="left-wrap">
                        <el-date-picker
                            style="width: 100%"
                            size="small"
                            v-model="chooseDate"
                            :picker-options="pickerOptions"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :placeholder="$t('record.239091-6')"
                            @change="handleDateChange()"
                        ></el-date-picker>
                        <div class="node-data">
                            <ul v-if="detailFiles.length > 0">
                                <li v-for="(item, index) in detailFiles" :key="index">
                                    <el-tag v-if="choosedFile != item" @click="handleChooseFile(item)">
                                        <i class="el-icon-video-camera"></i>
                                        {{ item.substring(0, 17) }}
                                    </el-tag>
                                    <el-tag type="danger" v-if="choosedFile == item">
                                        <i class="el-icon-video-camera"></i>
                                        {{ item.substring(0, 17) }}
                                    </el-tag>
                                    <a class="el-icon-download icon" :href="`${getFileBasePath()}/download.html?url=file/download/${recordFile.app}/${recordFile.stream}/${chooseDate}/${item}`" target="_blank" />
                                    <a class="el-icon-upload icon" @click="uploadOss(item)" />
                                </li>
                            </ul>
                            <el-empty v-if="detailFiles.length == 0" class="no-data" :image-size="100" :description="$t('sip.mediaServer.998535-6')"></el-empty>
                        </div>
                        <pagination
                            style="bottom: 61px; right: 3px; background: transparent"
                            v-show="this.chooseDate != null && total > queryParams.pageSize"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            small
                            layout="prev, pager, next"
                            @pagination="queryRecordDetails"
                            :pager-count="5"
                        />
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="right-wrap">
                        <player ref="recordVideoPlayer" :videoUrl="videoUrl" :height="true"></player>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import moment from 'moment';
import { getServerRecordByDate, getServerRecordByFile, uploadRecord } from '@/api/iot/record';
import player from '@/views/components/player/easyplayer.vue';

export default {
    name: 'ReocrdDetail',
    components: {
        player,
    },
    props: ['recordFile', 'mediaServerId', 'recordApi', 'dateFiles'],
    data() {
        return {
            recordListStyle: {
                height: this.winHeight + 'px',
                margin: '10px 20px',
            },
            playerStyle: {
                margin: 'auto',
                'margin-bottom': '0px',
                height: this.winHeight + 'px',
            },
            winHeight: window.innerHeight - 220,
            dateFilesObj: [],
            detailFiles: [],
            chooseDate: '',
            videoUrl: null,
            choosedFile: null, // 选中节点
            queryDate: new Date(),
            count: 1000000,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 12,
            },
            pickerOptions: {
                cellClassName: (date) => {
                    // 通过显示一个点标识这一天有录像
                    let time = moment(date).format('YYYY-MM-DD');
                    if (this.dateFilesObj[time]) {
                        return 'data-picker-true';
                    } else {
                        return 'data-picker-false';
                    }
                },
            },
        };
    },
    mounted() {
        this.recordListStyle.height = this.winHeight + 'px';
        this.playerStyle['height'] = this.winHeight + 'px';
        this.getDateInYear(() => {
            if (Object.values(this.dateFilesObj).length > 0) {
                this.chooseDate = Object.values(this.dateFilesObj)[Object.values(this.dateFilesObj).length - 1];
                this.handleDateChange();
            }
        });
    },
    methods: {
        // 日期选择
        handleDateChange() {
            this.detailFiles = [];
            this.queryRecordDetails();
        },
        // 节点查询
        queryRecordDetails() {
            if (this.chooseDate != null) {
                const params = {
                    recordApi: this.recordApi,
                    app: this.recordFile.app,
                    stream: this.recordFile.stream,
                    startTime: this.chooseDate + ' 00:00:00',
                    endTime: this.chooseDate + ' 23:59:59',
                    pageNum: this.queryParams.pageNum,
                    pageSize: this.queryParams.pageSize,
                };
                getServerRecordByFile(params).then((res) => {
                    if (res.code === 200) {
                        this.total = res.data.total;
                        this.detailFiles = res.data.list;
                    }
                });
            }
        },
        // 选择节点
        handleChooseFile(file) {
            this.choosedFile = file;
            if (file == null) {
                this.videoUrl = '';
            } else {
                this.videoUrl = `${this.getFileBasePath()}/file/download/${this.recordFile.app}/${this.recordFile.stream}/${this.chooseDate}/${this.choosedFile}`;
            }
        },
        // 上传节点视频
        uploadOss(item) {
            const params = {
                recordApi: this.recordApi,
                file: '/' + this.recordFile.app + '/' + this.recordFile.stream + '/' + this.chooseDate + '/' + item,
            };
            uploadRecord(params).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess(this.$t('uploadSuccess'));
                }
            });
        },
        getFileBasePath() {
            return this.recordApi;
        },
        // 获取有数据的日期
        getDateInYear() {
            const params = {
                recordApi: this.recordApi,
                app: this.recordFile.app,
                stream: this.recordFile.stream,
            };
            getServerRecordByDate(params).then((res) => {
                if (res.code === 200) {
                    if (res.data.length > 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            this.dateFilesObj[res.data[i]] = res.data[i];
                        }
                    }
                }
            });
        },
        goBack() {
            this.$emit('back');
        },
    },
};
</script>

<style>
.data-picker-true:after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #606060;
    border-radius: 4px;
    left: 45%;
    top: 74%;
}
</style>
<style lang="scss" scoped>
.iot-record-detail {
    .top-card {
        margin-bottom: 10px;

        .title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;

            .top-button {
                height: 22px;
                color: #909399;
                background: #f4f5f7;
                padding: 0px 8px;
                border: none;
            }

            .info-item {
                font-weight: normal;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                margin-left: 36px;
            }
        }
    }

    .main-card {
        .left-wrap {
            position: relative;
            flex-direction: column;
            width: 100%;
            padding-right: 20px;

            .no-data {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-55%, -52%);
                height: 517px;
            }

            .node-data {
                color: #486ff2;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                margin-top: 10px;
                padding: 10px;
                height: 517px;

                ul {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;

                    li {
                        margin-bottom: 10px;
                        cursor: pointer;

                        .icon {
                            margin-left: 10px;
                        }
                    }
                }
            }
        }

        .right-wrap {
            height: 559px;
            width: 100%;
        }
    }
}
</style>
