<style>
    #photoTables > tbody > tr {
        border-top: 1px solid #ddd;
    }
    #photoTables > tbody > tr select {
        width: 60px;
        margin-left: 30px;
    }
</style>
<div id="addPhotos">
    <div class="row">
        <label for="photos" class="color-red" style="float: left;margin-top: 25px;margin-left: 15px;">房源相册:</label>
        <div class="col-md-7">
            <table class="form-table" id="photoTables">
                <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]" class="form-control" >
                            {% 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" >
                    </td>
                    <td>
                        <input type="radio" name="frontCover"  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>
        </div>
        <button type="button" id="housePicture" class="btn btn-success" data-toggle="modal" style="margin-left: 130px;margin-bottom: 20px;clear: both;display: block;">
            新增
        </button>
        <input type="hidden" name="exists_photo_ids" value="{{exists_photo_ids}}" >
    </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");
                {% 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("btn btn-info 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>