<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;
  }
</style>

<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <p align="center" style="color: maroon" v-if="!$parent.$parent.isHaveJiBiao">只限物联网表进行开关阀操作</p>
          <p align="center" style="color: maroon" v-if="$parent.$parent.isHaveJiBiao">只限物联网表和机表进行操作</p>
          <form>
            <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>
              </div>
              <div class="col-xs-8" >
                <input id="f_userinfo_code" class="search_input input-font" v-model="$parent.$parent.f_userinfo_code" />
              </div>
            </div>
            <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_meternumber" class="font text-left">用户表号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_meternumber" class="search_input input-font" v-model="$parent.$parent.f_meternumber" />
              </div>
            </div>
            <div class="row app-row" v-if="$parent.$parent.isHaveJiBiao">
              <div class="col-xs-4">
                <img src="../../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_meternumber" class="font text-left">气表类型：</label>
              </div>
              <div class="col-xs-8" >
                <v-select
                  class="input-font"
                  placeholder='请选择气表类型'
                  :value.sync="$parent.$parent.f_meter_type"
                  v-model="$parent.$parent.f_meter_type"
                  :options='$parent.$parent.meterTypeOptions'
                  close-on-select
                  clear-button>
                </v-select>
              </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_meternumber" class="font text-left">阀门状态：</label>
              </div>
              <div class="col-xs-8" >
                <v-select
                  class="input-font"
                  placeholder='请选择阀门状态'
                  :value.sync="$parent.$parent.f_valve_state"
                  v-model="$parent.$parent.f_valve_state"
                  :options="[{label: '全部', value: ''}, {label: '开阀', value: '开阀'}, {label: '关阀', value: '关阀'}]"
                  close-on-select
                  clear-button>
                </v-select>
              </div>
            </div>
            <div class="row app-row"  >
              <div class="col-xs-4" style="margin-bottom: 6px">
                <img src="../../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">小区</span>
              </div>
              <div class="col-xs-8">
                <v-select style="width:60%" :value="$parent.$parent.f_residential_area" :value-single="true"
                          @change="$parent.$parent.getbuilding"
                          :options='$parent.$parent.residential' placeholder='请选择小区'
                          close-on-select>
                </v-select>

              </div>
            </div>

            <div class="row app-row"  >
              <div class="col-xs-4" style="margin-bottom: 6px">
                <img src="../../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">楼栋</span>
              </div>
              <div class="col-xs-8">
                <v-select style="width:60%" :value="$parent.$parent.f_building" :value-single="true"
                          @change="$parent.$parent.getunit"
                          :options='$parent.$parent.building' placeholder='请选择楼栋'
                          close-on-select>
                </v-select>

              </div>
            </div>
            <div class="row app-row" >
              <div class="col-xs-4" style="margin-bottom: 6px" >
                <img src="../../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <span class="text-left font">单元</span>
              </div>
              <div class="col-xs-8">
                <v-select style="width:60%" :value.sync="model.f_unit" :value-single="true"
                          :options='$parent.$parent.unit' placeholder='请选择单元'
                          close-on-select>
                </v-select>

              </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=model.f_address condition="f_address like '%{}%'"  />
              </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-2" >
                <input style="width: 100%" class="input-font" v-model="$parent.$parent.f_system_amount_start" />
              </div>
              <div class="col-xs-2" style="display: flex; justify-content: center">
                ≤ x ≤
              </div>
              <div class="col-xs-2" >
                <input style="width: 100%" class="input-font" v-model="$parent.$parent.f_system_amount_end" />
              </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="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="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>用户编号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_userinfo_code }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>用户名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_user_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>用户类型:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_user_type }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>用户电话:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_user_phone }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="float: left"><b>用户地址:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_address }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>燃气表号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>左右表:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_aroundmeter }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>气表品牌:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_meter_brand }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>气表类型:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_meter_type }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>最近缴费时间:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_operate_date }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>最近缴费金额:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_collection ? `${row.f_collection.toFixed(2)}元` : '' }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>系统余额:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_system_amount ? row.f_system_amount.toFixed(2) : 0 }}元</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>阀门状态：</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_valve_state || '暂无' }}</p>
                </div>
                <div class="col-xs-12" v-if="row.f_valve_state == '关阀'">
                  <p class="panel-title col-xs-5 text-left font"><b>关阀原因：</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_off_valve_reason || '暂无' }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>开关阀时间：</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_instruct_date || '无' }}</p>
                </div>
                <div class="col-xs-6" v-if="row.f_meter_type == '物联网表'">
                  <button class="btn  btn-font btn-color"  type="button"  style="width: 28%;padding: 2px 5px;"  v-if="row.f_valve_state == '关阀'" @click="$parent.$parent.$parent.openvalve(row)">开阀</button>
                  <button class="btn  btn-font btn-color" type="button"  style="width: 28%;padding: 2px 5px;" v-if="row.f_valve_state == '开阀'" @click="$parent.$parent.$parent.clonevalve(row)">关阀</button>
                  <button class="btn  btn-font btn-color" type="button"  style="width: 28%;padding: 2px 5px;" v-if="row.f_meter_brand.includes('西美')"  @click="$parent.$parent.$parent.clearBarrier(row)">清除障碍</button>
                </div>
                <div class="col-xs-6" v-if="row.f_meter_type == '机表'">
                  <button class="btn  btn-font btn-color" type="button"  style="width: 50%;padding: 2px 5px;" @click="$parent.$parent.$parent.goVindicate(row)">档案维护</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <modal :show.sync="showModal" :backdrop="false">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          {{modalTitle}}
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <div class="row" style="margin-top: 6px">
          <textarea id="el_ca_txt" v-model.trim="f_comments" style="border-radius:4px;width: 100%;" placeholder="请输入开阀原因" v-if="istype == '开阀'" >
          </textarea>
          <v-select class="rightipt" :value.sync="f_comments_temp"
                    v-model="f_comments_temp"
                    placeholder='请选择关阀原因'
                    :width='"60%"'
                    v-else
                    readonly
                    :options="bqf_states_reasons"
                    close-on-select value-single></v-select>
          <textarea id="el_ca_txt_a" v-model.trim="f_comments" style="border-radius:4px;width: 100%;" placeholder="请输入关阀原因" v-if="f_comments_temp == '其他'" >
          </textarea>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">开关阀照片:</label>
          <div class="">
            <div class="panel" style="padding: 0px 15px 5px 10px;">
              <div class="panel-body panel-self"
                   style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                <div class="row" style="height: 240px;">
                  <div class="col-sm-4">
                    <img-self :src="f_hl_file_path" alt="开关阀照片" height="200" width="150"></img-self>
                  </div>
                </div>
                <div :class="style__" class="row div-photo">
                  <button class="btn btn-primary btn-photo" name="button" type="button"
                          @click="takePic('f_hl_file_path', '开关阀照片')">拍照
                  </button>
                  <img :class="style__" src="../../../assets/remove.png" style="width: 10%;"
                       @click="delfile('f_hl_file_path', this.f_hl_file_path)"></img>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default" @click="showModal = false">取消</button>
        <button type="button" class="btn btn-success" @click="save(istype)">{{istype}}</button>
      </div>
    </modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import PhoneUpUserinfo from './PhoneUpUserinfo'
  import { PagedList,HttpResetClass } from 'vue-client'
  import * as Util from "../../Util";

  export default {
    title: '开关阀',
    data () {
      return {
        model: Vue.android ? new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/SwitchValveSeachUser`, 5) : new PagedList( 'AndroidRest/rs/sql/SwitchValveSeachUser',5),
        f_residential_area:'',
        f_building:'',
        f_meternumber: '',
        f_userinfo_code: '',
        f_operator: Vue.user.name,
        filialeid: Vue.user.orgid,
        type: '',
        residential:[{label:'全部',value:''}],
        unit:[{label:'全部',value:''}],
        building:[{label:'全部',value:''}],
        showModal: false,
        f_hl_file_path:'',
        msgState:"",
        modalTitle: '', //开关阀标题
        f_comments: '', //开关阀原因
        f_comments_temp:'',
        bqf_states_reasons:Vue.$appdata.getParam('关阀原因'),
        istype: '', //
        thisOneData: '', //当前操作的用户
        f_meter_type: '',
        condition: '',
        isHaveJiBiao: false,
        meterTypeOptions: [{label: '全部', value: ''}, {label: '物联网表', value: '物联网表'}, {label: '机表', value: '机表'}],
        f_valve_state: '',
        f_system_amount_start: '',
        f_system_amount_end: ''
      }
    },
    async ready () {
      this.isHaveJiBiao = this.$appdata.getSingleValue('开关阀是否查询机表') === '是'
      if (this.isHaveJiBiao) {
        this.condition = " and f_meter_type in ('物联网表', '机表')"
      } else {
        this.condition = " and f_meter_type in ('物联网表')"
      }
      await this.getAreaList()
    },
    methods: {
      cameraCallBack(prop, fileName) {
        HostApp.__this__.$set(prop, fileName)
        //tag
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        //tag
        let fileName
        if (!this[prop] || this[prop].includes("nopic.png")) {
          fileName = Util.guid() + '.jpg'
        } else {
          fileName = Util.getFileName(this[prop])
        }
        HostApp._open_a_page({
          type: 'boomerang',
          page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
          param: {
            file: fileName,
            requestCode: 111,
            callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");',
            watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + Vue.user.name
          }
        })
      },
      delfile(prop, fileName) {
        if (fileName == "") {

        }
        else {
          HostApp.delfile(fileName)
          this[prop] = Vue.nopic
        }
      },
      getbuilding(val) {
        if(val){
         this.f_residential_area = val
          this.building=[{label:'全部',value:''}]
          let res = new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_GroupBy`, {
            data: {
              items: "f_building",
              tablename: "t_user_address",
              condition: `f_residential_area='${val}'`,
              groupitem: "f_building"
            }
          }, {resolveMsg: null, rejectMsg: null}).then((res)=>{
            if (res.data) {
              for(let i =0 ;i<res.data.length;i++){
                this.building.push({label:res.data[i].f_building,value:res.data[i].f_building})
              }
            }
          })
        }
      },
      async getAreaList() {
        let res =await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_GroupBy`, {
          data: {
            items: 'f_residential_area',
            tablename: 't_area',
            condition: 'f_filialeid = '+this.filialeid,
            groupitem: 'f_residential_area'
          }
        }, {resolveMsg: null, rejectMsg: null})
        if (res.data) {
          for(let i =0 ;i<res.data.length;i++){
            this.residential.push({label:res.data[i].f_residential_area,value:res.data[i].f_residential_area})
          }
        }
      },
      getunit(val){
        if(val){
          this.f_building = val
          this.unit=[{label:'全部',value:''}]
          let res = new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_GroupBy`, {
            data: {
              items: "f_unit",
              tablename: "t_user_address",
              condition: `f_residential_area='${this.f_residential_area}' and f_building = '${val}'`,
              groupitem: "f_unit"
            }
          }, {resolveMsg: null, rejectMsg: null}).then((res)=>{
            if (res.data) {
              for(let i =0 ;i<res.data.length;i++){
                this.unit.push({label:res.data[i].f_unit,value:res.data[i].f_unit})
              }
            }
          })
        }

      },
      clearBarrier(val){
        let datas =  {
          moduleName:"XiMeiSystem", // 固定值
          content:{
            tradeCode:"3015",// 固定值
            appid: "yysf", // 固定值
            partner: "cqsemay_bcts", // 固定值
            version:"v1", // 固定值
            tasked:this.getuuid(), // 任务id
            notifyUrl:"http://192.168.2.10:8445/webmeter/rs/logic/XiMeiSystemCallBack", // 固定值
            meterNo: val.f_meternumber,// 表号
            signType:" MD5" //固定值
          },
          title: "清除异常", // 固定值
          type: "清除异常", // 固定值
          inputtor:this.f_operator, // 操作人
          userId:val.f_userfiles_id,   // 表档案ID
          dataId: null // 操作记录ID
        }
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/webmeter/rs/logic/syncSaveSetParamsTemplate`, {data: datas},{resolveMsg: `清理成功`, rejectMsg: `清理失败`}).then(res => {
        })
      },
      getuuid(){
        let uuidA = '';
        var s = [];
        var hexDigits = '0123456789abcdef';
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = '4';
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = '-';
        uuidA = s.join('');
        return uuidA;
      },
      selfSearch () {
        // let condition =  ` uf.f_filialeid = '${this.filialeid}'`
        let condition =  `f_filialeid = '${this.filialeid}'`
        // let condition =  ` 1=1 `
        condition += this.condition
        condition += this.f_meternumber ? ` and f_meternumber = '${this.f_meternumber}'` : ""
        condition += this.f_userinfo_code ? ` and f_userinfo_code = '${this.f_userinfo_code}'` : ""
        condition += this.f_meter_type != '' && this.f_meter_type != [] ? ` and f_meter_type = '${this.f_meter_type}'` : ""
        condition += this.f_valve_state != '' && this.f_valve_state != [] ? ` and f_valve_state = '${this.f_valve_state}'` : ""
        if (this.f_system_amount_start){
          condition += ` and f_system_amount >= ${this.f_system_amount_start}`
        }
        if (this.f_system_amount_end){
          condition += ` and f_system_amount <= ${this.f_system_amount_end}`
        }
        if (this.f_building){
          condition += ` and f_building = '${this.f_building}'`
        }
        if (this.f_residential_area){
          condition += ` and f_residential_area = '${this.f_residential_area}'`
        }
        if (this.$refs.paged.$refs.cri.model.f_unit){
          condition += ` and f_unit = '${this.$refs.paged.$refs.cri.model.f_unit}'`
        }
        if (this.$refs.paged.$refs.cri.model.f_address){
          condition += ` and f_address like '%${this.$refs.paged.$refs.cri.model.f_address}%'`
        }
        console.log(condition)
        this.model.search(condition)
      },
      openvalve (val) {
        this.modalTitle = '对表号为'+ val.f_meternumber+'开阀'
        this.istype = '开阀'
        this.showModal = true;
        this.thisOneData = val;
        // this.openOrCloneValveMethod('开阀')
      },
      clonevalve (val) {
        //tag
        this.modalTitle = '对表号为'+ val.f_meternumber+'关阀'
        this.istype = '关阀'
        this.showModal = true;
        this.thisOneData = val;
      },
      async uploadPic() {
        this.tableImages = [{ path: this.f_hl_file_path }]
        if (this.tableImages.length == 0) {
          this.$showMessage('请上传图片')
          return
        }
        let data = {
          tableImages: this.tableImages
        }
        HostApp.__this__ = this
        HostApp.logicWithHint({
          'logic': 'imagesUploadAndroid', 'callback': 'javascript: HostApp.__this__.commitCallBack()',
          'data': data, 'backresult': 1
        })
      },
      async commitCallBack(jo) {
        if (jo.state == 'ok') {
          let result = JSON.parse(jo.result)
          if (result.images && result.images.length > 0) {
            this.openOrCloneValveMethod(this.msgState,result.images[0].imgfileName)
          } else {
            this.$showMessage('上传图片失败')
          }
        }
      },
      save(msg){
        this.msgState = msg
        if (this.f_hl_file_path) {
          this.uploadPic()
        } else {
          this.openOrCloneValveMethod(msg,'')
        }
      },
      openOrCloneValveMethod (msg,path) {
        if(msg === '关阀'){
          this.f_comments = this.f_comments_temp !== '其他' ? this.f_comments_temp : this.f_comments
        }
        if (this.f_comments=='') {
          return  this.$showMessage("请输入开关阀原因")
        }
        var data = {
          instructType: '阀门控制',
          instructTitle: `手动${msg}`,
          condition: `t_userfiles.f_userfiles_id='${this.thisOneData.f_userfiles_id}'`,
          f_hl_file_path: path,
          meterBrandName: this.thisOneData.f_alias,  // 气表别名
          f_instruct_state: '待发送',
          inputtor: this.f_operator,
          reasonInfo: this.f_comments,   //操作原因
          meternumberf: this.thisOneData.f_meternumber,  //表号
          contentData: {isOpen: msg=='开阀' ? 1 : 0},  // oper 为true 时为开阀   false 为关阀
        }
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/iot_saveInstruct`, {data: data}).then((row) => {
          this.$showMessage(`${msg}指令发送成功，请等候2分钟进行查询`)
          //tag
          this.thisOneData = '';
          this.istype = '';
          this.f_comments = '';
          this.showModal = false
          this.selfSearch()
        })
      },
      //  档案维护
      goVindicate(row) {
        console.log(row)
        var pardate = {
          title:'档案维护',
          safe:true
        }
        this.$dispatch('gotoson',pardate)
        this.$goto('PhoneUpUserinfo', {f_userinfo_id: row.f_userinfo_id},'self')
      }
    },
    components: {
      'PhoneUpUserinfo': PhoneUpUserinfo
    }
  }
</script>
