<template>
  <div class="auto">
    <modal :show.sync="show_fire" width="80%" title="点火基本信息" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: auto">
        <div class="flex-row flex-deviceinfo">
          <div class="panel panel-primary col-sm-12 datapanel">
            <div style="margin-top: 2%">
              <img style="margin-top: -2px;margin-left: 2px" src="../../../../static/images/lefticon/矩形1183.png">
              <a style="font-size: 16px;font-weight: 500;">档案信息</a>&nbsp;<a
              style="color: #999999;text-decoration: none"></a>
            </div>
            <div class="row auto" style="margin-top: 10px;margin-left: 10px;">
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;客户姓名</label>
                <input type="text" class="input-underline" style="width:60%" v-model="baseinfo.f_user_name" readonly
                       placeholder='客户姓名'>
              </div>
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;客户电话</label>
                <input type="text" class="input-underline" style="width:60%" v-model="baseinfo.f_user_phone" readonly
                       placeholder='客户电话'>
              </div>
              <div class="col-sm-6 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;客户地址</label>
                <input type="text" class="input-underline" style="width:60%" v-model="addressinfo.f_address" readonly
                       placeholder='客户地址'>
              </div>
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;表&emsp;&emsp;号</label>
                <input type="text" class="input-underline" style="width:60%" v-model="meter.f_meternumber" readonly
                       placeholder='表号'>
              </div>
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;卡&emsp;&emsp;号</label>
                <input type="text" class="input-underline" style="width:60%" v-model="meter.f_card_id" readonly
                       placeholder='卡号'>
              </div>

              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;气表品牌</label>
                <input type="text" class="input-underline" style="width:60%"
                       v-model="meter.gasbrand.length>0?meter.gasbrand[0].f_meter_brand:null" readonly
                       placeholder='气表品牌'>
              </div>
              <div class="col-sm-3 form-group">
                <label class="font_normal_body">&emsp;&emsp;&emsp;气表型号</label>
                <input type="text" class="input-underline" style="width:60%"
                       readonly
                       v-model="meter.gasmodel.length>0?(meter.gasmodel[0].f_meter_style+meter.gasmodel[0].f_type):null"
                       placeholder='气表型号'>
              </div>

            </div>

            <!--<div class="row auto" style="margin-top: 10px;margin-left: 10px;" v-if="meter.f_user_type[0]!='民用'">-->
            <!--<div class="col-sm-3 form-group" >-->
            <!--<label class="font_normal_body">&emsp;&emsp;流量计品牌</label>-->
            <!--<input type="text" class="input-underline" style="width:60%"-->
            <!--readonly-->
            <!--v-model="meter.f_flowmeter_brand"-->
            <!--placeholder='流量计品牌' >-->
            <!--</div>-->
            <!--<div class="col-sm-3 form-group" >-->
            <!--<label class="font_normal_body">&emsp;&emsp;流量计型号</label>-->
            <!--<input type="text" class="input-underline" style="width:60%"-->
            <!--readonly-->
            <!--v-model="meter.f_flowmeter_model"-->
            <!--placeholder='流量计型号' >-->
            <!--</div>-->
            <!--<div class="col-sm-3 form-group" >-->
            <!--<label class="font_normal_body">流量计出厂编号</label>-->
            <!--<input type="text" class="input-underline" style="width:60%"-->
            <!--readonly-->
            <!--v-model="meter.f_flowmeter_factory_num"-->
            <!--placeholder='流量计出厂编号' >-->
            <!--</div>-->
            <!--<div class="col-sm-3 form-group" >-->
            <!--<label class="font_normal_body">&emsp;流量计表封号</label>-->
            <!--<input type="text" class="input-underline" style="width:60%"-->
            <!--readonly-->
            <!--v-model="meter.f_llj_metertitles"-->
            <!--placeholder='流量计表封号' >-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="row auto" style="margin-top: 10px;margin-left: 10px;" v-if="meter.f_user_type[0]!='民用'">-->
            <!--<div class="col-sm-3 form-group" >-->
            <!--<label class="font_normal_body">&emsp;&emsp;流量计类型</label>-->
            <!--<input type="text" class="input-underline" style="width:60%"-->
            <!--readonly-->
            <!--v-model="meter.f_llj_type"-->
            <!--placeholder='流量计类型' >-->
            <!--</div>-->
            <!--</div>-->
          </div>
          <!--          </div>-->


          <div class="panel panel-primary col-sm-12 datapanel" v-if="isMinYong">
            <!--            <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>-->
            <form class="form-horizontal select-overspread " style="flex: 1;">
              <div style="margin-top: 2%">
                <img style="margin-top: -2px;margin-left: 2px" src="../../../../static/images/lefticon/矩形1183.png">
                <a style="font-size: 16px;font-weight: 500;">民用点火信息</a>&nbsp;<a
                style="color: #999999;text-decoration: none"></a>
              </div>
              <div class="row auto" style="margin-top: 10px;margin-left: 10px;">
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;表&nbsp;封&nbsp;号&nbsp;</label>
                  <input type="text" class="input_search " style="width:60%" v-model="meter.f_metertitles"
                         placeholder='表封号'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;表&nbsp;前&nbsp;阀&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="meter.f_bqf_type"
                         placeholder='表前阀'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;报&nbsp;警&nbsp;器&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="meter.f_alarm_code"
                         placeholder='报警器'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;表&emsp;&emsp;向</label>
                  <v-select :value.sync="meter.f_aroundmeter" :options='aroundmeters' placeholder='左右表'
                            close-on-select
                            v-model='meter.f_aroundmeter'></v-select>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;镀锌管&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_galvanize_pipe"
                         placeholder='镀锌管'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;三&emsp;通&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_tee"
                         placeholder='三通'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;对&emsp;丝&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_nipple"
                         placeholder='对丝'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;弯&emsp;头&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_elbow"
                         placeholder='弯头'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;管&emsp;卡&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_pipe_strap"
                         placeholder='管卡'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;灶前阀&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_zqf"
                         placeholder='灶前阀'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;胶&emsp;管&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_sebific_duct"
                         placeholder='胶管'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;自闭阀&emsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_zbf"
                         placeholder='自闭阀'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;燃气具品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_gas_appliance"
                         placeholder='燃气具'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;燃气具年限</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_gas_appliance_num"
                         placeholder='燃气具使用年限'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;热水器品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_geyser"
                         placeholder='热水器'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;热水器年限</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_geyser_num"
                         placeholder='热水器使用年限'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;壁挂锅炉品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_bgl"
                         placeholder='壁挂锅炉'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;壁挂锅炉年限</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_bgl_num"
                         placeholder='壁挂锅炉使用年限'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;交付日期</label>
                  <datepicker placeholder="交付日期" style="width: 57%"
                              v-model="fireinfo.f_deliver_date"
                              :value.sync="fireinfo.f_deliver_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;点火人员</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_lgniter"
                         placeholder='点火人员'>
                </div>
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;检验结论</label>
                  <input type="text" class="input_search" style="width:80%" v-model="fireinfo.f_fic"
                         placeholder='设施检验结论'>
                </div>
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;备&emsp;&emsp;注</label>
                  <input type="text" class="input_search" style="width:80%" v-model="fireinfo.f_comments"
                         placeholder='备注'>
                </div>
              </div>
            </form>
          </div>
          <div class="panel panel-primary col-sm-12 datapanel" v-else>
            <!--            <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>-->
            <form class="form-horizontal select-overspread " style="flex: 1;">
              <div style="margin-top: 2%">
                <img style="margin-top: -2px;margin-left: 2px" src="../../../../static/images/lefticon/矩形1183.png">
                <a style="font-size: 16px;font-weight: 500;">非民用点火基本信息</a>&nbsp;<a
                style="color: #999999;text-decoration: none"></a>
              </div>

              <div class="row auto" style="margin-top: 10px;margin-left: 10px;">
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;表&emsp;&emsp;向</label>
                  <v-select :value.sync="meter.f_aroundmeter" :options='aroundmeters' placeholder='左右表'
                            close-on-select
                            v-model='meter.f_aroundmeter'></v-select>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;气表品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_fire_gasbrand"
                         placeholder='气表品牌'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;流量计品牌</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_flowmeter_brand"
                         placeholder='流量计品牌'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;流量计型号</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_flowmeter_model"
                         placeholder='流量计型号'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">流量计出厂编号</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_flowmeter_factory_num"
                         placeholder='流量计出厂编号'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;流量计表封号</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_llj_metertitles"
                         placeholder='流量计表封号'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;流量计类型</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_llj_type"
                         placeholder='流量计类型'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;流量范围</label>
                  <input type="text" class="input_search" style="width:60%"
                         v-model="meter.f_llj_range"
                         placeholder='流量范围'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;控制器品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_control_brand"
                         placeholder='控制器品牌'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;控制器型号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_control_model"
                         placeholder='控制器型号'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">控制器出厂日期</label>
                  <datepicker placeholder="控制器出厂日期" style="width: 60%"
                              v-model="fireinfo.f_control_date"
                              :value.sync="fireinfo.f_control_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;控制器表编码</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_control_code"
                         placeholder='控制器表编码'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;控制器表封号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_control_number"
                         placeholder='控制器表封号'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;燃气具类型</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_appliance_type"
                         placeholder='燃气具类型'>
                </div>

                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;燃气具品牌</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_appliance_brand"
                         placeholder='燃气具品牌'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;燃气具型号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_appliance_model"
                         placeholder='燃气具型号'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;报警箱信息</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_alarm_info"
                         placeholder='报警控制箱信息'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;探测器数量</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_detector_number"
                         placeholder='探测器数量'>
                </div>
                <div class="col-sm-3 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;交付日期</label>
                  <datepicker placeholder="交付日期" style="width: 60%"
                              v-model="fireinfo.f_deliver_date"
                              :value.sync="fireinfo.f_deliver_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;通讯方式</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_contact_method"
                         placeholder='通讯方式'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;管道表封</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_piple_number"
                         placeholder='管道表封'>
                </div>
                <div class="col-sm-3 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;点火人员</label>
                  <input type="text" class="input_search" style="width:60%" v-model="fireinfo.f_lgniter"
                         placeholder='点火人员'>
                </div>
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;检验结论</label>
                  <input type="text" class="input_search" style="width:90%" v-model="fireinfo.f_fic"
                         placeholder='设施检验结论'>
                </div>
                <div class="col-sm-12 form-group">
                  <label class="font_normal_body">&emsp;&emsp;&emsp;备&emsp;&emsp;注</label>
                  <input type="text" class="input_search" style="width:80%" v-model="fireinfo.f_comments"
                         placeholder='备注'>
                </div>
              </div>
            </form>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>

</template>

<script>

export default {
  title: '表具设备信息',
  data () {
    return {
      showTable: false,
      imgdelete: '/images/mainicon/deletedevice.png',
      imgadd: '/images/mainicon/adddevice.png',
      f_service_life: 0,
      fireinfoShow: true,
      aroundmeters: this.$appdata.getParam('左右表'),
      styleList: this.$appdata.getParam('区分点火类型'),
      isMinYong: false
    }
  },
  props: {
    fireinfo: {
      type: Object
    },
    baseinfo: {},
    addressinfo: {},
    meter: {},
    show_fire: {
      type: Boolean,
      default: false
    }
  },
  ready () {
    this.$nextTick(() => {
      this.styleList.forEach(row => {
        if (this.meter.gasmodel[0].f_meter_style == row.value) {
          this.isMinYong = true
        }
      })
    })
  },
  computed: {},
  methods: {
    showTableBtn () {
      this.showTable = !this.showTable
      console.log('点火信息???', this.fireinfo)
    }
  },
  watch: {
    'fireinfo' (val) {
    }
  }
}
</script>
<style lang="less">
.flex-deviceinfo {
  padding: 0px 20px;
  justify-content: space-between;
  height: auto;
  flex-wrap: wrap;
}

.input-underline {
  border-bottom: 1px solid #dbdbdb;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.flex-two-info {
  margin-bottom: 10px;
  align-items: center;
  width: 48%;
}
</style>
