<template>
  <div  class="basic-main" style="height: 98%">
    <div class="span">
      <criteria-paged :model='model' v-ref:paged>
        <criteria :model='model' partial='criteria' v-ref:criteria @condition-changed='$parent.search'>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <res-select-group :initres="$parent.$parent.initres"  :show-component="['company','department','operator']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
              <div class="span" style="float:right">
              <button class="button_search button_spacing"  @click="search()" v-el:cba>查询</button>
              <button class="button_clear button_spacing"  @click="$parent.$parent.clearmsg">清空</button>
              <label class="font_normal_body" v-if="!$parent.$parent.excelTable">超过十万条限制导出</label>
              <export-excel v-if="$parent.$parent.excelTable"
                            class="auto"
                            :data="{condition: $parent.$parent.condition}"
                            :field="$parent.$parent.getfield"
                            sqlurl="rs/logic/exportfile" sql-name="salegetOpertionList"
                            template-name='指令下发'
                            :choose-col="true"></export-excel>
              <button class="button_search button_spacing" @click="$parent.$parent.showModal('开阀')">开阀</button>
              <button class="button_search button_spacing" @click="$parent.$parent.showModal('关阀')">关阀</button>

                <button  class="button_search button_spacing"    v-if="$parent.$parent.jurisdiction.includes('自动阀控')"      v-show="$parent.$parent.famenShow1==='关闭'"  @click="$parent.$parent.openzdkf('开启')">开启自动阀控 </button>

                <button  class="button_search button_spacing"    v-if="$parent.$parent.jurisdiction.includes('自动阀控')"      v-show="$parent.$parent.famenShow1==='开启'" @click="$parent.$parent.openzdkf('关闭')">关闭自动阀控 </button>

              <!--<button class="button_search" style="width: max-content"  @click="$parent.$parent.setRunParam">批量设置参数-->
              <!--</button>-->
              <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
            </div>
            </div>
             <div class="row" v-show="$parent.$parent.criteriaShow">
               <div class="col-sm-2 ">
                 <label class="font_normal_body">表&nbsp;钢&nbsp;号&nbsp;</label>
                 <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                        v-model="model.f_meternumber"
                        placeholder='表钢号'
                        condition="f_meternumber like '%{}%'"
                 >
               </div>
                <div class="col-sm-2 ">
                  <label class="font_normal_body">客户编号</label>
                  <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                         v-model="model.f_userinfo_code"
                         placeholder='客户号'
                         condition="f_userinfo_code like '%{}%'"
                  >
                </div>
                <div class="col-sm-2 ">
                  <label class="font_normal_body">客户姓名</label>
                  <input @keyup.enter="search" style="width:60%" type="text" class="input_search"
                         v-model="model.f_user_name"
                         placeholder='客户姓名'
                         condition="f_user_name like '%{}%'"
                  >
                </div>

                <div class="col-sm-2 ">
                  <label class="font_normal_body">用气地址</label>
                  <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                         v-model="model.f_address"
                         placeholder='用气地址'
                         :size="model.f_address ? model.f_address.length : 6"
                         condition="f_address like '%{}%'"
                  >
                </div>
               <div class="col-sm-2 ">
                 <label class="font_normal_body">小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</label>
                 <v-select :value.sync="model.f_residential_area"
                           class="select_list select"
                           v-model="model.f_residential_area"
                           style="width: 60%"
                           multiple
                           condition="f_residential_area in {}"
                           :options='$parent.$parent.residentialArea' placeholder='选择小区'
                           close-on-select>

                 </v-select>
               </div>

                <div class="col-sm-2 ">
                  <label class="font_normal_body">客户类型</label>
                  <v-select style="width:60%"
                    placeholder='客户类型'
                    value-single="true"
                    :value.sync="model.f_user_type"
                    v-model="model.f_user_type"

                    :options='$parent.$parent.userType'
                    close-on-select condition="f_user_type ='{}'">
                  </v-select>
                </div>
                <div class="col-sm-2 ">
                  <label class="font_normal_body">用气性质</label>
                  <v-select style="width:60%"
                    placeholder='用气性质'
                    value-single="true"
                    :value.sync="model.f_gasproperties"
                    v-model="model.f_gasproperties"
                    :options='$parent.$parent.Gasproperties'
                    close-on-select condition="f_gasproperties ='{}'">
                  </v-select>
                </div>
                <div class="col-sm-2 ">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select style="width:60%"
                    placeholder='气表品牌'
                    :value.sync="model.f_meter_brand"
                    v-model="model.f_meter_brand"
                    :options='$parent.$parent.meterbrands'
                    close-on-select
                  >
                  </v-select>
                </div>
               <!--<div class="col-sm-3 ">
                 <label class="font_normal_body">指令状态</label>
                 <v-select style="width:60%" :value.sync="model.f_instruct_state" v-model="model.f_instruct_state"
                           placeholder='指令状态'
                           :options='$parent.$parent.instructState'
                           close-on-select
                           condition="f_instruct_state = '{}'"></v-select>
               </div>-->
<!--                <div class="col-sm-3 ">-->
<!--                  <label class="font_normal_body" style="word-break:keep-all;">安装时间</label>-->
<!--                  <datepicker  style="width:60%"-->
<!--                               placeholder="起始时间"-->
<!--                              :value.sync="model.f_start_date"-->
<!--                              v-model="model.f_start_date"-->
<!--                              :format="'yyyy-MM-dd HH:mm:ss'"-->
<!--                              condition="f_gas_date > '{}'"-->
<!--                  ></datepicker>-->
<!--                </div>-->
<!--                <div class="col-sm-3 ">-->
<!--                  <label class="font_normal_body" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>-->
<!--                  <datepicker placeholder="结束时间"-->
<!--                              style="width:60%"-->
<!--                              :value.sync="model.f_end_date"-->
<!--                              v-model="model.f_end_date"-->
<!--                              :format="'yyyy-MM-dd HH:mm:ss'"-->
<!--                              condition="f_gas_date < '{}'"-->
<!--                  ></datepicker>-->
<!--                </div>-->
                <div class="col-sm-2 ">
                  <label class="font_normal_body">阀门状态</label>
<!--                  @change="$parent.$parent.changeShow"-->
                  <v-select style="width:60%" :value.sync="model.f_valvestate" v-model="model.f_valvestate"
                            placeholder='全部'
                            :options='$parent.$parent.valvestate'
                            close-on-select
                            condition="f_valvestate = '{}'"></v-select>
                </div>
               <div class="col-sm-2 ">
                 <label class="font_normal_body">阀控状态</label>
<!--                 @change="$parent.$parent.changeShow1"-->
                 <v-select style="width:60%" :value.sync="model.f_network_valve" v-model="model.f_network_valve"
                           placeholder='全部'
                           :options='$parent.$parent.f_network_valve'
                           close-on-select
                           condition="f_network_valve = '{}'"
                           ></v-select>
               </div>
              </div>
            </div>
        </criteria>
        <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
          <template partial='head'>
            <tr>
              <th style="text-align:center">
                <nobr>组织机构</nobr>
              </th>
              <th style="text-align:center">
                <nobr>客户号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>客户类型</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气性质</nobr>
              </th>
              <th style="text-align:center">
                <nobr>客户姓名</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气地址</nobr>
              </th>
              <th style="text-align:center">
                <nobr>小区</nobr>
              </th>
              <th style="text-align:center">
                <nobr>安装时间</nobr>
              </th>
              <th style="text-align:center;color:#3c763d">
                <nobr>表钢号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表品牌</nobr>
              </th>
              <th style="text-align:center">
                <nobr>表编号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>气表型号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>阀门状态</nobr>
              </th>
              <!--<th style="text-align:center">
                <nobr>指令状态</nobr>
              </th>-->
              <th style="text-align:center">
                <nobr>全选</nobr>
                <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1' :checked="$parent.$parent.$parent.checked1"
                       @click="$parent.$parent.$parent.checkedALL()">
              </th>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid >
            <tr>
              <td style="text-align:center">
                <nobr>{{row.f_orgname}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_userinfo_code}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_user_type}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasproperties}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_residential_area}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gas_date}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_meternumber}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_meter_brand}}</nobr>
              </td>
              <td style="text-align:center">{{row.f_userfiles_id}}</td>
              <td style="text-align:center">
                <nobr>{{row.f_meter_style}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_valvestate}}</nobr>
              </td>
              <!--<td style="text-align:center">
                <nobr>{{row.f_instruct_state}}</nobr>
              </td>-->
              <td style="text-align:center">
                <input @keyup.enter="search" style="width:60%" type="checkbox" checked="checked" name="opertioninput"
                @click="$parent.$parent.$parent.checked(row)"></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
  <modal :show.sync="isShowUserException" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close()"><span>&times;</span></button>
      <h4 class="modal-title" align="center">{{val1}}申请备注</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div style="padding-left: 8px" v-if="val1=='设置参数'">
        <label class="font_normal_body">参数类型</label>
        <v-select style="width:60%"
          placeholder='参数类型'
          :value.sync="parameterType"
          v-model="parameterType"
          :options='parameterTypeList'
          close-on-select>
        </v-select>
      </div>
      <div class="form-group " style="padding-left: 8px">
        <label class="font_normal_body">申请原因：</label>
        <textarea class="search_area" v-model="f_beizhu" rows="10" cols="75" placeholder="备注信息"></textarea>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button  type="button" class="btn btn-success btn-ln fr" @click='addApprovalValve()'>提交</button>
      <button  type="button" class="btn btn-info btn-ln fr" @click='close()'>取消</button>
    </footer>
  </modal>
</template>

<script>
  import {PagedList} from 'vue-client'
import vue from 'vue'
import * as Util from '../../../Util'
import {HttpResetClass} from 'vue-client'

  let fun = (json) => {
    let array = []
  array.push({label: '无', value: undefined})
  for (let i = 0; i < json.length; i++) {
    if (json[i] == null) {
      continue
    }
    array.push({label: json[i], value: json[i]})
  }
    return array
  }
let readyGen = async function (self) {
    await self.$LoadParams.loadParam()
    self.initQueryParam();
    self.getaddress();
  }
  export default {
    title: '批量开关阀',
    name: 'WebMeterBatchOperationValve',
    data () {
      return {
        famenShow: '', // 是否展示开关阀门按钮
        famenShow1: '', // 阀控状态
        meterbrand: [],
        model: new PagedList('rs/sql/iot_getOpertionList', 20),
        searchshow: false,
        criteriaShow: false,
        condition: '',
        orgcondition: ' and f_orgid = ' + this.$login.f.orgid,
        isShowUserException: false,
        val1: '',
        f_beizhu: '',
        Gasusertype: [],
        Gasproperties: [],
        metermodel: [],
        checked1: true,
        residentialArea: [],
        WarningType: [
          {label: '全部', value: ''}
        ],
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        styles: false,
        excelTable: true,
        getfield: {
          'f_orgname': '组织机构',
          'f_userinfo_code': '客户号',
          'f_user_type': '客户类型',
          'f_gasproperties': '用气性质',
          'f_user_name': '客户姓名',
          'f_address': '用气地址',
          'f_residential_area': '小区',
          'f_gas_date': '安装时间',
          'f_meternumber': '表钢号',
          'f_meter_brand': '气表品牌',
          'f_userfiles_id': '表编号',
          'f_meter_style': '气表型号',
          'f_valvestate': '阀门状态'

        },
        obj: {
          userid: this.$login.f.id,
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: this.$login.f.f_fengongsi,
          resids: this.$login.f.orgid
        },
        // 开关阀权限
        valveLimit: false,
        // 设置参数权限
        Setarameterermissions: false,
        parameterType: '',
        map: new Map()
      }
    },
    ready () {
      // this.valveLimit = this.$login.r.includes('开关阀权限')
      // this.Setarameterermissions = this.$login.r.includes('设置参数权限')
      this.$refs.paged.$refs.criteria.model.f_start_date = Util.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.f_end_date = Util.toStandardDateString() + ' 23:59:59'
      this.$refs.paged.$refs.criteria.search()
      // 初始化气表品牌下拉框
      readyGen(this)
    },
    methods: {
      async  getaddress(){
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'rs/sql/manage_getarealist', {
          data: {
            condition: `1=1 and s.f_orgid = '${this.$login.f.orgid}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
        console.log('小区',data)
        let house = []
        for (let row of data.data){
          house.push({label: row.f_residential_area, value: row.f_residential_area})
        }
        this.residentialArea = house
      },

      initQueryParam () {
        let arr = []
        this.$GetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value
          arr.push(temp)
        })

        this.meterbrand = [{label: '全部', value: ''}, ...arr]
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      async search (args) {
        args.condition = `${args.condition} ` + this.orgcondition
        if (this.$refs.paged.$refs.criteria.model.f_meter_brand) {
          if (this.$refs.paged.$refs.criteria.model.f_meter_brand.length > 0) {
            args.condition = `${args.condition} ` + `and f_gasbrand_id = ${this.$refs.paged.$refs.criteria.model.f_meter_brand[0].id}`
          }
        }
        this.condition = args.condition
        await this.model.search(args.condition, args.model)

        console.log(this.model.rows)
        console.log(this.model)
        if (this.$refs.paged.$refs.grid.model.rows.length === 0) {
          this.famenShow = ''
          this.famenShow1 = ''
        } else {
          this.famenShow = this.$refs.paged.$refs.criteria.model.f_valvestate[0]
          this.famenShow1 = this.$refs.paged.$refs.criteria.model.f_network_valve[0]
        }
      },
      mapset (array) {
        this.map.clear()
        for (let i = 0; i < array.length; i++) {
          let userid = array[i].f_userfiles_id
          let alias = array[i].f_alias
          let userinfoid = array[i].f_userinfo_id
          let f_orgname = array[i].f_orgname
          let f_orgid = array[i].f_orgid
          let f_meternumber = array[i].f_meternumber
          this.map.set(userid, {id: null, f_user_id: userid, f_alias: alias, f_userinfo_id: userinfoid, f_orgname: f_orgname, f_orgid: f_orgid, f_meternumber: f_meternumber})
        }
      },
      back () {
        this.$parent.msg = ''
      },
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      clickshow () {
        this.searchshow = !this.searchshow
      },
      getRes (obj) {
        this.orgcondition = obj
      },
      checkedALL () {
        this.checked1 = !this.checked1
        let box = document.getElementsByName('opertioninput')
        for (var i = 0; i < box.length; i++) {
          box[i].checked = this.checked1
        }
      },
      checked (val) {
        let userid = val.f_userfiles_id
        if (this.map.has(userid)) {
          this.map.delete(userid)
        } else {
          this.map.set(userid, {id: null, f_user_id: userid, f_alias: val.f_alias, f_userinfo_id: val.f_userinfo_id, f_orgname: val.f_orgname, f_orgid: val.f_orgid, f_meternumber: val.f_meternumber})
        }
      },
      showModal (val) {
        this.val1 = val
        this.isShowUserException = true
      },
      openzdkf (val) {
        let data = {
          condition: this.condition,
          type: val
        }
        let resolveMsg = ''
        let rejectMsg = ''
        if (val == '开启') {
          resolveMsg = '开启自动阀控成功'
          rejectMsg = '开启自动阀控失败'
        } else {
          resolveMsg = '关闭自动阀控成功'
          rejectMsg = '关闭自动阀控失败'
        }
        this.$resetpost('rs/logic/zdfkall', data, {resolveMsg: resolveMsg, rejectMsg: rejectMsg })
      },
      close () {
        this.isShowUserException = false
      },
      addApprovalValve () {
        let valve = this.val1
        let array = []
        this.map.forEach((value, key, map) => {
          array.push(map.get(key))
        })
        if (valve == '设置参数') {
          if (this.parameterType == '') {
            return
          }
          this.approvalValveControl(valve, this.parameterType[0], array)// parameterType【0】设置运行参数
        } else {
          this.approvalValveControl('阀门控制', valve, array)
          console.log('进入阀门控制')
        }
        this.isShowUserException = false
      },
      setRunParam () {
        this.val1 = '设置参数'
        this.isShowUserException = true
      },

      approvalValveControl (f_apply_type, f_apply_value, array) {
        console.log('进入阀门指令提交')
        console.log(array)
        let load = new HttpResetClass()
        let self = this
        load.load('POST', 'rs/logic/iot_instructUpdateAndDelect',
          {data: {
            data1: {
              f_apply_type: f_apply_type,
              userid: array,
              nowDate: new Date(),
              f_apply_value: f_apply_value,
              f_apply_beizhu: this.f_beizhu,
              f_apply_operator: vue.$login.f.name
            },
            data2: {
              userid: array,
              instructtype: f_apply_type,
              isOpen: f_apply_value,
              f_instruct_state: '待发送',
              inputtor: vue.$login.f.name
            }
          }
          }).then((res) => {
            let count = res.data.count
            let str = `执行完成,总共执行了${array.length}户的申请操作`
            self.$showMessage(str)
          }).catch((res) => {
            this.$showMessage('执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！')
          })
      }
      /* operationValve(array,valve,instructtype) {
        console.log("批量操作array======", array)
        console.log("批量操作valve======", valve)
        console.log("批量操作 vue.$login.f.name======", vue.$login.f.name)
        let load = new HttpResetClass()
        load.load('POST', 'rs/logic/setParameter',
          {data:{
          userid: array,
          instructtype: instructtype,
          isOpen:valve,
          f_instruct_state:'待审核',
          inputtor: vue.$login.f.name
        }}, {rejectMsg: null, resolveMsg: null}).then((res) => {
          let count = array.length;
          console.log("批量操作 vue.$login.f.name======", vue.$login.f.name)
        }).catch((res) => {
          this.$showMessage("执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！")
        })
      } */
    },
    computed: {
      /* WarningType() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表品牌')]
      }, */
      /* Warningstyle() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('燃气表型号')]
      }, */
      meterbrands () {
        return this.$GetSaleParam.getGasbrand()
      },
      MeterTypes () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
      },
      TableStates () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
      },
      Gasproperties () {
        let rs = []
        if (this.model.model.f_user_type) {
          rs = this.$appdata.getParam(this.model.model.f_user_type[0])
        }
        return rs
      },
      // 界面细节权限
      jurisdiction () {
        console.log('抄表界面细节', this.$login.r)
        return this.$login.r ? this.$login.r : []
      },
      parameterTypeList () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('设置参数')]
      },
      signtype1 () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
      },
      parameterState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记状态')]
      },
      userType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      userfilesState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('上报状态')]
      },
      valvestate () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀门状态')]
      },
      f_network_valve () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('阀控状态')]
      },
      instructState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('指令状态')]
      }
    },
    watch: {
      'model.pageIndex' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'model.rows' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'checked1' (val) {
        if (val) {
          this.mapset(this.model.rows)
        } else {
          this.map.clear()
        }
      }
    }
  }
</script>

<style scoped>
  .PanelTR {
    width: 100%;
    height: 40px;
  }

  .PanelTD {
    width: 5%;
  }

  .btn-relative {
    position: relative;
    left: 25px;
    top: 15px;
  }
</style>

