<template>
  <div class="auto">
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-5">
                <img src="../../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">二维码编号：</label>
              </div>
              <div class="col-xs-7" >
                <input class="search_input input-font" style="width: 70%" placeholder="请输入或扫码" v-model="model.id"/>
                <button type="button" name="button" class="btn btn-primary" style="width: 25%" @click="$parent.$parent.scan">扫码</button>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5">
                <img src="../../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">负责人：</label>
              </div>
              <div class="col-xs-7">
                <v-select :value.sync="model.f_head_name" class="input-font"
                          :options='$parent.$parent.head_names' placeholder='请选择负责人' :value-single="true"
                          v-model="model.f_head_name" close-on-select clear-button></v-select>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5">
                <img src="../../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-7" >
                <input class="search_input input-font" v-model="model.f_user_name" placeholder="请输入用户名称（可模糊查询）">
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-5">
                <img src="../../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">小区名称：</label>
              </div>
              <div class="col-xs-7" >
                <input class="search_input input-font" v-model="model.f_user_name" placeholder="请输入小区名称（可模糊查询）">
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="$parent.$parent.search">查询</button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>

      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="row" style="padding: 5px;">
                  <p class="panel-title col-xs-5 text-left font">二维码编号</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.id  }}</p>
                </div>
                <div class="row" style="padding: 5px;">
                  <p class="panel-title col-xs-5 text-left font">负责人二维码编号</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_head_code  }}</p>
                </div>
                <div class="row" style="padding: 5px;">
                  <p class="panel-title col-xs-5 text-left font">安检情况二维码编号</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_safecheck_code }}</p>
                </div>
                <div class="row" style="padding: 5px;">
                  <p class="panel-title col-xs-5 text-left font">负责人姓名</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_head_name }}</p>
                </div>
                <div class="row" style="padding: 5px;" v-if="row.f_type == '用户'">
                  <p class="panel-title col-xs-5 text-left font">用户编号</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_userinfo_id}}</p>
                </div>
                <div class="row" style="padding: 5px;">
                  <p class="panel-title col-xs-5 text-left font">小区/用户名称</p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_user_name}}</p>
                </div>
                <div class="row" style="padding: 5px;">
                  <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="$parent.$parent.$parent.handle(row)">处理</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
export default {
  title: '二维码绑定',
  data () {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, 50, {
        items: '"tqr.id,tqr.f_head_code,tqr.f_safecheck_code,tqr.f_head_name,tqr.f_user_name,tqr.f_head_post,tqr.f_head_phone,tqr.f_type,tqr.f_head_pic,tqr.f_userinfo_id,tf.f_downloadpath as url"',
        tablename: '"t_qr_code tqr left join t_files tf on tf.f_businessid = tqr.id and f_table_name = \'t_qr_code\'"',
        orderitem: '"1"'
      }),
      QRCode:{},
      head_names:[{ label: '请选择', value: '' }]
    }
  },
  ready () {
    new HttpResetClass().load('post',`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`,{data: {
        items: 'f_head_name',
        tablename: 't_qr_code',
        condition: `1=1 and f_head_name is not null`,
        orderitem: '1'
      }}).then(res=>{
      res.data.forEach(item=>{
        this.head_names.push({label:item.f_head_name,value:item.f_head_name})
      })
    })
  },
  computed: {
    reload(){
      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
    },
    selected () {
      return this.$refs.paged.$refs.grid.selected
    }
  },
  methods:{
    scan(){
      HostApp.__this__=this,
        HostApp.scanCode({callback:"javascript:HostApp.__this__.getCode();"})
    },
    getCode(){
      let datapa = HostApp.getCode().data;
      this.this.$refs.paged.$refs.cri.model.id=datapa
    },
    handle(row){
      var pardate = {
        _this:this,
        tittle:'二维码绑定',
        safe:true
      }
      let _this = this
      this.$dispatch('gotoson',pardate)
      this.$goto('qr-code-binding', {row: row}, 'self',function () {
        _this.search()
      })
    },
    search(){
      let condition = `1=1`
      if (this.$refs.paged.$refs.cri.model.id) {
        condition += ` and (f_head_code = '${this.$refs.paged.$refs.cri.model.id}' or f_safecheck_code= '${this.$refs.paged.$refs.cri.model.id}')`
      }
      if (this.$refs.paged.$refs.cri.model.f_head_name) {
        condition += ` and f_head_name like '%${this.$refs.paged.$refs.cri.model.f_head_name}%'`
      }
      if (this.$refs.paged.$refs.cri.model.f_user_name) {
        condition += ` and f_user_name like '%${this.$refs.paged.$refs.cri.model.f_user_name}%'`
      }
      this.model.search(condition)
    }

  }
}
</script>
<style scoped>
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.search_input {
  border: 0;
  outline: none;
}
.font{
  font: 15px PingFang-SC-Medium;
  color: #666666;
}
.input-font{
  font: 15px PingFang-SC-Medium;
  color: #333333;
}
.btn-font{
  font:600 16px PingFang-SC-Bold;
  color: #499EDF;
}
.btn-color{
  background-color: #FFFFFF;
  border-radius: 10px ;
  border: 1px solid #499EDF;
}
.app-text {
  font-size: 12px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.yybtn-color{
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
</style>
