<table class="form-table">
    <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>
        </div>
    </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">
    新增
</button>

<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");
                {% 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 form-control");
                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>