<div class="row" id="addPhotos">
    <div class="col-md-12">
        <table class="form-table" style="margin-left: 30px">
            <thead >
            <tr >
                <th >类型</th>
                <th>相册</th>
                <th>设为封面</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="photosTbody">
            {% set exists_photo_ids = "" %}
            {% for item in images %}
            {% if exists_photo_ids != "" %}
            {% set exists_photo_ids = exists_photo_ids~"," %}
            {% endif %}
            {% set exists_photo_ids = exists_photo_ids~item.image_id %}
            <tr>
                <td>
                    <select name="exists_photo[{{ item.image_id }}][type]" style="margin-right: 50px">
                        {% for i in photoType %}
                        <option {{ i.id == item.image_type?"selected":"" }} value="{{ i.id }}">{{ i.value }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td>
                    <img src="{{siteUrl}}{{item.path}}" height="90" width="140"  style="margin-right: 50px">
                </td>
                <td>
                    <input type="radio" name="frontCover" style="margin-right: 50px" value="{{item.image_id}}" {{ result.frontCover_id == item.image_id?"checked":"" }} />
                </td>
                <td>
                    <input type="button" value="删除" class="button action cancel existsCancel">
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <input type="hidden" name="exists_photo_ids" value="{{exists_photo_ids}}" >
        <button type="button" id="housePicture" class="button action" data-toggle="modal" style="margin-top: 10px;margin-left: 30px">
            新增
        </button>
    </div>
</div>

<script>
    (function($){
        $(document).ready(function(){
            //新增房源相册
            $("#housePicture").click(function(){
                var tr = $("<tr>");
                var td = $("<td>");
                var select = $("<select>").attr({"name":"data["+i+"][type]"}).addClass("form-control").css("width","30%");
                {% for item in photoType %}
                    select.append($("<option>").attr("value",{{item.id}}).append('{{item.value}}'));
                {% endfor%}
                var td1 = td.clone().append(select);

                var file = $("<input>").attr({"type":"file","name":"files["+i+"]"}).addClass("picFiles form-control");
                var td2 = td.clone().append(file);

                var radio = $("<input>").attr({"type":"radio","name":"frontCover","value":i}).addClass("form-control");
                var td3 = td.clone().append(radio);

                var picDelet = $("<input>").attr({"type":"button","value":"删除"}).addClass("button action existsCancel");
                var td4 = td.clone().append(picDelet);

                tr.append(td1).append(td2).append(td3).append(td4);

                $("#photosTbody").append(tr);

                i++
            });
            $("#photosTbody").on("change",".picFiles",function(){
                var that = this;
                if (this.files && this.files[0]){
                    var reader = new FileReader();
                    reader.onload = function (e){
                        var img = $("<img>").attr({"src":e.target.result,"heghit":90,"width":140});
                        $(that).before(img);
                        $(that).hide();
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            $("#photosTbody").on("click",".existsCancel",function(){
                $(this).parent().parent().remove();
            });
        });
    })(jQuery);
</script>