<template>
  <div class="flex bg-white p-10">
    <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 style="col-sm-3" @re-res="$parent.$parent.getRes"></res-select-group>

              <div style="float:right">
                <button class="button_search"  @click="search()" v-el:cba>查询</button>
                <button class="button_clear"  @click="$parent.$parent.clearmsg">清空</button>
                <label class="font_normal_body" v-if="!$parent.$parent.excelTable">超过十万条限制导出</label>
                <export-excel v-if="$parent.$parent.excelTable"
                              :data="{condition: $parent.$parent.condition}"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/saleExport" sql-name="iot_getOpertionList"
                              template-name='WebMeterBatchOperationValve'
                              :choose-col="true"></export-excel>
                <button class="button_search" @click="$parent.$parent.showModal('开阀')">开阀
                </button>

                <button class="button_search"  @click="$parent.$parent.showModal('关阀')">关阀
                </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-3 ">
                <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-3 ">
                <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_userinfo_code"
                       placeholder='客户号'
                       condition="f_userid = '{}'"
                >
              </div>
              <div class="col-sm-3 ">
                <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_username like '%{}%'"
                >
              </div>

              <div class="col-sm-3 ">
                <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-3 ">
                <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-3 ">
                <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-3 ">
                <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
                          condition="f_meter_brand='{}'">
                </v-select>
              </div>
              <div class="col-sm-3 ">
                <label class="font_normal_body">气表型号</label>
                <v-select style="width:60%" v-if="$parent.$parent.styles"
                          placeholder='气表型号'
                          :value.sync="model.f_meter_style"
                          v-model="model.f_meter_style"
                          :options='$parent.$parent.gasmodel'
                          close-on-select
                          condition="f_meter_style='{}'">
                </v-select>
                <v-select style="width:60%" v-if="!$parent.$parent.styles"
                          placeholder='气表型号'
                          :value.sync="model.f_meter_style"
                          v-model="model.f_meter_style"
                          :options='$parent.$parent.gasmodel'
                          close-on-select
                          condition="f_meter_style='{}'">
                </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-3 ">
                <label class="font_normal_body">阀门状态</label>
                <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-3 ">
                <label class="font_normal_body">楼号</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                       v-model="model.f_cusDom"
                       placeholder='楼号'
                       condition="f_cusDom = '{}'"
                >
              </div>
              <div class="col-sm-3 ">
                <label class="font_normal_body">区期</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                       v-model="model.f_area"
                       placeholder='区期'
                       condition="f_area = '{}'"
                >
              </div>
              <div class="col-sm-3 ">
                <label class="font_normal_body">小区</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                        v-model="model.f_districtname"
                        placeholder='小区'
                        condition="f_districtname like '%{}%'">
              </div>


              <div class="col-sm-3 ">
                <label class="font_normal_body">单元号</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                       v-model="model.f_cusDy"
                       placeholder='单元号'
                       condition="f_cusDy = '{}'"
                >
              </div>
              <div class="col-sm-3 ">
                <label class="font_normal_body">室号</label>
                <input @keyup.enter="search" style="width:60%" type="text" class="input_search "
                       v-model="model.f_apartment"
                       placeholder='室号'
                       condition="f_apartment = '{}'"
                >
              </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">
                <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="checked"
                       @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_userid}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_usertype}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasproperties}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_username}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_watchinstalldate}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gaswatchbrand}}</nobr>
              </td>
              <td style="text-align:center">{{row.f_meternumber}}</td>
              <td style="text-align:center">
                <nobr>{{row.f_metertype}}</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="3" 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()
    }
    export default {
        title: '批量开关阀',
        name: "WebMeterBatchOperationValve",
        data() {
            return {
                meterbrand: [],
                model: new PagedList("rs/sql/iot_getOpertionList", 20),
                searchshow: false,
                criteriaShow:false,
                condition: '',
                orgcondition:"",
                isShowUserException:false,
                val1:'',
                f_beizhu:'',
                Gasusertype:[],
                Gasproperties:[],
                checked1:true,
                WarningType: [
                    {label: '全部', value: ''}
                ],

                styles: false,
                excelTable: true,
                getfield: {
                    'f_userid': '客户号',
                    'f_usertype': '客户类型',
                    'f_gasproperties': '用气性质',
                    'f_username': '客户姓名',
                    'f_address': '用气地址',
                    'f_watchinstalldate': '安装时间',
                    'f_meternumber': '表编号',
                    'f_gaswatchbrand': '气表品牌',
                    'f_metertype': '气表型号',
                    'f_valvestate': '阀门状态',
                    'f_userfiles_state': '指令状态'
                },
                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: {
            initQueryParam () {
                let arr = []
                this.$GetSaleParam.getGasbrand().forEach((item) => {
                    let temp = {}
                    temp.label = item.label
                    temp.value = item.value
                    arr.push(temp)
                })
                console.log("----------------------------------------------")
                console.log(arr)
                this.meterbrand = [{label: '全部', value: ''}, ...arr]
            },
            hidden(){
                this.criteriaShow = !this.criteriaShow
            },
            search(args) {
                this.condition=args.condition
                this.model.search(args.condition, args.model)
            },
            mapset(array){

                console.log("数据",array);

                this.map.clear();
                for (let i = 0; i < array.length; i++) {
                    let userid = array[i].f_userid;
                    let f_aliasname = array[i].f_aliasname;
                    let userinfoid = array[i].f_userinfo_id;
                    let f_meternumber=array[i].f_meternumber;
                    this.map.set(userid, {id:null,f_user_id: userid, f_aliasname: f_aliasname, f_userinfo_id: userinfoid,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_userid;
                if (this.map.has(userid)) {
                    this.map.delete(userid)
                } else {
                    this.map.set(userid, {id:null,f_user_id: userid, f_aliasname: val.f_aliasname, 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
            },
            close(){
                this.isShowUserException=false
            },
            addApprovalValve(){
                let valve = this.val1;
                console.log(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);
                }
                this.isShowUserException=false
            },
            setRunParam(){
                this.val1='设置参数';
                this.isShowUserException=true
            },

            approvalValveControl(f_apply_type,f_apply_value,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:'待发送',
                                f_apply_beizhu:this.f_beizhu,
                                inputtor: vue.$login.f.name
                            }
                        }
                    }).then((res) => {
                    let count = res.data.count;
                    let str = `执行完成,总共执行了${res.data.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()
          // },
          meterbrands() {
            return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表品牌')]
          },
          gasmodel(){
            return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表型号')]
          },
            MeterTypes() {
                return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
            },
            TableStates() {
                return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')]
            },
          Gasproperties () {
            let rs = []
            if (this.$refs.paged.$refs.criteria.model.f_user_type.length === 1) {
              rs = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
            }
            return [{label: '全部', value: ''}, ...rs]
          },
            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('阀门状态')]
            },
            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>
