<template>
    <div class="advertisingSpaceContainer">
        <div class="contentForm" v-loading="submitLoading">
            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="140px">
                <el-row type="flex" justify="center">
                     <el-col :span="colSize">
                        <el-form-item label="上传首页轮播图：">
                            <imageUpload :filePath="filepath" :value="showFileListValueUp" @remove="fileRemoveUp" @input="fileSuccessUp"></imageUpload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="colSize">
                        <el-form-item label="详情页banner：">
                            <imageUpload :filePath="filepath" :value="showFileListValueDown" :maxNumber="1"  @remove="fileRemoveDown" @input="fileSuccessDown"></imageUpload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="confirm">
                <el-button class="button-width" type="primary" :loading="submitLoading" @click="beforeSubmit">更新信息
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import imageUpload from '@/components/imageUpload/index';
import uploadFile from '@/mixins/upload.js';
import advertisementAPI from "@/api/advertisement";
import {debounce} from '@/utils/index';
export default {
    mixins: [uploadFile],
    name: 'advertisingSpace',
    components: {imageUpload},
    data() {
        return {
            filepath: 'advertisingSpaceImageUpload',
            showFileListValueUp: '',
            showFileListValueDown: '',
            fileListUp: [],
            fileListDown: [],
            // 展示用file
            showFileListUp: [],
            showFileListDown: [],
            form: {},
            submitLoading: false,
            colSize: 22,
            rules: {},
        };
    },
    mounted() {
       this.initData()
    },
    methods: {
        fileSuccessUp(value) {
            this.fileListUp = [];
            if (value && value.length > 0) {
                this.fileListUp = value;
            }
        },
        fileRemoveUp(value) {
            this.fileListUp = [];
            if (value && value.length > 0) {
                this.fileListUp = value;
            }
        },
        fileSuccessDown(value) {
            this.fileListDown = [];
            if (value && value.length > 0) {
                this.fileListDown = value;
            }
        },
        fileRemoveDown(value) {
            this.fileListDown = [];
            if (value && value.length > 0) {
                this.fileListDown = value;
            }
        },
        getFileList() {
            advertisementAPI
                .getAdvertisementList({})
                .then((res) => {
                    if (res.code === 1000 && res.data.length > 0) {
                        let arrUp = [];
                        let arrDown = [];
                        let showFileListUp = [];
                        let showFileListDown = [];
                        res.data.forEach((item) => {
                            if(item.imageType && item.imageType === '0') {
                                arrUp.push(item.imageFile);
                                showFileListUp.push(item);
                            }else {
                                arrDown.push(item.imageFile);
                                showFileListDown.push(item);
                            } 
                        });
                        this.showFileListValueUp = arrUp.join();
                        this.showFileListValueDown = arrDown.join();
                        this.showFileListUp = showFileListUp;
                        this.showFileListDown = showFileListDown;
                        this.fileListUp = arrUp;
                        this.fileListDown = arrDown;
                    }
                })
                .catch((err) => {});
        },
        uploadNoticeFile(imageType) {
            if(imageType && imageType === '0') {
                if (this.showFileListUp.length > 0) {
                    let showFileValue = this.showFileListValueUp.split(',');
                    // 存在附件
                    let addFile = [];
                    let removeFile = [];
                    if (this.fileListUp.length >= 0) {
                        this.fileListUp.forEach((item) => {
                            if (!showFileValue.includes(item)) {
                                // 判断为新添加文件
                                addFile.push(item);
                            }
                        });
                        this.showFileListUp.forEach((item) => {
                            if (!this.fileListUp.includes(item.imageFile)) {
                                // 判断为删除文件
                                removeFile.push(item);
                            }
                        });
                    }
                    this.addNoticeFile(addFile, imageType);
                    this.removeNoticeFile(removeFile);
                } else {
                    // 完全新增附件
                    if (this.fileListUp.length > 0) {
                        this.fileListUp.forEach((item) => {
                            let parms = {
                                imageFile: item,
                                imageType: imageType
                            };
                            advertisementAPI
                                .addOrUpdateAdvertisement(parms)
                                .then((res) => {})
                                .catch((err) => {});
                        });
                        this.fileListUp = [];
                    }
                }
            }else {
                if (this.showFileListDown.length > 0) {
                    let showFileValue = this.showFileListValueDown.split(',');
                    // 存在附件
                    let addFile = [];
                    let removeFile = [];
                    if (this.fileListDown.length >= 0) {
                        this.fileListDown.forEach((item) => {
                            if (!showFileValue.includes(item)) {
                                // 判断为新添加文件
                                addFile.push(item);
                            }
                        });
                        this.showFileListDown.forEach((item) => {
                            if (!this.fileListDown.includes(item.imageFile)) {
                                // 判断为删除文件
                                removeFile.push(item);
                            }
                        });
                    }
                    this.addNoticeFile(addFile, imageType);
                    this.removeNoticeFile(removeFile);
                } else {
                    // 完全新增附件
                    if (this.fileListDown.length > 0) {
                        this.fileListDown.forEach((item) => {
                            let parms = {
                                imageFile: item,
                                imageType: imageType
                            };
                            advertisementAPI
                                .addOrUpdateAdvertisement(parms)
                                .then((res) => {})
                                .catch((err) => {});
                        });
                        this.fileListDown = [];
                    }
                }
            }
        },
        removeNoticeFile(array) {
            if (array.length > 0) {
                array.forEach((item) => {
                    advertisementAPI
                        .deleteAdvertisementById(item)
                        .then((res) => {})
                        .catch((err) => {});
                });
            }
        },
        addNoticeFile(array, imageType) {
            array.forEach((item) => {
                let parms = {
                    imageFile: item,
                    imageType: imageType
                };
                advertisementAPI
                    .addOrUpdateAdvertisement(parms)
                    .then((res) => {})
                    .catch((err) => {});
            });
        },
        initData() {
            this.showFileListValueUp = '';
            this.showFileListValueDown = '';
            this.showFileListUp = [];
            this.showFileListDown = [];
            this.fileListUp = [];
            this.fileListDown = [];
            this.getFileList()
        },
        submitcontent() {
          this.uploadNoticeFile("0")
          this.uploadNoticeFile("1")
          setTimeout(()=>{
                this.initData();
                this.submitLoading = false;
                this.$message.success('更新信息成功！');
          },2000)
        },
        beforeSubmit: debounce(function (){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.submitLoading) {
                        return
                    }
                    this.submitLoading = true;
                    this.submitcontent()
                }
            });
        },
            2000,
            true
        ),
    },
}
</script>

<style scoped lang="scss">
.advertisingSpaceContainer {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    /*添加css样式*/
    ::v-deep  input::-webkit-outer-spin-button,
    ::v-deep  input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    ::v-deep  input[type="number"] {
        -moz-appearance: textfield;
    }

    .contentForm {
        padding-top: 3rem;

        ::v-deep  .el-input.is-disabled .el-input__inner {
            color: $color-333;
        }

        .secondaryTitle {
            line-height: 1.5rem;
            font-weight: bold;
            padding-left: 6px;
            border-left: 3px solid $theme-color;
            margin: 1rem 0;
        }

        .form-item {
            width: 45%;
        }

        .confirm {
            width: 90%;
            margin-top: 60px;
            margin-bottom: 40px;
            text-align: center;
        }
    }

    ::v-deep  .el-form-item__content {
        text-align: left;
    }

    ::v-deep  .el-date-editor {
        width: 600px;
    }

    ::v-deep  .el-select {
        width: 600px;
    }

    ::v-deep  .el-cascader {
        width: 600px;
    }

    ::v-deep  .el-input {
        width: 600px;
    }

    .button-width {
        width: 120px;
    }

}
</style>
