{% load i18n %}
{% load admin_urls static admin_list simpletags %}

<style type="text/css">
    .lucky-image-list-upload-{{ widget.name }} .el-upload-dragger {
        width: 100%;
        height: 100%;
        line-height: 178px;
    }

    .lucky-image-list-upload-{{ widget.name }} .el-upload-list--picture-card {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        width: 558px;
    }

    .lucky-image-list-upload-{{ widget.name }} .el-upload-list--picture-card .el-upload-list__item {
        width: 178px;
        height: 178px;
    }

    .lucky-image-list-upload-{{ widget.name }} .el-upload--picture-card {
        width: 178px;
        height: 178px;
        line-height: 178px;
    }

    .upload-img-mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        background-color: rgba(0, 0, 0, .5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>

<div class="lucky-image-list-upload-{{ widget.name }} ">
    <input type="text" name="{{ widget.name }}" value="" maxlength="150" required="required" id="id_{{ widget.name }}"
           style="display: none;">

    <el-upload name="lucky-async-image"
               action="/admin/temp_file_upload/"
               accept="{{ widget.attrs.accept }}"
               list-type="picture-card"
               :file-list="img_list"
               multiple
               :auto-upload="true"
               :on-change="change_file"
               :on-remove="handle_remove"
               :on-success="upload_success">
        <i class="el-icon-plus"></i>
    </el-upload>

</div>


<script type="text/javascript">

    new Vue({
        el: '.lucky-image-list-upload-{{ widget.name }}',
        data: {
            img_list: [],
            image_url: null,
            field_id: ''
        },
        mounted() {
            this.field_id = 'id_' + "{{ widget.name }}"
            let image_list = '{{ widget.value | safe }}'
            console.log('image_list', image_list)

            if (image_list === 'None') {

            }else {
                this.img_list = JSON.parse(image_list)
            }

            $('input[name="{{ widget.name }}"]').attr("id", this.field_id)
        },
        methods: {
            update_file_list(file_list){
                let value_file_list = []
                for (let file of file_list) {
                    if (file.response) {
                        value_file_list.push(file.response.file_path)
                    }else {
                        value_file_list.push(file.name)
                    }
                }

                value_file_list = JSON.stringify(value_file_list)
                console.log('update_file_list', value_file_list)
                document.getElementById(this.field_id).value = value_file_list
            },
            upload_success(res, file, fileList) {
                console.log('upload_success file', res.file_path)
                console.log('upload_success fileList', fileList)
                this.update_file_list(fileList)
            },
            handle_remove(file, fileList) {
                console.log('upload_success fileList', fileList)
                this.update_file_list(fileList)
            },
            change_file(file, fileList) {
                console.log('upload_success fileList', fileList)
            },
        }
    })

</script>