<template>
  <div class="auto">
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_userinfoid" class="font text-left">用户编号:</label>
      </div>
      <div class="col-xs-8" >
        <input id="f_userinfoid" class="search_input input-font" readonly
               v-model=row.f_userinfo_id :value.sync="row.f_userinfo_id" />
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label  class="font text-left">用户姓名:</label>
      </div>
      <div class="col-xs-8" >
        <input  class="search_input input-font" v-model=row.f_user_name :value.sync="row.f_user_name" readonly />
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">用户地址:</label>
      </div>
      <div class="col-xs-8" >
        <input class="search_input input-font" v-model=row.f_address :value.sync="row.f_address" readonly />
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">厂家:</label>
      </div>
      <div class="col-xs-8" >
        <input class="search_input input-font" v-model=row.f_manufacturers :value.sync="row.f_manufacturers" readonly />
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">品牌:</label>
      </div>
      <div class="col-xs-8" >
        <input class="search_input input-font" v-model=row.f_aliasname :value.sync="row.f_aliasname" readonly />
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label class="font text-left">型号:</label>
      </div>
      <div class="col-xs-8" >
        <input class="search_input input-font" v-model=row.f_diaphgram_size :value.sync="row.f_diaphgram_size" readonly />
      </div>
    </div>
    <div class="row app-row" v-for="position in sealPosition">
      <div class="col-xs-8">
        <label class="font" style="text-align: center">{{position}}</label>
      </div>
      <div class="col-xs-4" >
        <button type="button" name="button"  class="btn btn-primary" @click="goSealBind( f_position && f_position.includes(position),position)">
          {{f_position && f_position.includes(position) ? '重新施封' : '施封'}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>

import {HttpResetClass} from "vue-client";
import {isEmpty} from '../Util'

export default {
  title: '施封',
  props: ['row'],
  data () {
    return {
      f_position:'',
      sealPosition: [],
    }
  },
  ready () {
    this.f_position = this.row.f_position
    let parms = '施封位置'
    if (!isEmpty(this.row.f_type)){
        parms = this.row.f_type + '-施封位置'
    }
    let position = this.$appdata.getSingleValue(parms)
    if (position.length > 0 ){
      this.sealPosition = position.split(';')
    }else {
      this.$showMessage("未配置施封位置")
    }
  },
  computed: {

  },
  methods:{
    async goSealBind(state,position){
      if (state){
        let res = await this.$showMessage('该用户已施封，是否重新进行施封?', ['confirm', 'cancel'])
        if (res == 'cancel'){
          return
        }
        this.toBind(this.row,position)
      }else {
        this.toBind(this.row,position)
      }
    },
    toBind(row,position){
      let pardate = {
        _this: this,
        title:'铅封绑定',
        safe:false
      }
      this.$dispatch('gotoson',pardate)
      this.$goto('seal-bind', {row: row,position:position}, 'self',this.reload)
    },
    async reload(data) {
      const result = await new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
        data: {
          items: 'f_position',
          tablename: 't_seals_record',
          condition: `f_userinfo_id  = '${this.row.f_userinfo_id}' and f_state = '有效'`,
          orderitem: 'id'
        }
      },{
        resolveMsg: null,
        rejectMsg: `查询失败`
      })
      if (result.data.length != 0) {
        this.f_position = result.data.filter(item => item.f_position !== null).map(item => item.f_position).join(';')
      }
    }
  }
}
</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;
}
.btn-photo{
  border: 0;
  border-radius: 7px;
  background-color: #7dc1f4;
  font: 15px PingFang-SC-Bold;
  height: 20%;
}
.div-photo{
  width: auto;
  height: auto;
  /* margin-top: 10px; */
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
