<template>
  <div class="auto">
      <form novalidate class="form-horizontal" style="width: 100%;margin: auto">
        <div class="row col-xs-12 col-sm-12">
            <div  class="col-4">
              <lable>小区名称</lable>
              <input class="form-control" type="text" readonly v-model="paper.f_residential_area"
                     disabled="disabled"/>
            </div>
        </div>
        <div class="form-group col-xs-12 col-sm-12" style="margin-top: 10px">
          <div class="auto" style="width: 100%;float: left;" >
            <label class="text-left font">小区宣传照片</label>
            <div class="auto">
              <div class="panel">
                <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                  <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                    <div class="row">
                      <div class="col-xs-4 col-sm-3 col-md-2" style="margin-bottom: 10px;margin-right: 30px" v-for="(index,img) in paper.f_all_imgs">
                        <img :src="`rs/image/file/${img.f_overall_path}`" alt="小区宣传照片" @click="open_f" :width="150" :height="200"></img>
                        <!--<img-self :src="img.f_overall_path" alt="总体安检照片" :width="150" :height="200"></img-self>-->
                        <!--<img src="../../assets/remove.png" @click="delfile('f_overall_path', img.f_overall_path,index)" class="imgs" style="width: 30px;" alt="">-->
                      </div>
                    </div>
                  </div>
                  <div class="row text-right div-photo">
                    <!--<button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_overall_path', '总体安检照片1')">拍照</button>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </form>
  </div>
  <image-viewer :src="paperImgs" :show="showpaperImg" :linenumber="linenumber" @clone_f="clone_p" alt="安检总体图片"></image-viewer>
  <back-page :need-back='true' @flag="$back()"></back-page>
</template>

<script>
  import Vue from 'vue'
  import * as Util from '../Util'
  import { HttpResetClass } from 'vue-client'
  import RadioGroup from 'vue-client/src/vue-strap/src/radioGroup'
  import Radio from 'vue-client/src/vue-strap/src/radioBtn'
  import co from 'co'
  export default {
    title: '用户反馈',
    data() {
      return {
        isback:false,
        defectDevice:{},
        detail:{},
        callObj:null,
        user:{},
        showpaperImg:false,
        linenumber:1,
        paperImgs:[]
      }
    },
    props: ['idx','paper'],
    components: {
      RadioGroup,
      Radio
    },
    methods: {
      open_f () {
        // 打开组件
        this.showpaperImg = true
        console.log('打开图片查看器')
      },
      clone_p () {
        // 关闭组件
        this.showpaperImg = false
        console.log('关闭图片查看器')
      },
    },
    ready() {
      for (let i in this.paper.f_all_imgs){
        this.paperImgs.push({url:  `rs/image/file/${this.paper.f_all_imgs[i].f_overall_path}` })
      }
      if(this.paperImgs.length>0) {
        this.linenumber = Math.ceil(this.paperImgs.length / 3)
        console.log('行数--linenumber',this.linenumber)
      }
    },
    watch:{
    }
  }
</script>
<style>
  .text-left{
    text-align:left;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .showInput{
    font: 14px PingFang-SC-Medium;
    color: #666666;
  }
  .info{
    margin-top: 15px;
    border-radius: 5px;
    background-color: #f3faff;
  }
  .btn-photo{
    border: 0;
    border-radius: 7px;
    background-color: #7dc1f4;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .btn-voice{
    border-radius: 7px;
    border: 1px solid #dedede;
    background-color: #f5fbff;
    font: 15px PingFang-SC-Bold;
    color: #499edf;
  }
  .save-btn{
    width: 25%;
    background-color:#499edf;
    border-radius: 6px;
    color: #FFFFFF;
    font: 15px PingFang-SC-Bold;
  }
  .upload-btn{
    width: 25%;
    background-color:#ffffff;
    border: 1px solid #499edf;
    border-radius: 6px;
    color: #499edf;
    font: 15px PingFang-SC-Bold;
  }
  .repair-btn{
    width: 25%;
    border: 1px solid #499edf;
    border-radius: 6px;
    font: 15px PingFang-SC-Bold;
  }
  .div-photo1{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 5%;
    left: 13%;
  }
</style>
