<template>
    <ap-container>
        <ap-main margin="1111">
            <ap-table ref="tSysVideoRef" :options.sync="tSysVideoOpt">
                <template #operation="slotProps">
                    <el-button type="primary" @click="previewFn(slotProps.rowData)">预览</el-button>
                </template>
            </ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
    export default {
        name: 'SysVideo',
        data() {
            let columns = [
                {
                    prop: 'fdType',
                    label: '来源类型',
                    type: 'select',
                    width: 100,
                    edit: false,
                    align:"center",
                    selectOptions:[{label:"富文本", value:1},{label:"其他", value:2},],
                    html: function (value, row) {
                        switch (value) {
                            case 1:
                                return "<div class='ap-tag-success'>富文本</div>";
                        }
                        return '其他';
                    }
                }, {
                    prop: 'fdUrl',
                    label: '路径',
                    edit: false,
                    type: 'input'
                }, {
                    prop: 'fdTime',
                    label: '上传时间',
                    type: 'datePicker',
                    datePickerFormat: 'yyyy-MM-dd HH:mm:ss',
                    width: 130,
                    add: false,
                    edit: false
                }, {
                    prop: 'fdUserName',
                    label: '用户',
                    edit: false,
                    type: 'input',
                    width: 120,
                }, {
                    prop: 'fdRemark',
                    label: '备注',
                    type: 'input',
                }, {
                    width: '100',
                    label: '操作',
                    type: 'slot',
                    slot: 'operation'
                }
            ];
            let tableOpt = {
                title: "视频文件",
                columns: columns,
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                dataUrl: "/apm/SysVideo/getTSysVideoGridList",
                saveUrl: "/apm/SysVideo/saveTSysVideoGridData",
                deleteUrl: "/apm/SysVideo/deleteTSysVideoGridData",
                toolbarBtn: [{btnType: "danger", text: "物理删除", icon: "el-icon-trash-o", onClick: this.deleteVideo},
                    "separator", "edit", "del", "cancel", "refresh", "save"],
                initData: true, // 默认false
                params: {}
            };
            return {
                tSysVideoOpt: tableOpt,
            }
        },
        methods: {
            previewFn(d){
                console.log(d);
                let path = this.$env.FS_URL + d.fdUrl;
                // 新页面打开
                window.open(path, '_blank');
            },
            deleteVideo(){
                let selectedRows = this.$refs.tSysVideoRef.getSelection();
                if (selectedRows.length < 1) {
                    this.$message.error("请选择需要删除的行！");
                    return;
                }
                if (selectedRows.length > 1) {
                    this.$message.error("只能选择单行数据进行删除！");
                    return;
                }
                this.$request({
                    url: '/apm/SysVideo/deleteVideo',
                    method: 'post',
                    data: {
                        id: selectedRows[0].fdId,
                        url: selectedRows[0].fdUrl,
                    }
                }).then(response => {
                    this.$refs.tSysVideoRef.refresh();
                })
            }
        }
    }
</script>

<style scoped>
</style>
