<template>
  <div style="height: 100%;width: 100%;padding:10px 0px 10px 0px;">
    <div class="auto">
      <div v-show="row.f_data_sources != '调压箱'">
        <partial-view v-ref:pv>
          <div class="row text-left" style="padding-bottom: 10px">
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
              <span class="col-sm-9">{{ rowdata.f_card_id }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <span class="col-sm-6" v-show="otherSearch">
                <button class="btn" @click="hidden()" style="padding: 2px 8px">
                   <span class="glyphicon glyphicon-chevron-up"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="row text-left">
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">用户姓名:</label>
              <span class="col-sm-9">{{ rowdata.f_user_name }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">用户电话:</label>
              <span class="col-sm-9">{{ rowdata.f_user_phone }}</span>
            </div>
          </div>
          <div class="row">
            <button class="btn btn-xs" v-show="!otherSearch" style="width: 100%" @click="hidden()">
              <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
            </button>
          </div>
          <div class="row" v-show="otherSearch">
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
              <span class="col-sm-9">{{ rowdata.f_meternumber }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">行政区域:</label>
              <span class="col-sm-9">{{ rowdata.f_distinct }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">用户状态:</label>
              <span class="col-sm-9">{{ rowdata.f_user_state }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">气表状态:</label>
              <span class="col-sm-9">{{ rowdata.f_table_state }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">用户地址:</label>
              <span class="col-sm-9">{{ rowdata.f_table_state }}</span>
            </div>
          </div>
        </partial-view>
      </div>
      <div v-show="row.f_data_sources == '调压箱'">
        <partial-view v-ref:pv1>
          <div class="row text-left" style="padding-bottom: 10px">
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <label class="col-sm-3 control-label">出厂编号:</label>
              <span class="col-sm-9">{{ rowdata.f_serial_num }}</span>
            </div>
            <div class="col-sm-6 text-left" style="padding-bottom: 10px">
              <span class="col-sm-6" v-show="otherSearch">
                <button class="btn" @click="hidden()" style="padding: 2px 8px">
                   <span class="glyphicon glyphicon-chevron-up"></span>
                </button>
              </span>
            </div>
          </div>
        </partial-view>
      </div>
    </div>
    <div class="auto row">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.search' v-ref:criteria>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患处理状态</label>
                <v-select placeholder='隐患处理状态'
                          :value.sync="model.f_is_eliminate"
                          :value-single="true"
                          :options='$parent.$parent.f_is_eliminates'
                          v-model="model.f_is_eliminate"
                          close-on-select clear-button
                          condition="dc.f_is_eliminate  = '{}'">
                </v-select>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患整改方式</label>
                <v-select placeholder='隐患整改方式'
                          :value.sync="model.f_rectify_mode"
                          :value-single="true"
                          :options='$parent.$parent.f_rectify_modes'
                          v-model="model.f_rectify_mode"
                          close-on-select clear-button
                          condition="dc.f_rectify_mode  = '{}'">
                </v-select>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <button class="button_search button_spacing" @click="search()">查询</button>
                <export-excel :data="$parent.$parent.getCondition"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/SafeExportExcel"
                              sql-name="getDefectCenterByCardId"
                              template-name='隐患列表导出'
                              :choose-col="true"></export-excel>
                <span class="col-sm-2" v-show="$parent.$parent.listOtherSearch">
                  <button class="btn" @click="$parent.$parent.listSearchHidden()" style="padding: 2px 8px">
                     <span class="glyphicon glyphicon-chevron-up"></span>
                  </button>
                </span>
              </div>
            </div>
            <div class="row" v-show="$parent.$parent.listOtherSearch">
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">起始时间</label>
                <datepicker
                  :value.sync="model.f_start_discover_time"
                  placeholder='隐患发现时间' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_start_discover_time"
                  condition="dc.f_discover_time  >= '{} 00:00:00'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">截止时间</label>
                <datepicker
                  :value.sync="model.f_end_discover_time"
                  placeholder='隐患发现时间' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_end_discover_time"
                  condition="dc.f_discover_time  <='{} 23:59:59'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患来源</label>
                <v-select placeholder='隐患来源'
                          :value.sync="model.f_data_sources"
                          :value-single="true"
                          :options='$parent.$parent.sources'
                          v-model="model.f_data_sources"
                          close-on-select clear-button
                          condition="dc.f_data_sources  = '{}'">
                </v-select>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患整改人</label>
                <input type="text" class="form-control" v-model="model.f_task_man"
                       style="height:34px;margin-top: 8px" placeholder="隐患整改人"
                       condition="dc.f_task_man like '%{}%'">
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患上报人</label>
                <input type="text" class="form-control" v-model="model.f_report_man"
                       style="height:34px;margin-top: 8px" placeholder="隐患上报人"
                       condition="dc.f_report_man like '%{}%'">
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">跟进时间(起)</label>
                <datepicker
                  :value.sync="model.f_last_start_defect_task_time"
                  placeholder='最后一次跟进时间范围' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_last_start_defect_task_time"
                  condition="dc.f_last_defect_task_time  >= '{} 00:00:00'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">跟进时间(止)</label>
                <datepicker
                  :value.sync="model.f_last_end_defect_task_time"
                  placeholder='最后一次跟进时间范围' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_last_end_defect_task_time"
                  condition="dc.f_last_defect_task_time  <='{} 23:59:59'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">整改时间(起)</label>
                <datepicker
                  :value.sync="model.f_start_rectify_time"
                  placeholder='最后一次整改时间范围' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_start_rectify_time"
                  condition="dc.f_rectify_time  >= '{} 00:00:00'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">整改时间(止)</label>
                <datepicker
                  :value.sync="model.f_end_rectify_time"
                  placeholder='最后一次整改时间范围' style="width:60%"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  v-model="model.f_end_rectify_time"
                  condition="dc.f_rectify_time  <='{} 23:59:59'">
                </datepicker>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患类型</label>
                <v-select placeholder='隐患类型'
                          :value.sync="model.f_defect_type"
                          :options='$parent.$parent.f_defect_types'
                          v-model="model.f_defect_type"
                          multiple
                          close-on-select>
                </v-select>
              </div>
              <div class="col-sm-4 form-group form-input-group">
                <label class="control-label">隐患名称</label>
                <v-select placeholder='隐患名称'
                          :value.sync="model.f_defect_name"
                          :options='$parent.$parent.f_defect_names'
                          v-model="model.f_defect_name"
                          multiple
                          close-on-select>
                </v-select>
              </div>
            </div>
            <div class="row">
              <button class="btn btn-xs" v-show="!$parent.$parent.listOtherSearch" style="width: 100%"
                      @click="$parent.$parent.listSearchHidden()">
                <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
              </button>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' v-ref:grid>
          <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>
              <th>
                <nobr>最后一次跟进时间</nobr>
              </th>
              <th>
                <nobr>最后一次跟进人</nobr>
              </th>
            </tr>
          </template>
          <template partial='body'>
            <td>
              <button class="btn btn-default" @click='$parent.$parent.$parent.change(row)'>跟进记录</button>
              <button class="btn btn-default" @click='$parent.$parent.$parent.getChangeImage(row)'>隐患照片</button>
            </td>
            <td>{{ row.f_defect_type }}</td>
            <td>{{ row.f_defect_name }}</td>
            <td>{{ row.f_defect_value }}</td>
            <td>{{ row.f_defect_level }}</td>
            <td>{{ row.f_discover_time }}</td>
            <td>{{ row.f_report_man }}</td>
            <td>{{ row.f_data_sources }}</td>
            <td>{{ row.f_is_eliminate }}</td>
            <td>{{ row.f_rectify_mode }}</td>
            <td>{{ row.f_task_man }}</td>
            <td>{{ row.f_rectify_time }}</td>
            <td>{{ row.f_last_defect_task_time }}</td>
            <td>{{ row.f_last_defect_f_task_man }}</td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
    <div class="defect-list-diy-modal">
      <!--隐患跟进记录-->
      <modal :show.sync="showModal" width="80%" class="modal-all">
        <div slot="modal-header" class="modal-header">
          <h4 class="modal-title">
            跟进记录查看
          </h4>
        </div>
        <div slot="modal-body" class="modal-body">
          <div>
            <table class="table table-striped table-condensed">
              <thead>
              <tr>
                <th>卡号/出厂编号</th>
                <th>&ensp;&ensp;隐&ensp;患&ensp;地&ensp;址&ensp;&ensp;</th>
                <th>行政区域</th>
                <th>隐患等级</th>
                <th>隐患类型</th>
                <th>隐患名称</th>
                <th>隐患描述</th>
                <th>隐患来源</th>
                <th>上报时间</th>
                <th>隐患上报人</th>
                <th>隐患是否处理</th>
                <th>隐患整改方式</th>
                <th>隐患跟进人</th>
                <th>隐患跟进时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody v-for="row in modalList">
              <tr>
                <td style="text-align: center">{{ row.f_card_id }}</td>
                <td style="text-align: center">{{ row.f_defect_address }}</td>
                <td style="text-align: center">{{ row.f_distinct }}</td>
                <td style="text-align: center">{{ row.f_defect_level }}</td>
                <td style="text-align: center">{{ row.f_defect_type }}</td>
                <td style="text-align: center">{{ row.f_defect_name }}</td>
                <td style="text-align: center">{{ row.f_defect_value }}</td>
                <td style="text-align: center">{{ row.f_data_sources }}</td>
                <td style="text-align: center">{{ row.f_discover_time }}</td>
                <td style="text-align: center">{{ row.f_report_man }}</td>
                <td style="text-align: center">{{ row.f_is_eliminate }}</td>
                <td style="text-align: center">{{ row.f_rectify_mode }}</td>
                <td style="text-align: center">{{ row.f_task_man }}</td>
                <td style="text-align: center">{{ row.f_task_time }}</td>
                <td style="text-align: center">
                  <button class="btn btn-default" @click='taskImagSeek(row)'>跟进照片</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-default" @click="showModal = false">确认</button>
        </div>
      </modal>
      <!--隐患跟进记录照片-->
      <modal :show.sync="imageSeek" width="60%" class="modal-all">
        <div slot="modal-header" class="modal-header">
          <h4 class="modal-title">
            跟进照片
          </h4>
        </div>
        <div slot="modal-body" class="modal-body">
          <div>
            <div class="auto col-xs-12 col-sm-12">
              <div class="panel" style="padding: 10px 10px 5px 10px;">
                <div class="panel-body panel-self">
                  <div class="row">
                    <div id="photo" align="center">
                      <div class="auto" style="margin-top: 5px;">
                        <div class="panel" style="padding: 10px 10px 5px 10px;">
                          <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="col-xs-4 col-sm-3 col-md-2" v-for="(index,img) in defect_images">
                                <img-self :src="img" alt="跟进照片" :width="140" :height="170"></img-self>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-default" @click="imageSeek = false">确认</button>
        </div>
      </modal>
      <!--隐患照片-->
      <modal :show.sync="imagesSeek" width="60%" class="modal-all">
        <div slot="modal-header" class="modal-header">
          <h4 class="modal-title">
            隐患照片查看
          </h4>
        </div>
        <div slot="modal-body" class="modal-body">
          <div>
            <div class="auto col-xs-12 col-sm-12">
              <div class="panel" style="padding: 10px 10px 5px 10px;">
                <div class="panel-body panel-self">
                  <div class="row">
                    <div id="photo" align="center">
                      <div class="auto" style="margin-top: 5px;">
                        <div class="panel" style="padding: 10px 10px 5px 10px;">
                          <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="col-xs-4 col-sm-3 col-md-2" v-for="(index,img) in defect_images">
                                <img-self :src='img' alt="隐患照片" :width="140" :height="170"></img-self>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-default" @click="imagesSeek = false">确认</button>
        </div>
      </modal>
    </div>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
import * as Util from '../Util'
import Vue from 'vue'

export default {
  title: '安检记录列表',
  props: ['row'],
  data () {
    return {
      rowdata: this.row,
      otherSearch: false,
      model: new PagedList('rs/sql/getDefectCenterByCardId', 10),
      showModal: false,
      imageSeek: false,
      modalList: [],
      defect_images: [],
      f_defect_types: [],
      f_defect_names: [],
      sources: [{label: '全部', value: ''}, {label: '安检', value: '安检'}, {
        label: '巡检',
        value: '巡检'
      }, {label: '工商安检', value: '工商安检'}, {label: '调压箱', value: '调压箱'}],
      f_is_eliminates: [{label: '全部', value: ''}, {label: '未处理', value: '未处理'}, {
        label: '已上传',
        value: '已上传'
      }, {label: '已处理', value: '已处理'}],
      f_rectify_modes: [{label: '全部', value: ''}, {label: '巡检整改', value: '巡检整改'}, {
        label: '安检',
        value: '安检'
      }, {label: '用户自行整改', value: '用户自行整改'}, {label: '惠众外包', value: '惠众外包'}, {
        label: '未整改',
        value: '未整改'
      }],
      listOtherSearch: false,
      imagesSeek: false
    }
  },
  ready () {
    this.getSafeVueConfig()
    this.rowdata = this.row
    this.selfSearch()
  },
  methods: {
    listSearchHidden () {
      this.listOtherSearch = !this.listOtherSearch
    },
    hidden () {
      this.otherSearch = !this.otherSearch
    },
    async change (row) {
      // 查看跟进记录
      let http = new HttpResetClass()
      let res = await http.load('POST', 'rs/sql/safecheckSingleTable', {
        data: {
          tablename: 't_defect_center_task',
          condition: `f_defect_center_id = '${row.id}'`
        }
      }, {resolveMsg: null, rejectMsg: null})
      console.log(res)
      if (res.data.length > 0) {
        this.modalList = res.data
        this.showModal = true
      } else {
        this.$showMessage('当前隐患暂无跟进记录')
      }
    },
    async taskImagSeek (row) {
      if (!row.f_defect_img_path) {
        this.$showMessage('当前隐患记录暂无跟进照片')
      } else {
        let http = new HttpResetClass()
        let res = await http.load('POST', 'rs/sql/safecheckSingleTable', {
          data: {
            tablename: 't_files',
            condition: `F_filename like '%${row.f_defect_img_path}'`
          }
        }, {resolveMsg: null, rejectMsg: null})
        if (res.data.length > 0){
          if (res.data[0].defname && res.data[0].defname != ''){
            this.defect_images = [res.data[0].defname]
          }else {
            this.defect_images = ['/rs/image/file/'+row.f_defect_img_path]
          }
        }else {
          this.defect_images = ['/rs/image/file/'+row.f_defect_img_path]
        }
        this.imageSeek = true
      }
    },
    async getSafeVueConfig () {
      Vue.$login.jwt = 775
      let res = await Vue.resetget(`/phone/rs/vue`, {data: {}}, {resolveMsg: null, rejectMsg: null})
      let defectTypeSet = new Set()
      if (res.data.safecheck.DevicesConfig) {
        this.DevicesConfig = res.data.safecheck.DevicesConfig
        for (const key in this.DevicesConfig) {
          if (Object.hasOwnProperty.call(this.DevicesConfig, key)) {
            this.f_defect_types.push({label: key, value: key})
            for (const ke in this.DevicesConfig[key]['items']) {
              defectTypeSet.add(ke)
            }
          }
        }
        defectTypeSet.forEach((item) => {
          this.f_defect_names.push({label: item, value: item})
        })
      }
    },
    search (args) {
      args.condition += ` and  f_card_id = '${this.row.f_card_id}'`
      this.model.search(args.condition, args.model)
    },
    selfSearch () {
      let condition = this.model.condition ? this.model.condition : ' 1=1'
      condition += ` and  f_card_id = '${this.row.f_card_id}'`
      this.model.search(condition)
    },
    async getChangeImage (row) {
      if (!row.f_defect_img_path) {
        this.$showMessage('当前隐患无隐患照片')
      } else {
        let http = new HttpResetClass()
        let res = await http.load('POST', 'rs/sql/safecheckSingleTable', {
          data: {
            tablename: 't_files',
            condition: `F_filename like '%${row.f_defect_img_path}'`
          }
        }, {resolveMsg: null, rejectMsg: null})
        if (res.data.length > 0) {
          if (res.data[0].defname && res.data[0].defname != '') {
            this.defect_images = [res.data[0].defname]
          } else {
            this.defect_images = ['/rs/image/file/' + row.f_defect_img_path]
          }
        } else {
          this.defect_images = ['/rs/image/file/' + row.f_defect_img_path]
        }
        this.imagesSeek = true
      }
    }
  },
  watch: {
    'row' (val) {
      if (val) {
        this.rowdata = val
        this.model.condition = ' 1=1 '
        this.selfSearch()
      }
    }
  },
  computed: {
    getCondition () {
      let condition = this.$refs.paged.$refs.criteria.condition ? this.$refs.paged.$refs.criteria.condition : ' 1=1'
      condition += ` and  f_card_id = '${this.row.f_card_id}'`
      return {
        condition: condition
      }
    },
    getfield () {
      let Config = {
        'f_defect_level': '隐患等级',
        'f_defect_type': '隐患类型',
        'f_defect_name': '隐患名称',
        'f_defect_value': '隐患描述',
        'f_data_sources': '隐患来源',
        'f_discover_time': '上报时间',
        'f_report_man': '隐患上报人',
        'f_is_eliminate': '隐患是否跟进',
        'f_rectify_mode': '隐患是否整改',
        'f_rectify_time': '隐患整改时间',
        'f_task_man': '隐患整改人',
        'f_last_defect_task_time': '最后一次跟进时间',
        'f_last_defect_f_task_man': '最后一次跟进人'
      }
      return Config
    }
  }
}
</script>
<style>
.defect-list-diy-modal .modal-dialog {
  height: 100%;
}
</style>
