<template>
    <div class="billUploading-all">
        <div class="billUploading-head">
            <div style="display: flex;">
                <div class="billUploading-head-li">
                    <label>团组名称:</label>
                    <el-select style="width:220px" @change="gnamechange" v-model="DiId" clearable filterable
                        placeholder="请选择">
                        <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.groupName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="billUploading-head-li">
                    <label>费用板块:</label>
                    <el-select style="width:220px" @change="ctablechange" v-model="Ctable" clearable filterable
                        placeholder="请选择">
                        <el-option v-for="item in Ctablelist" :key="item.id" :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <el-button v-if="panduanbtn" @click="ExportGroupByModule" type="primary">下载此模块票据</el-button>
            <el-button v-if="panduanbtn" @click="ExportGroupZip" type="primary">下载所有票据</el-button>
        </div>
        <div class="billUploading-content">
            <div class="billUploading-content-table">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="fileName"
                    label="文件名称">
                    </el-table-column>
                    <el-table-column
                    label="操作" 
                    width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="DeleteGroupFiles(scope.row)" type="primary" icon="el-icon-download"></el-button>
                        <el-button size="mini" @click="DeleteGroupFile(scope.row)"  type="danger" icon="el-icon-delete"></el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="billUploading-content-upload">
                <el-upload
                class="upload-demo"
                action="http://132.232.92.186:8888/api/Groups/CommonSaveFile"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-remove="beforeRemove"
                multiple
                :limit="20"
                :data="datas"
                :on-exceed="handleExceed"
                :file-list="fileList"
                name="files">
                <div style="display: flex;">
                    <el-button style="margin-right: 10px;" size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">选择文件上传，且不超过20M。</div>
                </div>
                </el-upload>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            DiId:'',
            userId:'',
            datas:{},
            fileList: [
                // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
                // {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
            ],
            delegationInfoList:[],
            Ctable:'',
            Ctablelist:[],
            tableData:[],
            panduanbtn:false,
            useridarr:[21,22,233,187,330,281]
        }
    },
    methods:{
        //获取团组
        GetGroupNameList(){
            var url = "/api/Business/GetGroupNameList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    portType: 1,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.delegationInfoList=res.data.data;
                    that.DiId=that.delegationInfoList[0].id;
                    that.QuerySetData();
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //获取Ctable
        QuerySetData(){
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    dataType: 16,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.Ctablelist=res.data.data;
                    that.Ctable=that.Ctablelist[0].id;
                    that.handledatas();
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //票据上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleSuccess(file){
            this.QueryGroupModelFile();
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 20 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //处理datas
        handledatas(){
            this.datas={
                Ctable:this.Ctable,
                Diid:this.DiId,
                Cid:0,
                Userid:this.userId
            }
            this.QueryGroupModelFile();
        },
        gnamechange(){
            this.handledatas()
        },
        ctablechange(){
            this.handledatas()
        },
        //获取list
        QueryGroupModelFile(){
            var url = "/api/Groups/QueryGroupModelFile"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    ctable: that.Ctable,
                    diid: that.DiId,
                    cid:0,
                    userid:that.panduanuserid(that.userId)
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.tableData=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //下载票据
        ExportGroupZip(){
            var url = "/api/Groups/ExportGroupZip"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    diid: that.DiId,
                    isModule:0
                }
            }).then(function (res) {
                if(res.data.code==200){
                    window.open(res.data.data.url)
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                    });
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //下载模块票据
        ExportGroupByModule(){
            var url = "/api/Groups/ExportGroupByModule"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    diid: that.DiId,
                    ctable:that.Ctable
                }
            }).then(function (res) {
                if(res.data.code==200){
                    window.open(res.data.data.url)
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                    });
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //删除
        DeleteGroupFile(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url = "/api/Groups/DeleteGroupFile"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data:{
                        id: row.id,
                        userId: that.userId,
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                        });
                        that.QueryGroupModelFile();
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //单独下载
        DeleteGroupFiles(row){
            window.open(row.url)
        },
        //panduan
        panduanuserid(val){
            if(this.useridarr.indexOf(val)!=-1){
                this.panduanbtn=true;
                return -1
            }else{
                this.panduanbtn=false;
                return val
            }
        }
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.GetGroupNameList();
    }
}
</script>
<style>
    .billUploading-all{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        height: 100%;
        min-height: 830px;
    }
    .billUploading-head-li{
        margin-right: 15px;
    }
    .billUploading-head-li label {
        color: #606266;
        font-size: 15px;
        font-weight: 600;
    }
    .billUploading-head {
        width: 950px;
        display: flex;
        justify-content: space-between;
    }
    .billUploading-content-table{
        width: 950px;
        margin-bottom: 20px;
    }
    .billUploading-content{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .billUploading-content-upload{
        width: 601px;
    }
</style>