<template>
    <div class="video-manage-page">
        <div class="top-wrap">
            <el-button type="primary" @click="handleShowPop('')" v-if="navType!==2">添加视频</el-button>
            <div v-if="navType==2">
            <el-button type="primary" @click="handleShowImgPop('')" >添加视频封面</el-button>
            </div>
            <el-input
                placeholder="关键词搜索"
                v-model="keyword"
                style="maxWidth:520px"
                @input="searchHandle"
                clearable
                v-if="navType!==2"
            >
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
        </div>
        <div class="list-wrap">
            <div class="nav-box">
                <span :class="navType==3?'active':''" @click="handleNavChange(3)">线上路演</span>
                <span :class="navType==2?'active':''" @click="handleNavChange(2)">视频封面库</span>
            </div>
            <el-table
                :data="list"
                border
                style="width: 100%"
                @sort-change="sortChangeHandle"
                v-if="navType!==2"
            >
                <el-table-column
                    prop="Title"
                    label="视频标题"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span style="cursor: pointer;color: #409eff;" @click="handlePreviewVideo(row)">{{row.Title}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Abstract"
                    label="摘要"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="ClassifyNameFirst"
                    label="分类"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span>{{row.ClassifyNameRoot}}</span>
                        <span v-if="row.ClassifyNameFirst">/{{row.ClassifyNameFirst}}</span>
                        <span v-if="row.ClassifyNameSecond">/{{row.ClassifyNameSecond}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="AdminRealName"
                    label="创建人"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="ModifyTime"
                    label="更新时间"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="VideoSeconds"
                    label="时长"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span>{{row.VideoSeconds|formatDuration}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="PublishState"
                    label="状态"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span :style="{color:row.State==2?'#1dd411':''}">{{row.State==2?'已发布':'未发布'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Pv"
                    label="点击量"
                    sortable='custom'
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span :style="{color:row.PvEmail?'#409eff':'',cursor: 'pointer'}" @click="handleShowClickNum(row)">{{row.PvEmail||'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="opt"
                    label="操作"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <!-- 未发布 -->
                        <div v-if="row.State==1">
                            <span style="cursor: pointer;color:#409eff;margin:0 5px;display: inline-block;" @click="handleOpt(row,'发布')">发布</span>
                            <span style="cursor: pointer;color:#409eff;margin:0 5px;display: inline-block;" @click="handleOpt(row,'编辑')">编辑</span>
                            <span style="cursor: pointer;color:#ff0000;margin:0 5px;display: inline-block;" @click="handleOpt(row,'删除')">删除</span>
                        </div>
                        <div v-else>
                            <span style="cursor: pointer;color:#ff0000;margin:0 5px;display: inline-block;" @click="handleOpt(row,'取消发布')">取消发布</span>
                            <span v-if="row.EmailState==1" style="cursor: pointer;color:#1dd411;margin:0 5px;display: inline-block;" @click="handleOpt(row,'群发日志')">群发日志 <span class="warn-tag" v-if="row.EmailHasFail"></span></span>
                            <span v-if="row.EmailState===0&&row.EmailAuth" style="cursor: pointer;color:#409eff;margin:0 5px;display: inline-block;" @click="handleOpt(row,'群发邮件')">群发邮件</span>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                :data="imgList"
                border
                style="width: 100%"
                v-if="navType==2"
            >
                <el-table-column
                    prop="CoverUrl"
                    label="封面图"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <el-image 
                            style="width: 100px; height: 100px"
                            :src="row.CoverUrl" 
                            :preview-src-list="[row.CoverUrl]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="CoverName"
                    label="封面名称"
                    align="center"
                />
                <el-table-column
                    prop="ModifyTime"
                    label="更新时间"
                    align="center"
                />
                <el-table-column
                    prop="opt"
                    label="操作"
                    align="center"
                >
                    <template slot-scope="{row}">
                        <span style="cursor: pointer;color:#409eff;margin:0 5px;display: inline-block;" @click="handleShowImgPop(row)">编辑</span>
                        <span style="cursor: pointer;color:#ff0000;margin:0 5px;display: inline-block;" @click="handleDelVideoCoverImg(row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
				layout="total,prev,pager,next" 
				background
				:current-page="page"
				@current-change="handlePageChange"
				:page-size="pageSize" 
				:total="total"
				style="float:right;margin-top:20px">
			</el-pagination>
        </div>

        <!-- 点击量详情 -->
        <el-dialog
            :visible.sync="showClick"
            :modal-append-to-body='false'
            v-dialogDrag
            width="65vw"
            title="点击量详情"
        > 
            <div style="margin-bottom:118px">
                <!-- <div style="margin-bottom:10px">{{logVideoName}}</div> -->
                <el-table :data="logList" style="width: 100%; margin: 20px 0 30px" ref="clickNumberRef"
                border @sort-change="detailSortChange">
                    <el-table-column prop="Name" label="客户姓名" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.Name||'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Email" label="邮箱地址" align="center">
                    </el-table-column>
                    <el-table-column prop="RecentClickTime" label="最近点击时间" align="center" min-width="140"> </el-table-column>
                    <el-table-column prop="ClickNum" label="点击量" align="center" min-width="140"> </el-table-column>
                </el-table>
                <div>
                    <el-pagination 
                        layout="total,prev,pager,next" 
                        background
                        :current-page="logPage"
                        @current-change="handleLogPageChange"
                        :page-size="logPageSize" 
                        :total="logTotal"
                        style="float:right;margin-top:20px">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>

        <!-- 上传视频封面弹窗 -->
        <el-dialog
            :visible.sync="showImgPop"
            :modal-append-to-body='false'
            v-dialogDrag
            width="50vw"
        > 
            <div slot="title">{{imgPopData.type}}</div>
            <div class="pop-wrap">
                <el-form ref="imgform" :model="imgPopData" label-width="80px" :rules="imgrules">
                    <el-form-item label="封面名称" prop="name">
                        <el-input v-model="imgPopData.name" placeholder="请填写封面名称"></el-input>
                    </el-form-item>
                    <el-form-item label="封面图" prop="imgUrl" :disabled="imgPopData.coverId!=0">
                            <el-input :disabled="imgPopData.coverId!=0" readonly v-model="imgPopData.imgUrl" placeholder="请上传视频封面"></el-input>
                            <el-upload
                                style="display: inline-block;"
                                action=""
                                accept="image/*"
                                :http-request="handleUploadImg"
                                :show-file-list="false"
                                :disabled="imgPopData.coverId!=0"
                            >
                                <el-button type="primary" :disabled="imgPopData.coverId!=0">选择封面</el-button>
                            </el-upload>
                    </el-form-item>
                    <div style="text-align:center;margin:50px 0">
                        <el-button @click="showImgPop=false">取消</el-button>
                        <el-button type="primary" @click="handleSaveImg">保存</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>

        <!-- 预览视频弹窗 -->
        <el-dialog
            :visible.sync="previewPop"
            :modal-append-to-body='false'
            v-dialogDrag
            width="60vw"
            :title="previewPopTitle"
            @close="endingPreview"
        >
         <video style="width: 100%;height: 100%;max-height: 70vh;outline: none;" 
         controls :src="previewVideoUrl" autoplay ref="previewVideo">
            您的浏览器暂不支持,请更换浏览器
         </video>   
        </el-dialog>

        <!-- 群发邮件弹窗 -->
        <el-dialog 
            v-dialogDrag 
            :append-to-body="true" 
            :visible.sync="popEmailData.show" 
            width="900px" 
            title="群发邮件"
        >
        <div class="send-email-wrap">
            <el-form ref="form" :model="popEmailData" label-width="100px">
            <el-form-item label="邮件主题：">
                <div>
                <el-input 
                    placeholder="请输入邮件主题" 
                    v-model="popEmailData.theme" 
                    type="textarea" 
                    maxlength="100"
                    show-word-limit
                    :autosize="{ minRows: 3, maxRows: 5}"
                ></el-input>
                </div>
            </el-form-item>
            <el-form-item label="收件人：">
            <div class="addressee-box">
              <div class="addressee-cancel-box">
                <!-- <el-radio v-model="popEmailData.radio" label="1">默认全部</el-radio> -->
                <el-cascader
                    v-if="popEmailData.show"
                    v-model="popEmailData.varietyVal"
                    :options="popEmailData.varietyOpt"
                    collapse-tags
                    clearable
                    :props="{
                    multiple:true,
                    value:'EnPermissionId',
                    label:'EnPermissionName',
                    children:'Child'
                    }"
                    placeholder="请选择品种权限"
                    style="margin-bottom: 10px;"
                />
                <div class="user-box-hint">取消发送客户信息：</div>
                <el-select
                v-model="popEmailData.customValue"
                multiple
                filterable
                collapse-tags
                placeholder="请选择客户"
                value-key="CompanyId">
                    <el-option
                    v-for="item in popEmailData.customOptions"
                    :key="item.CompanyId"
                    :label="item.CompanyName"
                    :value="item">
                    </el-option>
                </el-select>
                <div class="user-box">
                  <div style="margin-top:10px" class="box">
                    <!-- <el-tooltip 
                      effect="dark" 
                      :content="item.CompanyName" 
                      placement="top"
                      v-for="(item,index) in popEmailData.customValue"
                      :key="item.CompanyId"
                      > -->
                    <el-tag
                      closable
                      v-for="(item,index) in popEmailData.customValue"
                      :key="item.CompanyId"
                      style="margin:0 10px 10px 0"
                      @close="handleDelSelectCompany(item,index)">
                      {{item.CompanyName}}
                    </el-tag>
                    <!-- </el-tooltip> -->
                  </div>
                </div>
              </div>
              <div class="addressee-append-box">
                <el-checkbox v-model="popEmailData.checkUser" style="margin:0 0 10px 20px;width: 100px;">指定人员</el-checkbox>
                <div class="user-box-hint" v-show="popEmailData.checkUser">指定发送人员信息：</div>
                <el-select
                  v-show="popEmailData.checkUser"
                  v-model="popEmailData.value"
                  multiple
                  filterable
                  collapse-tags
                  placeholder="请选择人员"
                  value-key="Id">
                  <el-option
                    v-for="item in popEmailData.options"
                    :key="item.Id"
                    :label="item.Name"
                    :value="item"
                    :disabled="item.Enabled===0">
                    <span>{{item.Name}} &lt;{{item.Email}}&gt;</span>
                  </el-option>
                </el-select>
                <div class="user-box" v-show="popEmailData.checkUser">
                  <div style="margin-top:10px" class="box">
                    <el-tooltip 
                      effect="dark" 
                      :content="item.Email" 
                      placement="top"
                      v-for="(item,index) in popEmailData.value"
                      :key="item.Id"
                      >
                    <el-tag
                      closable
                      style="margin:0 10px 10px 0"
                      @close="handleDelSelectCustom(item,index)">
                      {{item.Name}}
                    </el-tag>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            </el-form-item>
            <div style="text-align:center;margin-bottom:30px;margin-top:40px">
                <el-button type="primary" plain style="margin-right:10px" @click="popEmailData.show=false">取消</el-button>
                <el-button type="primary" @click="handleConfirmSendEmail">确定</el-button>
            </div>
            </el-form>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import { videoENInterface,PVDetailList } from '@/api/modules/reportEnApi'
import * as reportEnInterface from '@/api/modules/reportEnApi';
import {customInterence,videoInterface,reportVarietyENInterence} from '@/api/api.js'
export default {
    filters:{
        formatDuration(e){
            let tem=parseInt(e)
            let min=parseInt(tem/60)
            let sen=parseInt(tem%60)
            if(min>0){
                return `${min}分${sen}秒`
            }else{
                return `${sen}秒`
            }
        }
    },
    data() {
        return {
            keyword:'',
            list:[],
            page:1,
            pageSize:15,
            total:0,
            options:[],
            perList:[],
            SortParam:'',
            SortType:'',

            navType:3,// 2视频封面库 3线上路演
            showImgPop:false,
            imgList:[],
            imgType:'',
            imgPopData:{
                type:'添加封面',
                coverId:0,
                imgUrl:'',
                name:''
            },

            imgrules:{
                name:[{required: true, message: '请输入封面名称', trigger: 'blur'}],
                imgUrl:[{required: true, message: '请上传视频封面', trigger: 'change'}]
            },

            showClick:false,
            logVideoId:0,
            logVideoName:'',
            logPage:1,
            logPageSize:10,
            logTotal:0,
            logList:[],
            logSortType:'',

            // ---------------预览视频弹窗
            previewPop:false,
            previewPopTitle:"",
            previewVideoUrl:"",

            popEmailData:{
                show:false,
                radio:'1',
                checkUser:false,//是否选择指定人员
                options: [],
                value: [],
                customOptions:[],
                customValue:[],
                theme:'',
                videoId:0,
                varietyOpt:[],
                varietyVal:[],
            },
        }
    },
    created() {
        this.getVideoList()
    },
    methods: {
        handleNavChange(type){
            this.page=1
            this.total=0
            this.navType=type
            this.keyword=''
            if(type==2){
                this.handleGetVideoCoverImgList()
            }else{
                this.getVideoList()
            }
            
        },

        searchHandle(){
            this.page=1
            this.getVideoList()
        },
        handlePageChange(page){
            this.page=page
            if(this.navType!==2){
                this.getVideoList()
            }else{
                this.handleGetVideoCoverImgList()
            }
            
        },
        async getVideoList(){
            const params={
                KeyWord:this.keyword,
                PageSize:this.pageSize,
                CurrentIndex:this.page,
            }
            const res=await videoENInterface.roadVideoList(params)
            if(res.Ret===200){
                this.total=res.Data.Paging.Totals 
                this.list=res.Data.List||[]
            }
        },

        //新增\编辑视频
        handleShowPop(item){
            console.log(item);
            sessionStorage.setItem('videoENItem',JSON.stringify(item))
            this.$router.push({
                path:!item?'/videoManageENAdd':'videoManageENEdit'
            })
        },

        //上传封面
        async handleUploadImg(e){
            console.log(e);
            let form = new FormData()
            form.append("file", e.file)
            const res=await customInterence.upload(form)
            if(res.Ret===200){
                this.imgPopData.imgUrl=res.Data.ResourceUrl
            }
        },


        //发布
        async handlePublished({Id}){
            let res=await videoENInterface.roadVideoPublished({Id})
            if(res.Ret===200){
                this.$message.success('发布成功')
                this.getVideoList()
            }
        },

        //取消发布
        async handleCancelPublish({Id}){
            let res=await videoENInterface.roadVideoPublishedCancel({Id})
            if(res.Ret===200){
                this.$message.success('取消发布成功')
                this.getVideoList()
            }
        },

        // 删除
        async handelDel(item){
            const res=await videoENInterface.roadDelVideo({Id:item.Id})
            if(res.Ret===200){
                this.$message.success('删除成功')
                this.getVideoList()
            }
        },

        handleOpt(item,type){
            if(type==='发布'){
                this.handlePublished(item)
                return
            }

            if(type==='编辑'){
                this.handleShowPop(item)
                return
            }

            if(type==='删除'){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handelDel(item)
                }).catch(() => {
                             
                });
                return
            }

            if(type==='取消发布'){
                this.handleCancelPublish(item)
                return 
            }

            if(type==='群发邮件'){
                this.popEmailData.videoId=item.Id
                this.popEmailData.theme='Online Presentation: '+item.Abstract
                this.popEmailData.checkUser=false
                this.popEmailData.varietyOpt=[]
                this.popEmailData.varietyVal=[]
                this.popEmailData.show=true

                this.getAllCustomEmail()
                this.getReportVarietyOpts()
                return
            }

            if(type==='群发日志'){
                this.$router.push({
                    path: '/sendlog',
                    query: { id: item.Id,type:1 },//类型：0英文研报，1英文线上路演
                })
                return
            }

        },

        sortChangeHandle({prop,order}){
            console.log(prop,order)
            this.SortType = order==='ascending'?'asc':order==='descending'?'desc':''
            if(this.SortType.length){
                this.SortParam=prop
            }else{
                this.SortParam=''
            }
            this.getVideoList()
        },

        handleShowClickNum(item){
            if(!item.PvEmail) return
            this.logVideoId=item.Id
            this.logVideoName=item.Title
            this.showClick=true
            this.logPage=1
            this.logList=[]
            this.logTotal=0
            this.logSortType=''
            this.$refs.clickNumberRef && this.$refs.clickNumberRef.clearSort()
            this.getVideoLogslist()
        },

        // 获取点击量详情
        async getVideoLogslist(){
            const params={
                CurrentIndex:this.logPage,
                PageSize:this.logPageSize,
                ReportId:Number(this.logVideoId),
                ReportType:1
            }
            const res=await PVDetailList(params)
            if(res.Ret===200){
                this.logTotal=res.Data.Paging.Totals 
                // this.logCount=res.Data.Count
                this.logList=res.Data.List||[]
            }
        },
        // 点击量详情 - 表格排序
        detailSortChange({ order}){
            this.logSortType=order==='ascending'?'2':order==='descending'?'1':''
            this.getVideoLogslist()
        },
        handleLogPageChange(e){
            this.logPage=e
            this.getVideoLogslist()
        },

        //获取视频封面列表
        async handleGetVideoCoverImgList(){
            const res=await videoENInterface.videoCoverImgList({
                PageSize:this.pageSize,
                CurrentIndex:this.page
            })
            if(res.Ret===200){
                this.total=res.Data.Paging.Totals 
                this.imgList=res.Data.List||[]
            }
        },

        //显示添加视频封面弹窗
        handleShowImgPop(item){
            this.imgPopData.name=''
            this.imgPopData.imgUrl=''
            this.imgPopData.coverId=0
            if(!item){
                this.imgPopData.type='添加封面'
            }else{
                this.imgPopData.type='编辑封面'
                this.imgPopData.name=item.CoverName
                this.imgPopData.imgUrl=item.CoverUrl
                this.imgPopData.coverId=item.Id
            }
            this.showImgPop=true
            this.$nextTick(()=>{
                this.$refs.imgform.clearValidate();
            })
        },

        //保存视频封面
        handleSaveImg(){
            this.$refs.imgform.validate((valid)=>{
                if(valid){
                    let params={
                        Id:Number(this.imgPopData.coverId),
                        CoverName:this.imgPopData.name,
                        CoverUrl:this.imgPopData.imgUrl
                    }
                    videoENInterface.videoCoverImgSave(params).then(res=>{
                        if(res.Ret==200){
                            this.handleGetVideoCoverImgList()
                            if(this.imgPopData.type=='添加封面'){
                                this.$message.success('添加成功')
                            }else{
                                this.$message.success('编辑成功')
                            }
                            this.showImgPop=false
                        }
                    })
                }
            })
        },

        //删除视频封面
        handleDelVideoCoverImg(item){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    videoENInterface.videoCoverImgDel({
                        Id:Number(item.Id)
                    }).then(res=>{
                        if(res.Ret===200){
                            this.$message.success('删除成功')
                            this.handleGetVideoCoverImgList()
                        }
                    })
            }).catch(() => {
                             
            });
        },
        
        // 预览视频
        handlePreviewVideo({Title,VideoUrl}){
            this.$refs.previewVideo && this.$refs.previewVideo.play()
            this.previewPopTitle = Title
            this.previewVideoUrl = VideoUrl
            this.previewPop = true
        },
        // 结束预览弹窗关闭回调 -- 暂停视频
        endingPreview(){
            this.$refs.previewVideo && this.$refs.previewVideo.pause()
        },

        // 获取该报告对应的品种权限数据
        getReportVarietyOpts(){
            reportVarietyENInterence.varietyList({
                VideoId:this.popEmailData.videoId
            }).then(res=>{
                if(res.Ret===200){
                    const arr=res.Data||[]
                    this.popEmailData.varietyOpt=arr.filter(e=>{
                        e.Child&&e.Child.forEach(_e=>delete _e.Child)
                        return e.Child&&e.Child.length>0
                    })
                    // 设置全部选中
                    this.popEmailData.varietyOpt.forEach(e=>{
                        e.Child.forEach(_e=>{
                        this.popEmailData.varietyVal.push([e.EnPermissionId,_e.EnPermissionId])
                        })
                    })
                    this.getCustomListEnFun()
                }
            })
        },

        // 获取所有邮件客户
        async getAllCustomEmail(){
            const res=await reportEnInterface.customEmailList({
                CurrentIndex:this.page,
                PageSize:10000,
            })
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.popEmailData.options=arr
            }
        },
        // 获取英文客户列表
        getCustomListEnFun(){
            let arr=[]
            this.popEmailData.varietyVal&&this.popEmailData.varietyVal.forEach(_e => {
                arr.push(_e[1])
            });
            if(!(arr.length>0)){
                this.popEmailData.customOptions=[]
                return 
            }

            customInterence.getCustomListEn({
                PageSize:100000,
                CurrentIndex:1,
                EnPermissionIds:arr.join(',')
            }).then(res=>{
                if(res.Ret!==200) return 
                this.popEmailData.customOptions = res.Data.List || []
            })
        },
        //删除选中的群发客户
        handleDelSelectCustom(item,index){
            this.popEmailData.value.splice(index,1)
        },
        //删除选中的英文客户
        handleDelSelectCompany(item,index){
            this.popEmailData.customValue.splice(index,1)
        },
        //发送邮件
        handleConfirmSendEmail(){
            let ids=[]
            this.popEmailData.value.forEach(item=>{
                ids.push(item.Id)
            })
            let customIds=[]
            this.popEmailData.customValue.forEach(item=>{
                customIds.push(item.CompanyId)
            })

            if(this.popEmailData.checkUser&&ids.length===0){//指定人员
                this.$message.warning('请选择需要发送邮件的人员')
                return
            }
            if(!this.popEmailData.checkUser){
                ids=[]
            }

            if(!this.popEmailData.theme){
                this.$message.warning('请填写邮件主题')
                return
            }
            if(this.popEmailData.theme.length>100){
                this.$message.warning('邮件主题请控制在100个字符以内')
                return
            }
            const arr=[]
            this.popEmailData.varietyVal&&this.popEmailData.varietyVal.forEach(_e => {
                arr.push(_e[1])
            });
            videoENInterface.videoEmailSend({
                ReportId:this.popEmailData.videoId,
                EmailIds:ids.join(','),
                Theme:this.popEmailData.theme,
                EnPermissions:arr,
                NoCompanyIds:customIds,
            }).then(res=>{
                if(res.Ret===200){
                    this.$message.success('发送成功')
                    this.popEmailData.show=false
                    this.getVideoList();
                }
            })
        }
    },
}
</script>

<style lang="scss">
.video-manage-page{
    .list-wrap{
        .el-image:hover{
            border:1px solid #409eff;
        }
    }
}
.send-email-wrap{
    .el-input{
        width: 100%;
    }
}
</style>

<style lang="scss" scoped>
.video-manage-page{
    .top-wrap{
        height: 80px;   
        border: 1px solid #DCDFE6;
        background-color: #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
    }
    .list-wrap{
        border: 1px solid #DCDFE6;
        background-color: #fff;
        border-radius: 4px;
        margin-top: 30px;
        padding: 30px;
        padding-bottom: 80px;
        .nav-box{
            margin-bottom: 30px;
            span{
                padding-bottom: 5px;
                font-size: 16px;
                display: inline-block;
                margin-right: 30px;
                cursor: pointer;
            }
            .active{
                color: #409eff;
                border-bottom: 2px solid #409eff;
            }
        }
        .warn-tag { 
            width: 6px;
            height:6px;
            border-radius: 50%;
            background: #f00;
            display: inline-block;
            position: absolute;
            right: -10px;
            top: 30%;
        }
    }
    // .pop-wrap{

    // }
    .choose-img-wrap{
        padding-bottom: 80px;
        .list{
            display:flex;
        flex-wrap:wrap;
        }
        .item{
            flex-shrink:0;
            text-align:center;
            margin-right:20px;
            margin-bottom:20px;
            border: 1px solid rgb(199, 198, 198);
            padding: 5px;
            border-radius: 4px;
        }
    }
    .pre-img-box{
        position: relative;
        width: 120px;
        height: 120px;
        .del{
            display: none;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 24px;
            background-color: rgba($color: #000000, $alpha: 0.8);
            cursor: pointer;
        }
        &:hover{
            .del{
                display: block;
            }
        }
    }
}
.send-email-wrap{
    .addressee-box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .addressee-cancel-box,.addressee-append-box{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: calc(50% - 12px);
    }
    .user-box-hint{
      color: #999999;
    }
    .user-box{
      border: 1px dashed #DCDFE6;
      border-radius: 4px;
      padding: 20px;
      margin-top: 20px;
      .box{
        max-height: 200px;
        overflow-y: auto;
      }
    }
  }
}
</style>