<template>
    <div class="collection-add">

        <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
        <div class="collection-add-box">
            <el-form :model="collection" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="藏品名称(套):" prop="collectionTitle" label-width="120px">
                    <el-input v-model="collection.collectionTitle" maxlength="20" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="藏品头图:" prop="collectionImg" label-width="120px">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="collection.imageUrl" :src="collection.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span style="color: red;">请按照规范上传尺寸为750px * 750px的照片</span>
                </el-form-item>
                <el-form-item label="设置套系时间:" prop="collectionTime" label-width="120px">
                    <el-date-picker v-model="collection.dataput" type="datetimerange" class="up-input-right"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="线下礼品兑换:" prop="giftRedemption" label-width="120px">
                    <el-radio-group v-model="collection.resource">
                        <el-radio label="可兑换"></el-radio>
                        <el-radio label="不可兑换"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label-width="120px">
                    <el-button type="primary" @click="subSet()">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            collection: {
                collectionTitle: '',
                collectionTime: '',
                resource: '',
                imageUrl: '',
                dataput: ''
            },
            rules: {
                collectionTitle: [
                    { required: true, collection: '请输入藏品名称', trigger: 'blur' }
                ],

                collectionImg: [
                    { required: true, collection: '请设置头图', trigger: 'blur' }
                ],
                collectionTime: [
                    { required: true, collection: '请设置时间', trigger: 'blur' }
                ],
                giftRedemption: [
                    { required: true, collection: '请设置是否可兑换', trigger: 'blur' }
                ],
            },


        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.collection.imageUrl = URL.createObjectURL(file.raw);
        },
        //限制图片大小
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg" || file.type === "image/png";
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG和PNG 格式!");
            }
            //调用[限制图片尺寸]函数
            this.limitFileWH(750, 750, file).then((res) => {
                file.isFlag = res
            })
            return isJPG && file.isFlag;
        },
        //限制图片尺寸
        limitFileWH(E_width, E_height, file) {
            let _this = this;
            let imgWidth = "";
            let imgHight = "";
            const isSize = new Promise(function (resolve, reject) {
                let width = E_width;
                let height = E_height;
                let _URL = window.URL || window.webkitURL;
                let img = new Image();
                img.onload = function () {
                    imgWidth = img.width;
                    imgHight = img.height;
                    let valid = img.width == width && img.height == height;
                    valid ? resolve() : reject();
                }
                img.src = _URL.createObjectURL(file);
            }).then(() => {
                return true;
            }, () => {
                _this.$message.warning({
                    message: '上传文件的图片大小不合符标准,宽需要为' + E_width + 'px，高需要为' + E_height + 'px。当前上传图片的宽高分别为：' + imgWidth + 'px和' +
                        imgHight + 'px',
                    btn: false
                })
                return false;
            });
            return isSize
        },
        //
        subSet() {
            console.log("提交")
        }
    }
}


</script>

<style>
.collection-add {
    width: 700px;
    height: 100%;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid #ccc;
}

.collection-add-box {
    padding: 40px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 447px;
    height: 447px;
    line-height: 447px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>