<template>
  <div>
    <div  class="flex" >
      <div class="basic-main" style="height: 98%;">
        <criteria-paged :model="model" v-ref:paged @sort="sort">
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid='$parent.$parent.curorgid'
                            @res-select="$parent.$parent.getorg"
                            class="select select_list"
                            restype='organization'
                            style="width: 60%">
                </res-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">合同照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_hetong"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_hetong"
                          condition="f_hetong  = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">换表照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_changemeter"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_changemeter"
                          condition="f_changemeter   = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">安检照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_security_check"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_security_check"
                          condition="f_security_check   = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">身份证照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_idcard"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_idcard"
                          condition="f_idcard   = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">房产证照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_house"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_house"
                          condition="f_house   = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">承诺书照片</label>
                <v-select :disabled=false
                          :options='$parent.$parent.pj'
                          :value-single="true"
                          :value.sync="model.f_responsibility_letter"
                          close-on-select
                          placeholder='请选择'
                          v-model="model.f_responsibility_letter"
                          condition="f_responsibility_letter   = '{}'"
                          search=fasle
                >
                </v-select>
              </div>
              <div class="span" style="float:right;">
                <button class="button_search" @click="search()">查 询</button>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <th>
                  <nobr>序号</nobr>
                </th>
                <th>
                  <nobr>客户编号</nobr>
                </th>
                <th>
                  <nobr>客户名称</nobr>
                </th>
                <th>
                  <nobr>客户电话</nobr>
                </th>
                <th>
                  <nobr>客户地址</nobr>
                </th>
                <th>
                  <nobr>组织机构</nobr>
                </th>
                <th>
                  <nobr>合同照片</nobr>
                </th>
                <th>
                  <nobr>换表照片</nobr>
                </th>
                <th>
                  <nobr>安检照片</nobr>
                </th>
                <th>
                  <nobr>身份证照片</nobr>
                </th>
                <th>
                  <nobr>房产证照片</nobr>
                </th>
                <th>
                  <nobr>承诺书照片</nobr>
                </th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;"><nobr>{{$index + 1}}</nobr></td>
              <td style="text-align: center;"><nobr>
                {{row.f_userinfo_code}}
              </nobr> </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_phone}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_orgname}}</nobr>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_hetong=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'合同照片')">查看</button>
                <button v-if="row.f_hetong=='无'" class="btn btn-link" @click.stop="$parent.$parent.$parent.uploadPicture(row,'合同照片')">上传</button>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_changemeter=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'换表&清零')">查看</button>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_security_check=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'安检照片')">查看</button>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_idcard=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'身份证照片')">查看</button>
                <button v-if="row.f_idcard=='无'" class="btn btn-link" @click.stop="$parent.$parent.$parent.uploadPicture(row,'身份证照片')">上传</button>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_house=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'房产证照片')">查看</button>
                <button v-if="row.f_house=='无'" class="btn btn-link" @click.stop="$parent.$parent.$parent.uploadPicture(row,'房产证照片')">上传</button>
              </td>
              <td style="text-align: center;">
                <button v-if="row.f_responsibility_letter=='有'" class="btn btn-link" @click.stop="$parent.$parent.$parent.showPicture(row,'承诺书照片')">查看</button>
                <button v-if="row.f_responsibility_letter=='无'" class="btn btn-link" @click.stop="$parent.$parent.$parent.uploadPicture(row,'承诺书照片')">上传</button>
              </td>

            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
    <!-- 展示图片 -->
    <modal :show.sync="showPictures" width="80%" style="width:auto;"  v-ref:modal middle backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">图片展示</h4>
      </header>
      <article slot="modal-body">
        <div style="padding:0px 0px 10px 0px;margin-left: 20px;overflow: auto;">
          <timeline >
            <timeline-item v-for="item in files"
                           :color="$index === files.length - 1 ? 'blue' : 'default'">
              <div class="row" >


                <p> {{item.days}}</p>

                <!-- 派单 -->
                <div v-for="file in item.arrays" class="col-sm-6">

                  <div style="height:180px;">
                    <img style="height:100%" :src="file.f_downloadURL"/>
                  </div>

                  <div >
                    <div class="showtext">上传时间:&nbsp;<span>{{file.f_uploaddate}}</span></div>
                    <div class="showtext">操作员:&nbsp;<span>{{file.f_username}}</span></div>
                    <div class="showtext">分类:&nbsp;<span>{{file.fusetype}}</span></div>
                    <div class="showtext">文件说明:&nbsp;{{file.fremarks}}</div>
                    <div class="flex-row showtext">
                      <a   target="_blank" :href="file.f_downloadURL">预览</a>
                    </div>
                  </div>
                </div>
              </div>

            </timeline-item>
          </timeline>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
    <!-- 上传图片 -->
    <modal :show.sync="showUpload" width="80%" style="width:auto;"  v-ref:modal1 middle backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">上传图片</h4>
      </header>
      <article slot="modal-body" style="padding:0px 0px 10px 0px;margin-left: 20px;height: 900px;">
        <upload :blodid="modelData.f_userinfo_id"   v-ref:upload  :fusetype="modelData.fusetype" isremark="true" style="width:auto" ></upload>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>

<script>
  import {PagedList, HttpResetClass} from 'vue-client'
const myMap = new Map()

  export default {
    title: '图片统计',
    name: 'pictureManage',
    data () {
      return {
        model: new PagedList('rs/sql/pictureStatisticsQuery', 20),
        pj: [{label: '全部', value: ''}, {label: '有', value: '有'}, {label: '无', value: '无'}],
        // 控制查询条件显示
        searchshow: true,
        curorgid: [this.$login.f.orgid],
        showUpload: false,
        showPictures: false,
        modelData: {
          f_userinfo_id: '',
          fusetype: '',
          businessid: ''
        },
        files: [],
        f_orgid: '',
        da: {
          rows: []
        },
        f_meternumber: ''
      }
    },
    ready () {
      this.search()
    },
    methods: {
      uploadPicture (row, val) {
        this.modelData.fusetype = val
        this.$refs.upload.headers.fusetype = val
        this.modelData.f_userinfo_id = row.f_userinfo_id
        this.showUpload = true
      },
      showPicture (row, val) {
        this.fusetype = val
        this.showPictures = true
        this.files = []
        let condition = `f_blobid = '${row.f_userinfo_id}' and fusetype='${val}' AND f_filename NOT LIKE '%.amr' `
        let http = new HttpResetClass()
        if (row.f_userinfo_id) {
          http.load('POST', 'rs/logic/getAllFiles', {
            data: {
              condition: condition
            }
          }, {resolveMsg: null, rejectMsg: '获取附件出错！！！'}).then((res) => {
            for (var i = 0; i < res.data.days.length; i++) {
              // 循环日期。将files组织成[{day:'',array:''},{day:'',array:''}...]格式
              this.files.push({
                days: null,
                arrays: []
              })
              this.files[i].days = res.data.days[i].uploadday
              for (var j = 0; j < res.data.array.length; j++) {
                // 循环查出来的所有附件

                if (res.data.array[j].uploadday == this.files[i].days) {
                  // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
                  if ((res.data.array[j].fusetype && res.data.array[j].f_filetype.includes('xls'))) {
                    res.data.array[j].splice(i, 1)
                    i--
                    continue
                  }
                  if ((res.data.array[j].fusetype == '安检照片' && res.data.array[j].f_filename.includes('amr'))) {
                    continue
                  }
                  let temp = res.data.array[j].f_downloadpath
                  let URL = temp.substring(temp.lastIndexOf(':\\') + 2)
                  if(res.data.array[j].fusetype == '安检照片') {
                    res.data.array[j].f_downloadURL = 'http://' + location.host + '/rs/image/file/' + res.data.array[j].f_filename
                  }else {
                    res.data.array[j].f_downloadURL = 'http://' + location.host + '/' + URL
                  }
                  this.files[i].arrays.push(res.data.array[j])
                }
              }
            }
          })
        }
      },
      close () {
        this.showUpload = false
        this.showPictures = false
      },
      getorg (val) {
        this.f_orgid = this.$login.convertToIn(val)
        this.f_filialeid = val[0]
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.getorg([this.$login.f.orgid])
        }
        console.log('查询。。。', this.f_orgid)
        if (this.f_orgid) {
          args.condition = `${args.condition} and f_orgid  in ${this.f_orgid}`
        }
        this.model.search(args.condition, args.model)
      }
    },
    computed: {
      ischecked () {
        return function (index, i) {
          // console.log("计算属性")
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      }
    }
  }
</script>
<style>
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>
