<template>

  <div class="app-row" style="overflow: auto;">
    <header class="head">
      <p>周检表记录</p>
    </header>
  <partial-view v-ref:pv>
    <criteria-paged :model="model" v-ref:paged :pager="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-4 col-xs-4 col-md-4">时间</strong>
            <strong class="col-sm-4 col-xs-4 col-md-4">工作人员</strong>
            <strong class="col-sm-4 col-xs-4 col-md-4">客服信息</strong>
            <!-- <strong class="col-sm-4 col-xs-4 col-md-4">隐患情况</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-4 col-xs-4 col-md-4">{{row.f_operate_date}}</p>
                  <p class="col-sm-4 col-xs-4 col-md-4">{{row.f_operator}}</p>
                  <!-- <span class="col-sm-4 col-xs-4 col-md-4">{{row.f_screeners}}</span> -->
                  <p class="col-sm-4 col-xs-4 col-md-4">{{row.f_user_name}}</p>
                </div>
              </div>
          </span>
          <div class="panel-body list"  v-if="$parent.$parent.$parent.isSelected(row)">
            <hand-message :data ='row'></hand-message>
          </div>
        </div>
      </accordion>
    </criteria-paged>
  </partial-view>
  </div>
</template>

<script>
  /**
   *用户档案相关信息组件
   */
  import * as Util from '../Util'
  import { PagedList } from 'vue-client'
  import Vue from 'vue'
  export default {
    title: '用户安检历史',
    data () {
      return {
        model: new PagedList(Vue.handdataUrl+ 'rs/sql/singleTable_OrderBy',20, {items: '"*"', tablename: '"t_handhistory"', orderitem: '"planid desc"'}),
        row: Object
      }
    },
    props: {
      user:{
        type: Object
      }
    },
    methods: {
      selected(row){
        console.log('hahha....');
        if (this.row === row) {
          this.row = null
        } else {
          this.row = row
        }
      },
      isSelected (row) {
        return this.row === row
      },
    },
    watch: {
      'user.id' (val) {
        this.model.search(`f_userinfo_id = '${this.user.f_userinfo_id}'`)
      }
    },
    ready(){
      if (this.user && this.user.card_id) {
        this.model.search(`f_userinfo_id = '${this.user.f_userinfo_id}'`)
      }
    }
  }
</script>
<style scoped>
  .head{
    font-size: 1.25em;
    font-weight: bolder;
    padding: 0.5em;
  }
  .list{
    padding: 0px;
  }
</style>
