<template>
    <div class="record-oss-list">
        <div class="list-wrap" v-if="!isRecordDetail">
            <el-form ref="queryForm" :inline="true" label-width="88px" @submit.native.prevent>
                <el-form-item prop="serverId">
                    <el-select @change="handleMediaChange" v-model="mediaServerId" :placeholder="$t('record.239091-1')">
                        <el-option v-for="item in mediaServerList" :key="item.serverId" :label="item.serverId" :value="item.serverId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="serverId">
                    <el-button icon="el-icon-search" :loading="loading" type="primary" @click="getRecordList()">{{ $t('search') }}</el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="recordList" :border="false">
                <el-table-column prop="app" :label="$t('record.239091-2')" align="left" min-width="150"></el-table-column>
                <el-table-column prop="stream" :label="$t('record.239091-3')" align="left" min-width="460"></el-table-column>
                <el-table-column prop="time" :label="$t('record.239091-4')" align="center" width="180"></el-table-column>
                <el-table-column :label="$t('opation')" width="100" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-folder-opened" type="text" @click="handleRecordDetailClick(scope.row)">{{ $t('look') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryRecord.pageNum" :limit.sync="queryRecord.pageSize" @pagination="getRecordList" />
        </div>
        <el-row class="item-wrap" v-if="isRecordDetail">
            <div class="title-wrap">
                <el-button class="top-button" type="info" size="small" @click="handleBack()">
                    <i class="el-icon-arrow-left"></i>
                    {{ $t('product.product-edit.473153-44') }}
                </el-button>
                <span class="info-item">{{ $t('record.239091-2') }}：{{ chooseRecord.app }}</span>
                <span class="info-item">{{ $t('record.239091-3') }}：{{ chooseRecord.stream }}</span>
            </div>
            <div class="main-wrap">
                <el-col :span="6">
                    <div class="left-wrap">
                        <div class="search-wrap">
                            <el-date-picker
                                size="small"
                                style="width: 100%"
                                v-model="chooseDate"
                                :picker-options="pickerOptions"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :placeholder="$t('record.record-oss.80878-0')"
                                @change="handleDateChange"
                            ></el-date-picker>
                        </div>
                        <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/${chooseRecord.app}/${chooseRecord.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="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>
            </div>
        </el-row>
    </div>
</template>

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

export default {
    name: 'OssReocrdList',
    components: {
        player,
    },
    props: ['device'],
    data() {
        return {
            // 记录列表
            loading: false,
            mediaServerId: null, // 媒体服务
            mediaServerList: [], // 滅体节点列表
            recordList: [], // 记录列表
            queryRecord: {
                pageNum: 1,
                pageSize: 10,
                recordApi: null,
            },
            recordApi: null, // 媒体服务地址
            isRecordDetail: false, // 打开详情
            chooseRecord: null, // 选中的媒体服务
            // 记录详情
            dateFilesObj: [], // 有节点的日期
            pickerOptions: {
                cellClassName: (date) => {
                    // 通过显示一个点标识这一天有录像
                    let time = moment(date).format('YYYY-MM-DD');
                    if (this.dateFilesObj[time]) {
                        return 'data-picker-true';
                    } else {
                        return 'data-picker-false';
                    }
                },
            },
            queryParams: {
                pageNum: 1,
                pageSize: 12,
            },
            detailFiles: [],
            chooseDate: '', // 选择的日期
            total: 0,
            choosedFile: null, // 选中节点
            videoUrl: null,

            recordListStyle: {
                height: this.winHeight + '20px',
            },
            playerStyle: {
                margin: 'auto',
                'margin-bottom': '0px',
                height: this.winHeight + 'px',
            },
            winHeight: window.innerHeight - 320,
            deviceId: '',
            channelList: [],
            queryDate: new Date(),
            count: 1000000,
        };
    },
    watch: {
        // 获取到父组件传递的device后
        device: function (newVal, oldVal) {
            const deviceInfo = newVal;
            if (deviceInfo && deviceInfo.deviceId !== 0) {
                this.deviceId = this.device.serialNumber;
            }
        },
    },
    mounted() {
        this.recordListStyle.height = this.winHeight + 'px';
        this.playerStyle['height'] = this.winHeight + 'px';
    },
    created() {
        this.deviceId = this.device.serialNumber;
        this.getMediaServerList();
    },
    methods: {
        // 获取服务器标识
        getMediaServerList() {
            const params = { pageNum: 1, pageSize: 10 };
            listmediaServer(params).then((res) => {
                if (res.code === 200) {
                    this.mediaServerList = res.rows;
                }
            });
        },
        // 选择标识符
        handleMediaChange(val) {
            this.total = 0;
            this.recordList = [];
            this.getRecordApi(val);
            this.getRecordList();
        },
        // 生成api
        getRecordApi(serverId) {
            let i;
            for (i = 0; i < this.mediaServerList.length; i++) {
                if (serverId === this.mediaServerList[i].serverId) {
                    break;
                }
            }
            if (this.mediaServerList[i].protocol == 'http') {
                this.recordApi = 'http://' + this.mediaServerList[i].ip + ':' + this.mediaServerList[i].recordPort;
            } else if (this.mediaServerList[i].protocol == 'https') {
                this.recordApi = 'https://' + this.mediaServerList[i].domainAlias + ':' + this.mediaServerList[i].recordPort;
            }
        },
        // 获取记录列表
        getRecordList() {
            if (!this.recordApi) {
                this.$modal.alertError(this.$t('record.239091-5'));
                return;
            }
            this.loading = true;
            this.queryRecord.recordApi = this.recordApi;
            getServerRecord(this.queryRecord)
                .then((res) => {
                    const { code, data } = res;
                    if (code === 200) {
                        this.recordList = data.list && data.list.length !== 0 ? data.list.filter((item) => item.stream.split('_')[2] === this.deviceId) : [];
                        this.total = data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 查看详情
        handleRecordDetailClick(item) {
            this.isRecordDetail = true;
            this.chooseRecord = item;
            this.getDateInYear();
        },
        // 返回list
        handleBack() {
            this.isRecordDetail = false;
        },
        // 获取有数据的日期
        getDateInYear() {
            const params = {
                recordApi: this.recordApi,
                app: this.chooseRecord.app,
                stream: this.chooseRecord.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];
                        }
                    }
                }
            });
        },
        // 日期选择
        handleDateChange() {
            this.detailFiles = [];
            if (this.channelId !== '') {
                this.queryRecordDetails();
            }
        },
        // 节点查询
        queryRecordDetails() {
            const params = {
                recordApi: this.recordApi,
                app: this.chooseRecord.app,
                stream: this.chooseRecord.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.chooseRecord.app}/${this.chooseRecord.stream}/${this.chooseDate}/${this.choosedFile}`;
            }
        },
        getFileBasePath() {
            return this.recordApi;
        },
        // 上传节点视频
        uploadOss(item) {
            const params = {
                recordApi: this.recordApi,
                file: '/' + this.chooseRecord.app + '/' + this.chooseRecord.stream + '/' + this.chooseDate + '/' + item,
            };
            uploadRecord(params).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess(this.$t('record.record-oss.80878-4'));
                }
            });
        },
    },
};
</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>
.record-oss-list {
    padding-bottom: 20px;

    .item-wrap {
        .title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 10px 0;

            .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-wrap {
            margin-top: 10px;

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

                .search-wrap {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }

                .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>
