<template>
  <partial-view v-ref:pv>
    <criteria-paged :model="model" v-ref:paged :pager="true" :simple="true">
      <accordion :one-at-atime="true" type="info" partial="list">
        <div class="col-sm-12 col-xs-12 col-md-12 accorhead" style="margin-bottom:10px;">
          <div class="row" style="text-align:center">
            <strong class="col-sm-3 col-xs-3 col-md-3">卡号</strong>
            <strong class="col-sm-3 col-xs-3 col-md-3"><nobr>安检日期</nobr></strong>
            <strong class="col-sm-3 col-xs-3 col-md-3">入户情况</strong>
            <strong class="col-sm-3 col-xs-3 col-md-3">安检员</strong>
          </div>
        </div>
        <div type="info" v-for="row in model.rows" :is-open="true" :is-click="false" style="padding:20px;">
          <span class="panel-title"   slot="header" @click="$parent.$parent.$parent.selected(row)"  style="cursor: pointer;">
              <div class="col-sm-12 col-xs-12 col-md-12" >
                <div class="row accorbody" style="text-align:center;">
                  <p class="col-sm-3 col-xs-3 col-md-3">{{row.f_card_id}}</p>
                  <p class="col-sm-3 col-xs-3 col-md-3"><nobr>{{row.f_onsite_time}}</nobr></p>
                  <p class="col-sm-3 col-xs-3 col-md-3">{{row.f_entry_status}}</p>
                  <p class="col-sm-3 col-xs-3 col-md-3">{{row.f_checker_name}}</p>
                </div>
              </div>
          </span>
          <!--<div class="panel-body" style="padding:20px;" v-if="">-->
            <!--<security-message :data ='row'></security-message>-->
          <modal :show.sync="$parent.$parent.$parent.isSelected(row)" v-ref:modal :backdrop="false">
            <header slot="modal-header">
              <div class="header">
                <div class="title">历史安检记录</div>
              </div>
            </header>
            <article slot="modal-body" class="form-control" style="padding: 0px">
              <div class="form-group" style="height: -webkit-fill-available">
                <!--<div class="row col-xs-12 col-sm-6 col-md-6" v-if="$parent.$parent.$parent.row.last_check_date != null && $parent.$parent.$parent.row.last_check_date != ''">-->
                  <!--<p class="panel-title col-xs-4 text-left font">安检时间</p>-->
                  <!--<p class="panel-title col-xs-8 text-left input-font">{{ $parent.$parent.$parent.row.last_check_date }}</p>-->
                <!--</div>-->
                <!--<div class="row col-xs-12 col-sm-6 col-md-6">-->
                  <!--<p class="panel-title col-xs-4 text-left font">安检状态</p>-->
                  <!--<p class="panel-title col-xs-8 text-left input-font" v-if="$parent.$parent.$parent.$parent.row.last_check_date != null && $parent.$parent.$parent.$parent.row.last_check_date != ''">安检完成</p>-->
                  <!--<p class="panel-title col-xs-8 text-left input-font" v-if="$parent.$parent.$parent.$parent.row.last_check_date == null || $parent.$parent.$parent.$parent.row.last_check_date == ''">未安检</p>-->
                <!--</div>-->
                <div class="row col-xs-12 col-sm-12 col-md-12">
                  <p class="panel-title col-xs-4 text-left font" >安检结果</p>
                  <p class="panel-title col-xs-8 text-left input-font" :class="$parent.$parent.$parent.last_check_result == '正常'?'':'color-red'">{{$parent.$parent.$parent.last_check_result}}</p>
                  <div>
                    <div v-for="data in $parent.$parent.$parent.last_check_data.data" class="panel-title col-xs-offset-4 col-xs-8 text-left input-font">
                      <p v-for="(key,item) in data">
                        {{key}}:{{item}}
                      </p>
                    </div>
                  </div>

                  <!--<div v-if="$parent.$parent.f_no_checkplan == '跟进单'">-->
                  <!--<p class="panel-title col-sm-4 text-left input-font color-red" v-if="last_check_result != '正常'">一级隐患</p>-->
                  <!--<div v-if="last_check_result != '正常'">-->
                  <!--<div v-for="defect in $parent.$parent.defects" class="panel-title col-xs-offset-4 col-xs-8 col-sm-8 text-left input-font">-->
                  <!--<div v-for="item in defect.f_items">-->
                  <!--<span class="color-red">{{item.f_item_name}}(</span>-->
                  <!--<span class="color-red" v-for="list in item.f_item_lists">{{list.f_item_value}}&nbsp;&nbsp;&nbsp;</span>-->
                  <!--<span class="color-red">)</span>-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--</div>-->
                </div>
                <div class="form-group col-xs-12 col-sm-12" style="margin-top: 10px">
                  <div class="auto" style="width: 100%;float: left;" >
                    <p class="text-left font" style="font-size: 16px ">总体安检照片</p>
                    <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 $parent.$parent.$parent.row.f_all_imgs">
                                <img-self :src="img.f_overall_path" alt="总体安检照片" :width="150" :height="200"></img-self>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </article>
            <div slot="modal-footer" class="modal-footer">
              <button type="button" class="btn btn-cancel" @click="$parent.$parent.$parent.cancel()">关闭</button>
            </div>
          </modal>
          </div>
        <!--</div>-->
      </accordion>

    </criteria-paged>
  </partial-view>
</template>

<script>
/**
*用户档案相关信息组件
*/
import * as Util from '../Util'
import { PagedList } from 'vue-client'
import {androidRatifyPics2} from "../Util";
export default {
  title: '用户安检历史',
  data () {
    return {
      model: new PagedList( this.$androidUtil.getProxyUrl()+'/rs/path/securitycheckinfo', 7, {}),
      row: Object,
      abcd:'123'
    }
  },
  props: {
    user:{
      type: Object,
      // default:{
      //   card_id:'0388888888'
      // }
    }
  },
  methods: {
    selected(row){
      this.row = row
    },
    isSelected (row) {
      Util.androidRatifyPics2(this.row,this.$androidUtil.getProxyUrl())
      if(this.row.f_defect_content){
        let checkResult = JSON.parse(this.row.f_defect_content)
        this.$set('last_check_result',checkResult.result)
        this.$set('last_check_data.data',checkResult.data)
      }else{
        this.$set('last_check_result','')
        this.$set('last_check_data.data',[])
      }
      return this.row === row
    },
    cancel(){
      this.row = null
    }
  },
  watch: {
    'user.card_id' (val) {
      this.model.search(`f_card_id = '${this.user.card_id}'`)
    }
  },
  ready(){
    if (this.user && this.user.card_id) {
      this.model.search(`f_card_id = '${this.user.card_id}'`)
    }
  }
}
</script>
<style>
  .header{
    text-align: center;
    background-color: #d8e9f3;
  }
  .title{
    font-family:PingFang-SC-Bold;
    font-size:20px;
    text-align: center;
    color: #666666;
  }
</style>
