<template><el-drawertitle="上传视频"size="50%":visible.sync="drawer":direction="direction"><div class="content"><div class="upload-box" v-if="!secondStep"><!--on-exceed：超出数量限制时的钩子file-list：上传的文件列表          --><el-uploadclass="upload-demo"drag:data="uploadData":action="actionUrl":headers="headers":on-success="handleSuccess":on-error="handleError":before-upload="beforeUpload":file-list="fileList":limit="1"accept=".mp4,.mov,.mpeg,.avi"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip"><div>(1) 文件大小： 最大 500 MB。</div><div>(2) 比例：9:16, 16:9 和 1:1。</div><div>(3) 格式：.mp4, .mov, .mpeg, .avi。</div><div>投放位置为TikTok限制：分辨率大于720*1280 px , 码率大于 516 Kbps , 时长 5-60s。</div></div></el-upload></div><div class="batch-box" v-if="secondStep"><el-tableref="multipleTable":data="fileList"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-column label="文件名"><template slot-scope="scope"><div class="video-mes"><div class="video-mes-lef"><img :src="scope.row.video_cover_url" /></div><div class="video-mes-rig"><div class="name-box">{{ scope.row.file_name }}<!-- <i class="el-icon-edit"></i> --></div><div class="video-mes-cont"><span>{{ scope.row.duration }}</span> | <span>{{ scope.row.width }}*{{ scope.row.height }}</span> | <span>{{ scope.row.bit_rate }} Mbps</span> | <span>{{ scope.row.size }} MB</span></div></div>                </div></template></el-table-column><!-- <el-table-columnprop="name"label="广告位要求校验"width="180"><template slot-scope="scope"><i class="el-icon-circle-check"></i><i class="el-icon-circle-close"></i>准备好上传</template></el-table-column><el-table-columnprop="status"label="状态" width="180"><template slot-scope="scope"><i class="el-icon-circle-check"></i><i class="el-icon-circle-close"></i>准备好上传</template></el-table-column><el-table-columnprop="remark"label="需要解决的问题"></el-table-column> --></el-table></div></div><div class="demo-drawer__footer"><div class="footer-lef">选择了 {{ multipleSelection.length }}/{{ fileList.length }}</div><div class="footer-rig"><el-button @click="cancelForm">取 消</el-button><el-button type="primary" @click="dataFormSubmit" >上传</el-button></div></div>
</el-drawer>
</template>
<script>//import { filetiktokupload } from "@/api/advertising/index";import store from "@/store";export default {data() {return {          actionUrl: '/api/file/tiktok/upload',headers: {agent_token: store.getters.access_token,},fileList: [],  // 存储上传的文件列表uploadData: {advertiserId: '', // Replace with actual advertiserIdtype: 'video'       // Replace with actual type if necessary},secondStep: false,multipleSelection: [],advertiser_id: "",checkedItem: null,checkedIndex: null,     checked: false,         drawer: false,loading:false,    direction: 'rtl',    };},methods: {init(advertiserId){this.reset()this.uploadData.advertiserId = advertiserIdthis.drawer = true;},      reset(){this.secondStep = falsethis.fileList = []//视频上传失败的时候 该字段重置才能重新上传this.multipleSelection = []        },beforeUpload(file) {const isVideo = file.type.indexOf('video/') > -1;const isLt1G = file.size / 1024 / 1024 / 1024 < 0.5;  // 限制文件大小为500Mbif (!isVideo) {this.$message.error('上传文件只能是视频格式!');return false;}if (!isLt1G) {this.$message.error('上传视频大小不能超过500Mb!');return false;}return true;},handleError(err, file, fileList){this.init()},handleSuccess(response, file, fileList) {if(response.code == 0){let info = response.datathis.$message.success('视频上传成功')this.fileList = []this.fileList.push({            video_id: info.video_id,video_cover_url: info.video_cover_url,preview_url: info.preview_url,file_name: info.file_name,width: info.width,height: info.height,duration: info.duration,bit_rate: (info.bit_rate/1024/1024).toFixed(2),size: (info.size/1024/1024).toFixed(2)})this.secondStep = true}else if(response.code == -1){this.$message.error('上传视频失败，请重试');this.init(this.uploadData.advertiserId)}},handleSelectionChange(val) {this.multipleSelection = val;},dataFormSubmit(){                if(this.multipleSelection.length == 0) {this.$message.error('请选择上传的文件');return}this.$emit("refreshDataList", this.multipleSelection);this.drawer = false;},cancelForm(){this.reset()this.drawer = false;},}};
</script>
<style scoped>
.video-mes-lef{ margin-right: 20px; width: 60px; height: 60px;}
.video-mes-lef img{ width: 100%; height: 100%; object-fit: contain;}
.video-mes{ display: flex; align-items: center;}
.content >>> .el-upload, .content >>> .el-upload-dragger{ width: 100%;}
.content >>> .el-upload-dragger{ height: 267px;}
.content >>> .el-upload-dragger .el-icon-upload{ margin-top: 90px;}
.el-icon-circle-check,.el-icon-circle-close{ margin-right: 6px;}
.el-icon-circle-check{ color: green}
.el-icon-circle-close{ color: red}
.el-icon-edit{ font-size: 14px;}
.footer-lef{ font-size: 14px;}
.content{ padding: 0 20px; height: calc(100% - 50px); overflow-y: scroll;}
>>>.demo-drawer__footer{padding: 0 20px;display: flex;align-items: center;justify-content: space-between;
}
>>>.el-drawer__header{border-bottom: 1px solid #EBEEF5;padding-bottom: 15px;
}
</style>