<template >
  <div class="flex auto" style="padding:20px">
    <!-- 民用 -->
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.certificate" :false-value='0' :true-value='1'class="magic-checkbox" id="certificate"   v-if="!show">
      <label for="certificate">询问用户是否有安装验收合格证
      <span v-if='equipmentinspection.certificate'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.change" :false-value='0' :true-value='1' class="magic-checkbox" id="change" v-if="!show">
      <label for="change">询问用户安装燃气具后是否改动
      <span v-if='equipmentinspection.change'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.register" :false-value='0' :true-value='1' class="magic-checkbox" id="register"  v-if="!show">
      <label for="register">询问用户购气所用设备是否登记
      <span v-if='equipmentinspection.register'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.gasenvironment" :false-value='0' :true-value='1' class="magic-checkbox" id="gasenvironment"  v-if="!show">
       <label for="gasenvironment">询问用户是否改变燃气具用气环境
       <span v-if='equipmentinspection.gasenvironment'>**是</span><span v-else>**否</span></label>
     </span>
    <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.circuit" :false-value='0' :true-value='1' class="magic-checkbox" id="circuit"  v-if="!show">
       <label for="circuit">询问用户是否改变燃气具供电电路
       <span v-if='equipmentinspection.circuit'>**是</span><span v-else>**否</span></label>
     </span>
     <span >
       <input type="checkbox" v-model="equipmentinspection.gasmeteroperation" :false-value='0' :true-value='1'class="magic-checkbox" id="gasmeteroperation"  v-if="!show">
       <label for="gasmeteroperation">气表运行不正常
       <span v-if='equipmentinspection.gasmeteroperation'>**是</span><span v-else>**否</span></label>
     </span>
    <span>
       <input type="checkbox" v-model="equipmentinspection.gasseals" :false-value='0' :true-value='1'class="magic-checkbox" id="gasseals"  v-if="!show">
       <label for="gasseals">气表上没有表封
       <span v-if='equipmentinspection.gasseals'>**是</span><span v-else>**否</span></label>
     </span>
    <span>
       <input type="checkbox" v-model="equipmentinspection.leakage" :false-value='0' :true-value='1'class="magic-checkbox" id="leakage"  v-if="!show">
       <label for="leakage">天然气泄漏报警或异常
       <span v-if='equipmentinspection.leakage'>**是</span><span v-else>**否</span></label>
     </span>
    <span>
       <input type="checkbox" v-model="equipmentinspection.maintenancetreatment" :false-value='0' :true-value='1'class="magic-checkbox" id="maintenancetreatment"  v-if="!show">
       <label for="maintenancetreatment">是否转维修处理
       <span v-if='equipmentinspection.maintenancetreatment'>**是</span><span v-else>**否</span></label>
     </span>
    <span v-show='!usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.sealassembly" :false-value='0' :true-value='1'class="magic-checkbox" id="sealassembly"  v-if="!show">
       <label for="sealassembly">没有总承铅封
       <span v-if='equipmentinspection.sealassembly'>**是</span><span v-else>**否</span></label>
     </span>
    <span v-show='!usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.boltseal" :false-value='0' :true-value='1'class="magic-checkbox" id="boltseal"  v-if="!show">
       <label for="boltseal">没有螺栓铅封
       <span v-if='equipmentinspection.boltseal'>**是</span><span v-else>**否</span></label>
     </span>

     <!--&lt;!&ndash; 室外立管泄露报警 &ndash;&gt;-->
     <!--<span v-show='usertypestate'>-->
       <!--<input type="checkbox" v-model="equipmentinspection.outdoorriser" :false-value='0' :true-value='1'class="magic-checkbox" id="outdoorriser">-->
       <!--<label for="outdoorriser">室外立管泄露报警-->
       <!--<span v-if='equipmentinspection.outdoorriser'>**是</span><span v-else>**否</span></label>-->
     <!--</span>-->
     <!--&lt;!&ndash; 引入管 泄露报警&ndash;&gt;-->
     <!--<span v-show='usertypestate'>-->
       <!--<input type="checkbox" v-model="equipmentinspection.introductiontube" :false-value='0' :true-value='1'class="magic-checkbox" id="introductiontube">-->
       <!--<label for="introductiontube">引入管泄露报警-->
       <!--<span v-if='equipmentinspection.introductiontube'>**是</span><span v-else>**否</span></label>-->
     <!--</span>-->
     <!--&lt;!&ndash; 室内支管泄露报警&ndash;&gt;-->
     <!--<span v-show='usertypestate'>-->
       <!--<input type="checkbox" v-model="equipmentinspection.interiorbranchpipe" :false-value='0' :true-value='1'class="magic-checkbox" id="interiorbranchpipe">-->
       <!--<label for="interiorbranchpipe">室内支管泄露报警-->
       <!--<span v-if='equipmentinspection.interiorbranchpipe'>**是</span><span v-else>**否</span></label>-->
     <!--</span>-->
      <!--&lt;!&ndash; 室内阀门泄露报警&ndash;&gt;-->
     <!--<span v-show='usertypestate'>-->
       <!--<input type="checkbox" v-model="equipmentinspection.indoorvalve" :false-value='0' :true-value='1'class="magic-checkbox" id="indoorvalve">-->
       <!--<label for="indoorvalve">室内阀门泄露报警-->
       <!--<span v-if='equipmentinspection.indoorvalve'>**是</span><span v-else>**否</span></label>-->
     <!--</span>-->
    <!-- 壁挂炉 -->
    <div  class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_wallhangboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_wallhangboiler" v-if="!show">
        <label for="f_wallhangboiler">壁挂炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_tonnage" class="text-nowrap">功率（kw） </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_wall_hungboiler_tonnage" id="f_wall_hungboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_wall_hungboiler_quantity" id="f_wall_hungboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_wall_hungboiler_brand" id="f_wall_hungboiler_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 热水器 -->
    <div  class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_waterheater" :false-value='0' :true-value='1' class="magic-checkbox" id="f_waterheater" v-if="!show">
        <label for="f_waterheater">热水器 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_tonnage" class="text-nowrap">功率（kw） </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_waterheater_tonnage" id="f_waterheater_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_waterheater_quantity" id="f_waterheater_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_waterheater_brand" id="f_waterheater_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 采暖炉 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_heatingboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_heatingboiler" v-if="!show" >
        <label for="f_heatingboiler">采暖炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_heatingboiler_tonnage" id="f_heatingboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_heatingboiler_quantity" id="f_heatingboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_heatingboiler_brand" id="f_heatingboiler_brand" placeholder="输入品牌" >
      </div>
    </div>
    <!-- 茶水炉 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_teaboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_teaboiler" v-if="!show">
        <label for="f_teaboiler">茶水炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_teaboiler_tonnage" id="f_teaboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_teaboiler_quantity" id="f_teaboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_teaboiler_brand" id="f_teaboiler_brand" placeholder="输入品牌">
      </div>
    </div>
    <!--模块炉  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_moduleboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_moduleboiler" v-if="!show">
        <label for="f_moduleboiler">模块炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_moduleboiler_tonnage" id="f_moduleboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_moduleboiler_quantity" id="f_moduleboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_moduleboiler_brand" id="f_moduleboiler_brand" placeholder="输入品牌">
      </div>
    </div>
    <!--煮面桶  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_stewed_noodles" :false-value='0' :true-value='1' class="magic-checkbox" id="f_stewed_noodles"colspan="3"-if="!show" >
        <label for="f_stewed_noodles">煮面桶 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_stewed_noodles'>
        <label for="f_stewed_noodles_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_stewed_noodles_tonnage" id="f_stewed_noodles_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_stewed_noodles'>
        <label for="f_stewed_noodles_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_stewed_noodles_quantity" id="f_stewed_noodles_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_stewed_noodles'>
        <label for="f_stewed_noodles_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_stewed_noodles_brand" id="f_stewed_noodles_brand" placeholder="输入品牌">
      </div>
    </div>
    <!--煲仔炉  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_burner_range" :false-value='0' :true-value='1' class="magic-checkbox" id="f_burner_range" v-if="!show">
        <label for="f_burner_range">煲仔炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_burner_range'>
        <label for="f_burner_range_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_burner_range_tonnage" id="f_burner_range_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_burner_range'>
        <label for="f_burner_range_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_burner_range_quantity" id="f_burner_range_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_burner_range'>
        <label for="f_burner_range_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_burner_range_brand" id="f_burner_range_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 家用灶 -->
    <div  class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_homekitchen" :false-value='0' :true-value='1' class="magic-checkbox" id="f_homekitchen" v-if="!show">
        <label for="f_homekitchen">家用灶 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_homekitchen'>
        <label for="f_homekitchen_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_homekitchen_quantity" id="f_homekitchen_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_homekitchen'>
        <label for="f_homekitchen_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_homekitchen_brand" id="f_homekitchen_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 火眼 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_fiereye" :false-value='0' :true-value='1' class="magic-checkbox" id="f_fiereye" v-if="!show">
        <label for="f_fiereye">火眼 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_fiereye'>
        <label for="f_fiereye_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_fiereye_quantity" id="f_fiereye_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_fiereye'>
        <label for="f_fiereye_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_fiereye_brand" id="f_fiereye_brand" placeholder="输入品牌">
      </div>
    </div>
    <!--蒸车  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_steamcars" :false-value='0' :true-value='1' class="magic-checkbox" id="f_steamcars" v-if="!show">
        <label for="f_steamcars">蒸车 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_steamcars'>
        <label for="f_steamcars_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_steamcars_quantity" id="f_steamcars_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_steamcars'>
        <label for="f_steamcars_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_steamcars_brand" id="f_steamcars_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 小火眼 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_smallfireeye" :false-value='0' :true-value='1' class="magic-checkbox" id="f_smallfireeye" v-if="!show">
        <label for="f_smallfireeye">小火眼 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_smallfireeye'>
        <label for="f_smallfireeye_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_smallfireeye_quantity" id="f_smallfireeye_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_smallfireeye'>
        <label for="f_smallfireeye_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_smallfireeye_brand" id="f_smallfireeye_brand" placeholder="输入品牌">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object
    },
    // 要保存的数据
    equipmentinspection: {
      type: Object
    },
    // 是否显示模式
    show:false
  },
  title:'设备检查',
  data() {
    return {
      // model:{},
      usertypestate: false,
      // equipment: {
      //   certificate: 0,
      //   change: 0,
      //   register: 0,
      //   gasmeteroperation: 0,
      //   gasseals: 0,
      //   leakage: 0,
      //   maintenancetreatment: 0,
      //   sealassembly: 0,
      //   boltseal: 0,
      //   outdoorriser: 0,
      //   introductiontube: 0,
      //   interiorbranchpipe: 0,
      //   indoorvalve: 0
      // }
    }
  },
  watch: {
  user:{
      handler:function (val,oldVal) {
          this.model = Object.assign({}, this.model, this.user)
          // this.equipmentinspection = Object.assign({}, this.equipmentinspection, this.user)
      },
      deep:true
  },
  'user.f_usertype' (val) {
    if (val === '非民用') {
      this.usertypestate = false
    } else {
      this.usertypestate =true
    }
  }
},
ready() {
  // this.model = Object.assign({}, this.model, this.user)
  // // this.equipmentinspection = Object.assign({}, this.equipmentinspection, this.user)
  // if (this.model.f_usertype === '非民用') {
  //   this.usertypestate = false
  // } else {
  //   this.usertypestate =true
  // }
}
}
</script>

<style lang="css">
  .check-row .magic-radio + label:before, .check-row .magic-checkbox + label:before {
    top: 8px;
  }
</style>
