<template >
  <div class="auto" style="overflow-y: scroll;" :style="{height:height1}" >
  <div class="row" style="height: 30px">
    <div style="float: left">
      <label class="font_normal_body">基本信息</label>
    </div>
    <div style="float: right;">
      <button class="button_search " @click="cancelmain()" >返回</button>
      <!--<button class="button_search "  v-if="valveLimit" @click="valvecontrol" >开关阀</button>-->
    </div>
  </div>
  <div class="panel panel-primary datapanel">
    <!--    第一行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3" >
        <label class="font_normal_body"><nobr>客户编号:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_userinfo_code}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>客户姓名:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_user_name}}</nobr></label>
      </div>
    </div>
<!--    第二行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>客户地址:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_address}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"></label>
      </div>
    </div>
    <!--    第三行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>证件类型:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_credentials}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>证件号码:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_idnumber}}</nobr></label>
      </div>
    </div>
    <!--    第四行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>客户类型:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_user_type}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>用气性质:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_gasproperties}}</nobr></label>
      </div>
    </div>
    <!--    第五行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>安装日期:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_gas_date}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"></label>
      </div>
    </div>
    <!--    第六行数据-->
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>用户状态:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_user_state}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>账户余额:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_balance}}</nobr></label>
      </div>
    </div>
    <div class="row" style="height: 30px">
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>安装位置:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"><nobr> {{row.f_position}}</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body" ><nobr>客户电话:</nobr></label>
      </div>
      <div class="col-sm-3">
        <label class="font_normal_body"> <nobr>{{row.f_user_phone}}</nobr></label>
      </div>
    </div>
  </div>
    <div class="row" style="height: 30px">
      <div style="float: left">
        <label class="font_normal_body">表具信息</label>
      </div>
    </div>
    <div class="panel panel-primary datapanel">
      <!--    第一行数据-->
      <div class="row" style="height: 30px">
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>表号:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_meternumber}}</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>气表状态:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_table_state}}</nobr></label>
        </div>
      </div>
      <!--    第二行数据-->
      <div class="row" style="height: 30px">
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>气表底数:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_meter_base}}</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>气表类型:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_meter_type}}</nobr></label>
        </div>
      </div>
      <!--    第三行数据-->
      <div class="row" style="height: 30px">
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>气表品牌:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_meter_brand}}</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>气表型号:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_meter_style}}</nobr></label>
        </div>
      </div>

      <!--    第三行数据-->
      <div class="row" style="height: 30px" v-if="row.f_meter_type.includes('卡表')">
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>累计气量:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_total_gas}}</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>累计金额:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_total_fee}}</nobr></label>
        </div>
      </div>
      <!--    第四行数据-->
      <div class="row" style="height: 30px" v-if="row.f_meter_type.includes('物联网表')">
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>表剩余金额:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr>{{row.f_balance_amount}}</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body" ><nobr>阀门状态:</nobr></label>
        </div>
        <div class="col-sm-3">
          <label class="font_normal_body"> <nobr><span @click="valvecontrol"><a>{{row.f_valvestate}}</a></span></nobr></label>
        </div>
      </div>
    </div>
    <div  v-show="devices.length > 0" style="height: auto" >
      <div class="row" style="height: 30px">
        <div style="float: left">
          <label class="font_normal_body" >设备信息</label>
        </div>
      </div>
      <div v-for="device in devices" class="panel panel-primary datapanel">
        <!--    第一行数据-->
        <div class="row" style="height: 30px">
          <div class="col-sm-3">
            <label class="font_normal_body" ><nobr>设备类型:</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body"> <nobr>{{device.f_devices_type}}</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body" ><nobr>设备品牌:</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body"> <nobr>{{device.f_brand}}</nobr></label>
          </div>
        </div>
        <!--    第二行数据-->
        <div class="row" style="height: 30px">
          <div class="col-sm-3">
            <label class="font_normal_body" ><nobr>设备型号:</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body"> <nobr>{{device.f_devices_model}}</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body" ><nobr>设备数量:</nobr></label>
          </div>
          <div class="col-sm-3">
            <label class="font_normal_body"> <nobr>{{device.f_devices_num}}</nobr></label>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px;"></div>
  </div>

  <!--阀控管理弹框-->
  <modal :show.sync="valve" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close()"><span>&times;</span></button>
      <h4 class="modal-title" align="center">阀控管理</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="form-group " style="padding-left: 8px">
        <label  class="font_normal_body" >操作原因</label>

        <textarea class="form-control" v-model="operateReason" rows="3" placeholder="请填写操作原因"></textarea>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button  type="button" class="button_search btn-ln fr" v-show="row.f_valvestate=='关阀'" @click='valveoperate(true)'>开阀</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button  type="button" class="btn btn-info btn-ln fr" v-show="row.f_valvestate=='开阀'" @click='valveoperate(false)'>关阀</button>
    </footer>
  </modal>
</template>

<script>
  import * as Util from '../../../Util'
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  export default {
    title: 'NewWatchMsg',
    name: 'NewWatchMsg',
    // 表相关信息1
    props: {
      height1: '',
      watchmsg: ''
    },

    data () {
      return {
        // 根据表编号查用户信息
        model: null,
        f_parameter_name: [''],
        devices: [],
        valveLimit: false,
        row: {},
        // 抄表录入开关
        watchshow: false,
        watchExce: {
          // 异常对象
          exceobj: {},
          // 异常类型
          f_error_type: '',
          // 异常描述
          f_error_msg: ''
        },
        // 开关阀操作原因
        operateReason: '',
        startDate2: Util.toStandardTimeStringForFirstDay(),
        endDate2: Util.toStandardTimeStringForLastDay(),
        yearForSignal: '',
        monthForSignal: '',
        valve: false,
        signal: false,
        battery: false,
        isShowUserException: false,
        isMetereadData: false,
        // 保存弹出框的值
        f_beizhu: ''
      }
    },

    ready () {
      this.search()
      this.getDevice()
      this.valveLimit = this.$login.r.includes('开关阀权限')
    },
    methods: {
      async getDevice () {
        let http = new HttpResetClass()
        let condition = `f_userfiles_id = '${this.watchmsg.f_userfiles_id}'`
        let getDevices = await http.load('POST', 'rs/sql/sale_GetDevicesInfo', {data: {condition: condition}}, {rejectMsg: null, resolveMsg: null})

        console.log('获取设备信息。。', getDevices)
        this.devices = getDevices.data
      },
      // 保存输入
      saveException () {
        // 准备数据
        var Exejson = {}
        // 抄表记录id
        Exejson.data_id = '无抄表记录id'
        // 异常表档案ID
        Exejson.f_user_id = this.watchExce.exceobj.f_user_id
        // 异常户档案ID
        Exejson.f_userinfo_id = this.watchExce.exceobj.f_userinfo_id
        // 异常表号
        Exejson.f_meternumber = this.watchExce.exceobj.f_meternumber
        // 分公司
        Exejson.f_filiale = this.watchExce.exceobj.f_filiale
        // 分公司编号
        Exejson.f_filialeids = this.watchExce.exceobj.f_filialeids
        // 营业网点
        Exejson.f_outlets = this.watchExce.exceobj.f_outlets
        // 组织机构
        Exejson.f_orgstr = this.watchExce.exceobj.f_orgstr
        // 异常类型
        Exejson.f_error_type = this.watchExce.f_error_type
        // 异常说明
        Exejson.f_error_msg = this.watchExce.f_error_msg
        console.log('提交异常数据')
        console.log(Exejson)
        let param = {
          tablename: 't_exception',
          basedata: Exejson
        }
        try {
          this.$resetpost('rs/logic/iot_saveTable', param, {resolveMsg: null, rejectMsg: null}).then((req) => {
            this.watchExce = {}
            console.log('提交成功')
          }).then(() => {
            this.$showMessage('异常保存成功！')
          })
        } catch (e) {
          this.watchExce = {}
          console.log('提交失败')
          this.$showMessage('异常保存失败！')
        }
        this.watchshow = false
      },
      // 返回
      cancelmain () {
        this.$emit('cancel-main')
      },

      getsignal () {
        this.signal = !this.signal
        this.yearForSignal = ''
        this.monthForSignal = ''
      },

      getbattery () {
        this.battery = !this.battery
        this.yearForSignal = ''
        this.monthForSignal = ''
      },

      // 表故障
      tableFault (val) {
        if (val) {
          console.log('开启弹窗')
          this.watchExce.exceobj = val
        } else {
          console.log('返回置空')
          this.watchExce = {}
        }
        this.watchshow = !this.watchshow
      },
      // 发送请求去数据
      search () {
        let http = new HttpResetClass()
        console.log('iot_getUserBaseData=======')
        http.load('POST', 'rs/sql/iot_getUserBaseData',
          {data: {condition: `f_userfiles_id='${this.watchmsg.f_userfiles_id}'`}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
            this.row = res.data[0]
          })
      },
      // 阀控管理
      valvecontrol () {
        this.valve = true
      },
      close () {
        this.valve = false
        this.operateReason = ''
      },
      // 开关阀操作
      async valveoperate (oper) {
        let msg = oper ? '开阀' : '关阀'
        console.log('this.row.f_alias', this.row.f_alias)
        let datas = {
          instructType: '阀门控制',
          instructTitle: `手动${msg}`,
          condition: `t_userfiles.f_userfiles_id='${this.row.f_userfiles_id}'`,
          meterBrandName: this.row.f_alias,
          f_instruct_state: '待发送',
          inputtor: Vue.$login.f.name,
          reasonInfo: this.operateReason,
          meternumberf: this.row.f_meternumber,
          contentData: {isOpen: oper ? 1 : 0}
        }
        await this.$resetpost('rs/logic/iot_saveInstruct',
        // await this.$resetpost('rs/logic/saveInstruct',
          {
            data: datas
          },
          {warnMsg: `确定要进行${msg}操作吗？`, resolveMsg: `${msg}成功`, rejectMsg: `${msg}失败`}).then(res => {
            this.valve = false
            this.operateReason = ''
          })
      },
      // 异常信息弹出框
      userexception () {
        this.isShowUserException = !this.isShowUserException
      },
      metereadData () {
        this.isMetereadData = true
      },
      close1 () {
        this.f_beizhu = ''
        this.f_parameter_name = null
        this.isShowUserException = false
      },
      close2 () {
        this.f_beizhu = ''
        this.isMetereadData = false
      },
      setmetereadData () {
        let f_alias = this.row.f_alias
        let array = [
          {f_user_id: this.row.f_userfiles_id, f_alias: this.row.f_alias, f_userinfo_id: this.row.f_userinfo_id}
        ]
        this.$resetpost('rs/logic/iot_setParameter',
          { userid: array,
            instructtype: '读取抄表数据',
            isOpen: '',
            f_instruct_state: '待发送',
            inputtor: Vue.$login.f.name
          }, {rejectMsg: null, resolveMsg: null}).catch((res) => {
            this.$showMessage('执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！')
          })
        this.isMetereadData = false
      },
      // 异常信息操作
      userExceptionOper () {
        if (this.f_parameter_name[0]) {
          let userdata = null
          // 在数据库中查
          let send = {

            data: {
              tablename: 't_userparameter',
              condition: `f_meternumber ='${this.row.f_meternumber}' and f_parameter_state = '待处理' and f_parameter_name = '${this.f_parameter_name[0]}'`
            }
          }
          this.$resetpost('rs/sql/saleSingleTable', send, {resolveMsg: null, rejectMsg: null}).then((res) => {
            userdata = res.data
            if (userdata.length === 0) {
              this.writeForUserPara()
              this.f_beizhu = ''
              this.f_parameter_name = null
              this.isShowUserException = !this.isShowUserException
            } else if (userdata.length > 0) {
              // 数据库中有该条记录
              this.$showAlert('该用户此标记类型已标记！', 'warning', 3000)
              this.isShowUserException = !this.isShowUserException
              this.f_beizhu = ''
              this.f_parameter_name = null
            } else {
              this.f_beizhu = ''
              this.f_parameter_name = null
              this.$showAlert('返回数据异常，该操作执行失败！', 'warning', 3000)
              this.isShowUserException = !this.isShowUserException
            }
          })
        } else {
          // 操作类型为空
          this.f_beizhu = ''
          this.f_parameter_name = null
          this.$showAlert('标记类型或标记名称未选！', 'warning', 3000)
        }
      },
      // 写入用户标记表
      writeForUserPara () {
        let send = {
          f_user_id: this.row.f_user_id,
          f_meternumber: this.row.f_meternumber,
          f_parameter_state: '待处理',
          f_operator: Vue.$login.f.name,
          f_parameter_type: '自定义参数',
          f_parameter_name: this.f_parameter_name[0],
          f_beizhu: this.f_beizhu,
          f_filiale: this.row.f_filiale,
          f_filialeids: this.row.f_filialeids,
          f_outlets: this.row.f_outlets,
          f_orgstr: this.row.f_orgstr
        }
        let param = {
          tablename: 't_userparameter',
          basedata: send
        }
        this.$resetpost('rs/logic/iot_saveTable', param).then(() => {
          console.log('更新成功！')
        })
      },
      btnForSignal () {
        if (this.yearForSignal === '') {
          window.alert('请输入正确年份！')
        } else if (this.monthForSignal < 0 || this.monthForSignal > 12) {
          window.alert('请输入正确月份！')
        } else if (this.monthForSignal === '') {
          let date = new Date(this.yearForSignal, 0, 1)
          let date1 = new Date(this.yearForSignal, 11, 0)
          console.log('选择日期', date)
          this.startDate2 = Util.dateToStandardTimeStringStart(date)
          this.endDate2 = Util.dateToStandardTimeStringEnd(date1)
        } else {
          let date = new Date(this.yearForSignal, this.monthForSignal - 1, 1)
          let date1 = new Date(this.yearForSignal, this.monthForSignal, 0)
          console.log('选择日期', date)
          this.startDate2 = Util.dateToStandardTimeStringStart(date)
          this.endDate2 = Util.dateToStandardTimeStringEnd(date1)
        }
      }
    },
    watch: {
      'watchmsg' (val) {
        console.log('====================watchMsg', val)
        this.search()
      }
    },
    computed: {
      ExceptionType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
      }
    }
  }
</script>
<style scoped>
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    height: auto;
    border-radius:15px;
  }
  .mystyleboder{
   border: 0px;
   text-align: left;
    padding-left: 3px;
  }
  .mystylecenter{
    border: 0px;
    text-align: center;
    padding-left: 3px;
  }
</style>
