<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="form" label-width="90px">
            <el-form-item label="筛选数据:">
                <el-input
                    style="width: 100%"
                    v-model="form.searchValue"
                    clearable
                    placeholder="请输入筛选数据"
                ></el-input>
            </el-form-item>
            <el-form-item label="资源类型:">
                <el-select v-model="form.type" placeholder="请选择资源类型" style="width: 100%">
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资源状态:">
                <el-select v-model="form.state" placeholder="请选择资源状态" style="width: 100%">
                    <el-option
                        v-for="item in stateList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            :data="tableData"
            highlight-current-row
            border
            header-cell-class-name="table_header"
            style="width: 100%"
        >
            <el-table-column
                show-overflow-tooltip
                prop="resourceName"
                align="center"
                label="资源名称"
                width="180"
            ></el-table-column>
            <el-table-column show-overflow-tooltip prop="uploadTime" align="center" label="上传时间"></el-table-column>
            <el-table-column show-overflow-tooltip prop="updateTime" align="center" label="修改时间"></el-table-column>
            <el-table-column show-overflow-tooltip prop="type" align="center" label="资源类型">
                <template slot-scope="scope">
                    <span>{{ scope.row.type == 0 ? 'PDF' : '视屏' }}</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="state" align="center" label="资源状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.state == 0 ? '展示' : '不展示' }}</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="picUrl" align="center" label="封面">
                <template slot-scope="scope">
                    <img class="imgs" style="height: 22px" :src="scope.row.picUrl" />
                </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip prop="name" align="center" label="操作" width="360px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-view" @click="look(scope.row)">查看</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="modify(scope.row)">
                        修改
                    </el-button>
                    <el-button type="primary" size="mini" icon="el-icon-download" @click="download(scope.row)">
                        下载
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteF(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip  prop="name" label="文件" width="180"> </el-table-column> -->
        </el-table>
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="30%"
            style="margin-top: 15vh !important"
        >
            <el-form :model="formInline" ref="form" :rules="rules" class="formDialog" label-width="110px">
                <el-form-item label="资源名称:" prop="name">
                    <el-input v-model="formInline.name" placeholder="资源名称"></el-input>
                </el-form-item>

                <el-form-item label="资源类型:" class="top" prop="type">
                    <el-select v-model="formInline.type" placeholder="资源类型" @change="changeType">
                        <el-option label="PDF" value="0"></el-option>
                        <el-option label="视频" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源状态:" class="top" prop="state">
                    <el-select v-model="formInline.state" placeholder="资源类型">
                        <el-option label="展示" value="0"></el-option>
                        <el-option label="不展示" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源封面:" class="top" prop="fileListImg">
                    <el-upload
                        class="upload-demo"
                        action="#"
                        :on-remove="beforeRemoveImg"
                        :http-request="uploadImg"
                        multiple
                        :limit="1"
                        :before-upload="handleBeforeUploadImg"
                        :on-exceed="handleExceedImg"
                        :file-list="fileListImg"
                        accept="[image/jpeg, image/png, image/jpg]"
                    >
                        <el-button size="small" type="primary">上传封面</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="资源文件:" class="top" prop="fileListImg">
                    <el-upload
                        class="upload-demo"
                        action="#"
                        :on-remove="beforeRemove"
                        :http-request="upload"
                        multiple
                        :limit="1"
                        :before-upload="handleBeforeUpload"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                        :accept="accept"
                    >
                        <el-button size="small" type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="determine">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            :close-on-click-modal="false"
            :title="titleVideo"
            :visible.sync="showvideo"
            v-if="showvideo"
            width="90%"
            :append-to-body="true"
        >
            <!-- v-if="showvideo" -->
            <video style="height: 85vh" controls="controls" autoplay :src="src" />
        </el-dialog>
    </div>
</template>
<script>
import { dicData } from '@/assets/commjs/dictypeData'
import { queryData, play, uploadFile, updateFile, deleteFile } from '@/api/center/DropEvent.js'
export default {
    name: 'resourceDocument',
    components: {},
    data() {
        return {
            rules: {
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                type: [{ required: true, message: '资源类型不能为空', trigger: 'blur' }],
                state: [{ required: true, message: '资源状态不能为空', trigger: 'blur' }],
                fileListImg: [{ required: true, message: '请选择文件', trigger: 'blur' }]
            },
            accept: '.pdf',
            tableData: [],
            formInline: {
                type: '0',
                name: '',
                state: '1'
            },
            fileList: [],
            fileListImg: [],
            dialogVisible: false,
            showvideo: false,
            title: '',
            loading: false,
            form: {
                state: '',
                type: '',
                searchValue: ''
            },
            src: '',
            titleVideo: '',
            stateList: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '展示'
                },
                {
                    value: '1',
                    label: '不展示'
                }
            ],
            typeList: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: 'PDF'
                },
                {
                    value: '1',
                    label: '视频'
                }
            ],
            fileType: ['pdf']
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 250 + 'px'
        },
        // 表单重置
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
        },
        // 查询
        onSubmit() {
            this.loading = true
            queryData(this.form).then(res => {
                this.tableData = res.data
                this.loading = false
            })
        },

        // 新增数据
        determine() {
            if (this.formInline.name == '') {
                return this.$message({
                    message: '请输入名称',
                    type: 'warning'
                })
            }
            if (this.fileList.length == 0) {
                return this.$message({
                    message: '请上传文件',
                    type: 'warning'
                })
            }
            let form = new FormData()
            form.append('name', this.formInline.name)
            form.append('type', this.formInline.type)
            form.append('state', this.formInline.state)
            //   form.append("picture",'');

            if (this.fileList.length == 0 || this.fileList[0].url == '') {
                form.append('multipartFile', '')
            } else {
                this.fileList.forEach(item => {
                    form.append('multipartFile', item)
                })
            }
            if (this.fileListImg.length == 0 || this.fileListImg[0].url == '') {
                form.append('picture', '')
            } else {
                this.fileListImg.forEach(item => {
                    form.append('picture', item)
                })
            }
            if (this.title == '新增') {
                uploadFile(form).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        })
                        this.onSubmit()
                        this.handleClose()
                    }
                })
            }
            if (this.title == '修改') {
                form.append('id', this.formInline.id)
                updateFile(form).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        })
                        this.onSubmit()
                        this.handleClose()
                    }
                })
            }
        },
        // \取消
        handleClose() {
            ;(this.formInline = {
                type: '0',
                name: '',
                state: '1'
            }),
                (this.fileList = []),
                (this.fileListImg = []),
                (this.dialogVisible = false)
            this.resetForm()
        },
        changeType(e) {
            if (e == 0) {
                this.accept = '.pdf'
                this.fileType = ['pdf']
            } else if (e == 1) {
                this.accept = '.mp4'
                this.fileType = ['mp4']
            }
        },
        // 新增
        add() {
            this.formInline = {}
            this.title = '新增'
            this.dialogVisible = true
        },
        // 修改
        modify(row) {
            // this.formInline = row;
            // this.formInline.name=row.resourceName
            this.title = '修改'

            this.dialogVisible = true
            ;(this.formInline = {
                type: row.type + '',
                name: row.resourceName,
                state: row.state + '',
                id: row.id
            }),
                this.changeType(row.type)((this.fileList = [{ name: row.fileName, url: '' }]))
            this.fileListImg = [{ name: row.imgName, url: '' }]
        },
        // 删除
        deleteF(e) {
            deleteFile({ id: e }).then(res => {
                if (res.code == 'A0000') {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    })
                    this.onSubmit()
                }
            })
        },
        look(row) {
            if (row.type == 0) {
                window.open(row.resUrl)
            } else if (row.type == 1) {
                this.titleVideo = row.resourceName
                play({
                    id: row.id
                }).then(res => {
                    this.src = window.URL.createObjectURL(res)
                    this.showvideo = true
                })
            }
        },
        // 下载
        download(row) {
            play({
                id: row.id
            }).then(res => {
                let blob = new Blob([res], {
                    type: row.type == 1 ? 'video/mp4' : 'application/pdf;chartset=UTF-8'
                })
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a') // 创建a标签
                link.href = url // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
                link.download = row.fileName // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link)
            })
        },
        beforeRemove(file, fileList) {
            this.fileList = []
        },
        beforeRemoveImg(file, fileList) {
            this.fileListImg = []
        },
        upload(params) {
            this.fileList.push(params.file)
        },
        uploadImg(params) {
            this.fileListImg.push(params.file)
        },
        handleExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`)
        },
        handleExceedImg(files, fileList) {
            this.$message.warning(`只能上传1张封面`)
        },
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // 校检文件类型
            if (this.fileType) {
                let fileExtension = ''
                if (file.name.lastIndexOf('.') > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
                }
                const isTypeOk = this.fileType.some(type => {
                    if (file.type.indexOf(type) > -1) return true
                    return !!(fileExtension && fileExtension.indexOf(type) > -1)
                })
                if (!isTypeOk) {
                    this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
                    return false
                }
            }

            this.$message('正在上传文件，请稍候...')

            return true
        },
        // 上传前校检格式和大小
        handleBeforeUploadImg(file) {
            // 校检文件类型
            let fileType = ['image/jpeg', 'image/png', 'image/jpg']
            if (fileType) {
                let fileExtension = ''
                if (file.name.lastIndexOf('.') > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
                }
                const isTypeOk = fileType.some(type => {
                    if (file.type.indexOf(type) > -1) return true
                    return !!(fileExtension && fileExtension.indexOf(type) > -1)
                })
                if (!isTypeOk) {
                    this.$message.error(`文件格式不正确, 请上传${fileType.join('/')}格式文件!`)
                    return false
                }
            }

            this.$message('正在上传文件，请稍候...')

            return true
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-select {
    width: 100%;
}
::v-deep .formDialog {
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        height: auto !important;
    }
}

::v-deep .el-dialog {
    margin-top: 2% !important;
}
::v-deep .el-dialog__body {
    padding: 10px;
    max-height: none !important;
}
</style>
