<template>
    <el-form
        ref="form"
        label-width="110px"
        v-loading.fullscreen.lock="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="背景设置" name="1">
            <el-form-item v-if="comp.props.bgImg.readonly!=='1'" label="图片">
            <el-upload
                class="upload-demo"
                :action="url"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="uploadBefore"
                :on-remove="uploadRemove"
                list-type="picture"
                :with-credentials="true"
                :show-file-list="true"
                :file-list="uploadImgList"
                accept="image/jpeg, image/jpg, image/png"
            >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-input placeholder="请输入图片地址" v-model="comp.props.bgImg.val"></el-input>
            <label class="prop-intro">{{comp.props.bgImg.description}}</label>
            </el-form-item>

            <el-form-item label="适配" v-if="comp.props.fitType.readonly!=='1'">
            <el-select v-model="comp.props.fitType.val" placeholder="请选择">
                <el-option label="拉伸" value="1"></el-option>
                <el-option label="平铺" value="2"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="颜色" v-if="comp.props.bgColor.readonly!=='1'">
            <el-color-picker v-model="comp.props.bgColor.val"></el-color-picker>
            </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="输入设置" name="2">
            <el-form-item v-if="comp.props.manualInput.readonly!=='1'" label="开启">
            <el-switch
                v-model="comp.props.manualInput.val"
                active-value="1"
                inactive-value="0"
                :disabled="comp.props.scan.val==0"
                @change="changeSwitch()"
            ></el-switch>
            </el-form-item>

            <el-form-item
            label="输入边框"
            v-if="comp.props.inputBorderColor.readonly!=='1'&&comp.props.manualInput.val=='1'"
            >
            <el-color-picker v-model="comp.props.inputBorderColor.val"></el-color-picker>
            </el-form-item>

            <el-form-item
            label="输入框icon"
            v-if="comp.props.inputIcon.readonly!=='1'&&comp.props.manualInput.val=='1'">
                <el-upload
                class="upload-demo"
                :action="url"
                :on-success="iconUploadSuccess"
                :on-error="uploadError"
                :before-upload="uploadBefore"
                :on-remove="iconUploadRemove"
                list-type="picture"
                :with-credentials="true"
                :show-file-list="true"
                :file-list="iconImgList"
                accept="image/jpeg, image/jpg, image/png">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-input placeholder="请输入图片地址" v-model="comp.props.inputIcon.val"></el-input>
            </el-form-item>
            <el-form-item
            label="查询按钮图片"
            v-if="comp.props.searchBtnImg.readonly!=='1'&&comp.props.manualInput.val=='1'">
                <el-upload
                class="upload-demo"
                :action="url"
                :on-success="searchUploadSuccess"
                :on-error="uploadError"
                :before-upload="uploadBefore"
                :on-remove="searchUploadRemove"
                list-type="picture"
                :with-credentials="true"
                :show-file-list="true"
                :file-list="searchImgList"
                accept="image/jpeg, image/jpg, image/png">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-input placeholder="请输入图片地址" v-model="comp.props.searchBtnImg.val"></el-input>
            </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="扫码设置" name="3">
            <el-form-item v-if="comp.props.scan.readonly!=='1'" label="开启">
            <el-switch
                v-model="comp.props.scan.val"
                active-value="1"
                inactive-value="0"
                :disabled="comp.props.manualInput.val==0"
                @change="changeSwitch()"
            ></el-switch>
            </el-form-item>

            <el-form-item
            label="扫码按钮图片"
            v-if="comp.props.scanBtnImg.readonly!=='1'&&comp.props.scan.val=='1'">
                <el-upload
                    class="upload-demo"
                    :action="url"
                    :on-success="sacnUploadSuccess"
                    :on-error="uploadError"
                    :before-upload="uploadBefore"
                    :on-remove="scanUploadRemove"
                    list-type="picture"
                    :with-credentials="true"
                    :show-file-list="true"
                    :file-list="scanImgList"
                    accept="image/jpeg, image/jpg, image/png">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-input placeholder="请输入图片地址" v-model="comp.props.scanBtnImg.val"></el-input>
            </el-form-item>
        </el-collapse-item>
        </el-collapse>
    </el-form>
</template>

<script>
export default {
    name: "CompScanCodeProps",
    props: ["cfg", "comp"],
    data() {
        return {
            uploadImgList: [],
            iconImgList: [],
            scanImgList: [],
            searchImgList: [],
            url: this.sup8._appConf.apiUrl.alioss,
            loading: false,
            activeNames: ["1", "2", "3"]
        };
    },
    methods: {
        handleChange(val) {
            console.log(val);
        },
        uploadSuccess(response, file, fileList) {
            if (response.flag && response.data !== undefined) {
                this.uploadImgList = [response.data];
                this.comp.props.bgImg.val = response.data.url;
                this.loading = false;
                this.$message.success("上传成功");
            }
        },
        iconUploadSuccess(response, file, fileList) {
            if (response.flag && response.data !== undefined) {
                this.iconImgList = [response.data];
                this.comp.props.inputIcon.val = response.data.url;
                this.loading = false;
                this.$message.success("上传成功");
            }
        },
        sacnUploadSuccess(response, file, fileList) {
            if (response.flag && response.data !== undefined) {
                this.sacnImgList = [response.data];
                this.comp.props.scanBtnImg.val = response.data.url;
                this.loading = false;
                this.$message.success("上传成功");
            }
        },
        searchUploadSuccess(response, file, fileList) {
            if (response.flag && response.data !== undefined) {
                this.searchImgList = [response.data];
                this.comp.props.searchBtnImg.val = response.data.url;
                this.loading = false;
                this.$message.success("上传成功");
            }
        },
        uploadError(err, file, fileList) {
            this.$message.error("上传失败");
            this.loading = false;
        },
        uploadBefore(file) {
            const size = 1024 * 500;
            const typeArr = ["image/jpeg", "image/jpg", "image/png"];
            if (!typeArr.includes(file.type)) {
                this.$message.warning("请上传png/jpg类型的图片");
                return false;
            }
            if (file.size > size) {
                this.$message.warning("上传图片不能超过500kb");
                return false;
            }
            this.loading = true;
        },
        uploadRemove(file, fileList) {
            this.uploadImgList = [];
            this.comp.props.bgImg.val = "";
        },
        iconUploadRemove(file, fileList) {
            this.iconImgList = [];
            this.comp.props.inputIcon.val = "";
        },
        scanUploadRemove(file, fileList) {
            this.scanImgList = [];
            this.comp.props.scanBtnImg.val = "";
        },
        searchUploadRemove(file, fileList) {
            this.searchImgList = [];
            this.comp.props.searchBtnImg.val = "";
        },
        changeSwitch() {
            this.$forceUpdate();
        }
    },
    watch: {},
    created() {
        var that = this;

        that.mergeCompProps(that.comp);
    },
    mounted: function() {
        var that = this;
        console.log("扫码", that.comp);
    }
};
</script>

<style scoped>
.el-collapse-item__content {
  padding-bottom: 0 !important;
}
</style>
