<template>
  <form novalidate class="form-horizontal" style="width: 95%;margin: 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_userinfo_code" class=" font text-left label-font">用户编号：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_userinfo_code" class="search_input input-font"
               v-model=item.f_userinfo_code readonly="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-font">用户姓名：</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input input-font"
               v-model=item.f_user_name readonly="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-font">用户地址：</label>
      </div>
      <div class="col-xs-8">
        <input class="search_input text-input input-font"
               v-model=item.f_address readonly="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 for="f_housing" class="font text-left label-font">用户电话：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_housing" class="search_input input-font"
               v-model="item.f_user_phone" readonly="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 for="f_meter_number" class="font text-left label-font">表号：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_meter_number" class="search_input input-font"
               v-model="item.f_meternumber" readonly="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 for="f_cardmeternumber" class="font text-left label-font">现场表号：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_cardmeternumber" class="search_input input-font"
               v-model="item.f_cardmeternumber" readonly="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 for="f_user_type" class="font text-left label-font">用户类型：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_user_type" class="search_input input-font"
               v-model="item.f_user_type" readonly="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 for="f_meterclassify" class="font text-left label-font">表类型：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_meterclassify" class="search_input input-font"
               v-model="item.f_meter_classify" readonly="readonly"/>
      </div>
    </div>

    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_last_hand_date" class="font text-left label-font">上期时间：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_last_hand_date" class="search_input input-font"
               v-model="item.f_last_hand_date" readonly="readonly"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/shijian.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_hand_date" class="font text-left label-font">本次抄表时间：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_hand_date" class="search_input input-font"
               v-model="item.f_hand_date" readonly="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 for="f_last_tablebase" class="font text-left label-font">上期底数：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_last_tablebase" class="search_input input-font" type="text"
               v-model="item.f_last_tablebase" readonly="readonly"/>
      </div>
    </div>

    <!--工商业新加上期字段 -->
    <div class="row app-row" v-if="from=='nocivil'">
      <div class="col-xs-4">
        <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_last_flow_standard_total" class="font text-left label-font">上期标况累计：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_last_flow_standard_total" class="search_input input-font" type="text" readonly="readonly"
               v-model="item.f_last_flow_standard_total"/>
      </div>
    </div>

    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_last_surplus_gas" class="font text-left label-font">上期表剩余：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_last_surplus_gas" class="search_input input-font" type="text" readonly="readonly"
               v-model="item.f_last_surplus_gas"/>
      </div>
    </div>
    <!-- 是否换流量计   -->
    <div class="row app-row" v-if="from=='nocivil'">
      <div class="col-xs-4">
        <img src="../../assets/累计.png" style="width: 20px;margin-bottom: 5px" alt="">
        <label for="f_is_change_flowmeter" class="font text-left label-font">是否换流量计：</label>
      </div>
      <div class="col-xs-8">
        <input id="f_is_change_flowmeter" class="search_input input-font" type="text" readonly="readonly"
               v-model="item.f_is_change_flowmeter"/>
      </div>
    </div>
    <!-- 工商业流量计信息 -->
    <div class="row bg-info" v-if="from=='nocivil'">
      <label class="font text-left label-font">流量计信息</label>
      <div class="row">
        <!-- 工商本期新加字段    -->
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/压力.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_pressure" class="font text-left label-font">压力：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_pressure" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_pressure"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/温度.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_temperature" class="font text-left label-font">温度：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_temperature" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_temperature"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_standard_instant" class="font text-left label-font">标况瞬时：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_standard_instant" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_standard_instant"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_standard_total" class="font text-left label-font">标况累计：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_standard_total" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_standard_total"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_working_instant" class="font text-left label-font">工况瞬时：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_working_instant" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_working_instant"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/瞬时.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_flow_working_total" class="font text-left label-font">工况累计：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_working_total" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_working_total"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt=""> <!--流量计底数-->
            <label for="f_tablebase" class="font text-left label-font">流量计底数：</label>
          </div>
          <div class="col-xs-8"> <!--工商业的本期底数-->
            <input id="f_tablebase" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_tablebase"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_surplus_gas" class="font text-left label-font">表剩余气量：</label>
          </div>
          <div class="col-xs-8"> <!--工商业的剩余气量-->
            <input id="f_surplus_gas" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_surplus_gas"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_total_gas" class="font text-left label-font">累购气量：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_total_gas" type="number" class="search_input input-font" placeholder="累购气量"
                   v-model="item.f_total_gas" readonly="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 for="f_flow_gas_consumption" class="font text-left label-font">期间用气量：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_gas_consumption" type="number" class="search_input input-font"
                   v-model="item.f_flow_gas_consumption" readonly="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 for="f_flow_deduction" class="font text-left label-font">表期间扣减量：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_flow_deduction" class="search_input input-font" type="text" readonly="readonly"
                   v-model="item.f_flow_deduction"/>
          </div>
        </div>

        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_difference" class="font text-left label-font">差值：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_difference" class="search_input input-font" readonly="readonly"
                   v-model="item.f_difference_value"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 民用信息 -->
    <div class="row bg-info" v-if="from=='civil'">
      <label class="font text-left label-font">抄表信息</label>
      <div class="row">
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/数据.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_tablebase1" class="font text-left label-font">本期底数：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_tablebase1" class="search_input input-font" type="number" v-model="item.f_tablebase"
                   readonly="readonly"/>
          </div>
        </div>
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/guandao1.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_surplus_gas1" class="font text-left label-font">剩余量：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_surplus_gas1" type="number" class="search_input input-font" readonly="readonly"
                   v-model="item.f_surplus_gas"/>
          </div>
        </div>
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/housestyle.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_total_gas1" class="font text-left label-font">累购气量：</label>
          </div>
          <div class="col-xs-8">
            <input id="f_total_gas1" type="number" class="search_input input-font" readonly="readonly"
                   v-model="item.f_total_gas"/>
          </div>
        </div>
        <div class="row app-row">
          <div class="col-xs-4">
            <img src="../../assets/差值.png" style="width: 20px;margin-bottom: 5px" alt="">
            <label for="f_difference_value1" class="font text-left label-font">累购差值：</label>
            <!--累购-当前表底数-剩余-->
          </div>
          <div class="col-xs-8">
            <input id="f_difference_value1" class="search_input input-font" readonly="readonly"
                   v-model="item.f_difference_value"/>
          </div>
        </div>
      </div>
    </div>


    <div class="form-group col-md-12 col-sm-12 col-xs-12">
      <label class="text-left font label-font">抄表整体照片(要求能清晰反应用户表底数信息)：</label>
      <div class="auto">
        <div class="panel" style="padding: 10px 10px 5px 10px;">
          <div class="panel-body panel-self"
               style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
            <div class="row" style="height: 240px;overflow: scroll;top: 1px">
              <div class="col-sm-4" style="margin-bottom: 35px"
                   v-for="img in imgs">
                <img-self :src="getImgpath(img)" alt="用户表底数照片" width="150" height="200"></img-self>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  title: '移动抄表已办详情',
  props: ['item', 'from', 'role'],
  data() {
    return {
      imgs: [],
      url:this.$androidUtil.getProxyUrl()
    }
  },
  ready() {
    this.imgs = this.commaCutIntoArray(this.item.f_meter_path_name)
  },
  methods: {
    getImgpath(val){
      console.log(this.url+'/rs/image/file/'+val)
      return this.url+'/rs/image/file/'+val
    },
    commaCutIntoArray (f_meter_path_name) {
      if (!f_meter_path_name) { return '';}
      return f_meter_path_name.split(",");
    }
  },
}
</script>
<style>
.panel-self {
  border-radius: 5px;
  border: 1px solid #c5e1f7;
  background-color: #F2F6FA;
}

.label-font {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 70%;
}

.text-left {
  text-align: left;
}

.font {
  font: 15px PingFang-SC-Medium;
  color: #333333;
}

.showIi {
  font: 14px PingFang-SC-Medium;
  color: #666666;
}

.info {
  margin-top: 15px;
  border-radius: 5px;
  background-color: #f3faff;
}

.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;
}

.btn-voice {
  border-radius: 7px;
  border: 1px solid #dedede;
  background-color: #f5fbff;
  font: 15px PingFang-SC-Bold;
  color: #499edf;
}

.save-btn {
  width: 25%;
  background-color: #499edf;
  border-radius: 6px;
  color: #FFFFFF;
  font: 15px PingFang-SC-Bold;
}

.upload-btn {
  width: 25%;
  background-color: #ffffff;
  border: 1px solid #499edf;
  border-radius: 6px;
  color: #499edf;
  font: 15px PingFang-SC-Bold;
}

.repair-btn {
  width: 25%;
  border: 1px solid #499edf;
  border-radius: 6px;
  font: 15px PingFang-SC-Bold;
}

#el_ca_tx {
  width: 100%;
  margin: 5px;
}
</style>
