<template>
    <div class="CardReconciliation-all">
        信用卡对账
        <div class="CardReconciliation-Conditions">
            <div class="Conditions-li">
                <label>卡类型</label>
                <el-select style="width: 100px;" size="small" v-model="valuecard" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="Conditions-li">
                <label style="margin-left:15px ;">时间段</label>
                <el-date-picker
                style="width: 300px;"
                size="small"
                v-model="value"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            <div class="Conditions-li">
                <el-upload
                accept=".xls, .xlsx"  
                class="pop-upload"
                ref="upload"
                action=""
                :file-list="fileList"
                :auto-upload="false"
                :multiple="true"
                :on-change="handleChange"
                :on-remove="handleRemove"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                name="files"
                >
                    <el-button style="margin-left:15px ;" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left:15px ;" @click="submitUpload" size="small" type="primary">上传</el-button>
                </el-upload>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value:[],
            valuecard:'',
            options:[],
            fileList:[],
        }
    },
    methods:{
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //获取基础数据
        InvitationOfficialActivityInitBasicData(){
            var url="/api/Groups/InvitationOfficialActivityInitBasicData";
            var that=this;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer ',
                },
            }).then(function(res){
                if(res.data.code==200){
                    that.options=res.data.data.cardTypeData;
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning',
                        offset:50
                    });
                }
            })
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
        handleChange(file, fileList) {
            if (fileList.length > 1 && fileList.status !== "fail") {
                fileList.splice(0, 1);
            } else if (fileList.status === "fail") {
                errorMsg("上传失败，请重新上传！");
                fileList.splice(0, 1);
            }
            this.fileList=fileList
        },
        //删除文件
        beforeRemove(file,fileList){
            if(file && file.status=="success"){
                return this.$confirm('此文件已上传至服务器此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });     
                    reject(false)     
                });
            }
        },
        // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
        handleRemove(file, fileList) {
            this.fileList = fileList
            if (file && file.status=="success") {
                var that = this;
                var url = "/api/Resource/OfficialActivitiesDelFile"
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data:{
                        id:that.id,
                        fileName:file.name
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            }
            
        },
        //点击文件列表中已上传的文件
        handlePreview(file){
            console.log(file);
            window.open(file.url);
        },

        //上传服务器
        submitUpload() {
            var verdict=false
            if(this.valuecard==""||this.value.length<=0){
                return this.$message.warning('请选择条件后再上传！');
            }
            //判断是否有文件再上传
            if (this.fileList.length === 0) {
                return this.$message.warning('请选取文件后再上传！');
            }
            // 下面的代码将创建一个空的FormData对象:
            const formData = new FormData()
            // 你可以使用FormData.append来添加键/值对到表单里面；
            this.fileList.forEach((file) => {
                if(file.raw!=undefined){
                    verdict=true;
                    formData.append('file', file.raw);
                }
            })
            // formData.append('cardType', Number(this.valuecard));
            // formData.append('beginDt', this.disposeTime(this.value[0]));
            // formData.append('endDt', this.disposeTime(this.value[1]));
            if(!verdict){
                return
            }
            var that = this;
            var url = "/api/Financial/PostCreditCardBill?cardType="+that.valuecard+"&beginDt="+that.disposeTime(that.value[0])+"&endDt="+that.disposeTime(that.value[1])
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:formData
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message.success(res.data.msg);
                    window.open(res.data.data.url)
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
    },
    mounted(){
        this.InvitationOfficialActivityInitBasicData();
    }
}
</script>
<style>
.CardReconciliation-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
    min-width: 900px;
}
.CardReconciliation-Conditions{
    margin-top: 10px;
    display: flex;
}
.Conditions-li label{
    font-size: 14px;
    color: #555;
}
</style>