<template>
    <div class="pdf-list-wrap">
        <div class="head-wrap container-wrap">
            <el-button type="primary" @click="handleOperate('add',{})">添加文件</el-button>
            <div class="select-box">
                <el-date-picker
                    style="margin-right:20px;"
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" @change="searchHandle">
                    </el-date-picker>
                <el-input placeholder="请输入文件名称" v-model="searchText"
                    prefix-icon="el-icon-search" clearable @input="searchHandle"
                    style="width:240px;"
                ></el-input>
            </div>
        </div>
        <div class="table-wrap container-wrap">
            <el-table border :data="tableData" v-loading="tableLoading">
            <el-table-column 
                v-for="column in tableColumns" :key="column.key" 
                :label="column.label" align="center">
                <template slot-scope="{row}">
                    <span v-if="column.key==='PdfUrl'" class="text-ellipsis" :title="row.PdfUrl">
                        <a :href="row.PdfUrl" 
                            target="_blank" 
                            style="color:#409EFF;"
                        >{{row.PdfUrl}}</a>
                    </span>
                    <!-- <div v-else-if="column.key==='ShareUrl'" class="cell-item-copy">
                        <span class="text-ellipsis">{{row.ShareUrl}}</span>
                        <span class="copy-btn" @click="copyLink(row)">复制</span>
                    </div> -->
                    <span v-else class="text-ellipsis">{{row[column.key]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                    <span style="cursor: pointer;color:#66b1ff;margin-right: 20px;" @click="handleOperate('edit',row)">编辑</span>
                    <span style="cursor: pointer;color:#66b1ff;margin-right: 20px;" @click="handleOperate('showUrl',row)">微信分享</span>
                    <span style="cursor: pointer;color:red;" @click="handleOperate('delete',row)">删除</span>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination layout="total,prev,pager,next,jumper" background :current-page="pageNo"
                @current-change="handleCurrentChange" :page-size="pageSize" :total="total"
                style="text-align: end; margin-top: 20px">
            </el-pagination>
        </div>
        <!-- 添加/编辑pdf弹窗 -->
        <el-dialog
            v-if="modifyPDFDialogShow" 
            :visible.sync="modifyPDFDialogShow" 
            :close-on-click-modal="false" 
            :modal-append-to-body="false"
            width="689px" v-dialogDrag center
            :title="`${pdfState.PdfId===0?'新增':'编辑'}文件`"
            @close="modifyPDFDialogShow=false"
        >
            <div class="dialog-container">
                <el-form
                    ref="formRef"
                    label-position="left"
                    hide-required-asterisk
                    label-width="80px"
                    :model="pdfState"
                    :rules="formRules"
                    >
                    <el-form-item label="上传文件" prop="PdfUrl" class="upload-form-item">
                        <el-button  type="primary" :disabled="pdfState.PdfUrl.length" :loading="isUploading" @click.stop="handUpload">{{`${isUploading?'正在':'点击'}`}}上传</el-button>
                        <el-upload
                            ref="upload"
                            action=""
                            accept="application/pdf"
                            :http-request="handleUploadPdf"
                            :show-file-list="false"
                            style="display: flex;"
                        >
                        </el-upload>
                        <div class="file-item" v-if="pdfState.PdfUrl.length">
                            <img src="~@/assets/img/pdf-icon.png" alt="" class="file-icon">
                            <span class="file-name">{{`${pdfState.OriginName||''}.pdf`}}</span>
                            <span class="status-icon" @click="handleRemove">
                                <i class="el-icon-success"></i>
                            </span>
                        </div>
                    </el-form-item>
                    
                    <el-form-item label="文件名称" prop="PdfName">
                        <el-input
                        v-model="pdfState.PdfName"
                        style="width: 80%"
                        placeholder="请输入文件名称"
                        />
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="foot-container">
                <el-button type="primary" @click="handleChangePDF">确 定</el-button>
                <el-button @click="modifyPDFDialogShow=false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 微信分享弹窗 -->
        <el-dialog
            v-if="showUrlDialog" 
            :visible.sync="showUrlDialog" 
            :close-on-click-modal="false" 
            :modal-append-to-body="false"
            width="689px" v-dialogDrag center
            title="微信分享"
            @close="showUrlDialog=false"
        >
            <div class="share-dialog-container">
                <p>{{pdfState.PdfName}}</p>
                <img :src="pdfState.ShareUrl" alt="" v-if="pdfState.ShareUrl">
                <p v-else style="color:#999;margin:30px 0;">分享链接还未生成,请稍后刷新重试</p>
                <el-button type="primary" @click="showUrlDialog=false">知道了</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
import {pdfInterface} from '@/api/modules/pdfApi.js'
export default {
    data() {
        return {
            /* select */
            searchText:'',
            dateRange:['',''],
            /* table */
            tableColumns:[{
                label:'文件名称',
                key:'PdfName'
            },{
                label:'PDF链接',
                key:'PdfUrl'
            },/* {
                label:'小程序链接',
                key:'ShareUrl'
            }, */{
                label:'更新时间',
                key:'ModifyTime'
            }],
            tableData:[],
            tableLoading:false,
            /* page */
            pageNo:1,
            pageSize:10,
            total:1,
            /* dialog */
            modifyPDFDialogShow:false,
            showUrlDialog:false,
            pdfState:{
                PdfId:0,//新增0,编辑非0,
                PdfName:'',
                PdfUrl:''
            },
            formRules:{
                PdfName:[{required:true,message:'文件名称不能为空'},{max:30,message:'文件名称不能超过30个字符'}],
                PdfUrl:[{validator:this.checkPDFLink}]
            },
            uploadingLoading:null,
            isUploading:false
        };
    },
    methods: {
        getTableData(){
            this.tableLoading = true
            pdfInterface.getPdfList({
                PageSize:this.pageSize,
                CurrentIndex:this.pageNo,
                Keyword:this.searchText,
                StartTime:this.dateRange?this.dateRange[0]||'':'',
                EndTime:this.dateRange?this.dateRange[1]||'':''
            }).then(res=>{
                if(res.Ret!==200) return 
                this.tableLoading = false
                this.tableData = res.Data.List
                this.total = res.Data.Paging.Totals
            })
        },
        searchHandle(){
            this.pageNo = 1
            this.getTableData()
        },
        //操作PDF:添加,编辑,删除,展示微信链接
        handleOperate(type,data){
            if(type==='delete'){
                this.handleDelete(data)
                return
            }
            if(type==='showUrl'){
                this.pdfState=_.cloneDeep(data)
                this.showUrlDialog = true
                return
            }
            if(type==='add'){
                this.pdfState = {
                    PdfId:0,
                    PdfName:'',
                    PdfUrl:''
                }
            }
            if(type==='edit'){
                this.pdfState = _.cloneDeep(data)
            }
            
            this.modifyPDFDialogShow = true
            
        },
        //删除文件
        handleDelete(data){
            //二次确认
            this.$confirm('删除后不可恢复,是否确认删除?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                pdfInterface.deletePdf({
                    PdfId:data.PdfId,
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success('删除成功')
                    this.getTableData()
                })
            }).catch(()=>{})
        },
        //改变页码
        handleCurrentChange(pageNo){
            this.pageNo = pageNo
            this.getTableData()
        },
        //添加,编辑pdf
        handleChangePDF(){
            let flag = false
            this.$refs.formRef.validate((valid) => {
                flag = valid
            })
            if(!flag) return
            this.pdfState.PdfId===0?this.addPDF():this.editPDF()
        },
        addPDF(){
            const {PdfName,PdfUrl,OriginName} = this.pdfState
            pdfInterface.addPdf({
                PdfName,PdfUrl,OriginName
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('添加成功')
                this.getTableData()
                this.modifyPDFDialogShow=false
            })
        },
        editPDF(){
            const {PdfId,PdfName,PdfUrl,OriginName} = this.pdfState
            pdfInterface.editPdf({
                PdfId,PdfName,PdfUrl,OriginName
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('编辑成功')
                this.getTableData()
                this.modifyPDFDialogShow=false
            })
        },
        //上传pdf文件
        async handleUploadPdf(e){
            if(e.file.type!=='application/pdf'){
                this.$message.warning('请选择pdf格式的文件!')
                return
            }
            this.isUploading = true
            let form = new FormData()
            form.append("file", e.file)
            const res = await pdfInterface.uploadPdf(form)
            if(res.Ret===200){
                this.pdfState.PdfUrl = res.Data
                this.pdfState.PdfName = e.file.name.slice(0,-4).trim()
                this.pdfState.OriginName = e.file.name.slice(0,-4).trim()
                this.isUploading = false
                this.$refs.formRef&&this.$refs.formRef.clearValidate();
            }
            
        },
        //移除已上传的文件
        handleRemove(){
            if(this.isUploading) return
            this.pdfState.PdfUrl = ''
            this.pdfState.PdfName=''
        },
        //点击上传按钮
        handUpload(){
            if(this.pdfState.PdfUrl.length) return
            this.$refs.upload.$el.getElementsByTagName('input')[0].click()
        },
        //上传文件自定义rule
        checkPDFLink(rule,value,callback){
            if(!this.pdfState.PdfUrl){
                return callback(new Error('请上传文件'))
            }else{
                callback()
            }
        },
        //复制小程序链接
        async copyLink(data){
            try{
                await navigator.clipboard.writeText(data.ShareUrl)
                this.$message.success('复制成功')
            }catch(err){
                this.$message.error('复制失败')
            }
        },
    },
    mounted(){
        this.getTableData()
    }
};
</script>

<style lang="scss">
.pdf-list-wrap{
    .el-dialog{
        .upload-form-item{
            .el-form-item__content{
                display: flex;
            }
        }
    }
}
</style>

<style scoped lang="scss">
.pdf-list-wrap{
    .text-ellipsis{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .container-wrap{
        padding:20px;
        background-color: #fff;
        border-radius: 4px;
    }
    .head-wrap{
        display: flex;
        justify-content: space-between;
        .select-box{
            margin-left: auto;
        }
    }
    .table-wrap{
        margin-top:20px;
        box-sizing: border-box;
        min-height: calc(100vh - 222px);
        .cell-item-copy{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .copy-btn{
                padding:4px 14px;
                background-color: #ECF5FF;
                border: 1px solid #B3D8FF;
                border-radius: 4px;
                color:#409EFF;
                cursor: pointer;
                margin-left: 5px;
                min-width: 60px;
                box-sizing: border-box;
            }
        }
        
    }
    .share-dialog-container{
        text-align: center;
        img{
            display: block;
            width:300px;
            margin: 30px auto;
        }
        .el-button{
            margin-bottom: 25px;
        }
    }
    .dialog-container{
        .file-item{
            display: flex;
            align-items: center;
            margin-left: 15px;
            img{
                display: inline-block;
                width:18px;
                margin-right: 12px;
            }
            .file-name{
                color:#999999;
                margin-right: 20px;
            }
            i{
                font-size: 16px;
                color: #67C23A;
                &::before{
                    content: "\E79C";
                }
            }
            &:hover{
                i{
                    color: #999999;
                    &::before{
                        content: "\e79d";
                    }
                }
            }
        }
    }
}
</style>
