<template>
  <div class="auto">
    <h1>物联网表批量开关阀</h1>
    <criteria-paged :model='model' v-ref:paged>
      <criteria :model='model' partial='criteria'>
        <div novalidate class="form-inline col-sm-12" partial>
          <div class="form-group form-input-group col-sm-12">
            <hr>
            <table width="80%">
              <tr class="PanelTR">
                <td class="PanelTD">
                  <label>组织机构:</label>
                  <right-tree :userid.sync='$parent.$parent.obj.userid' :source.sync='$parent.$parent.obj.source'
                              @re-res="$parent.$parent.getRes"></right-tree>
                </td>
                <td class="PanelTD">
                  <label>辖区:</label>
                  <v-select placeholder='辖区'
                            @change="$parent.$parent.area"
                            :options="$parent.$parent.selectValues.area">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>片区:</label>
                  <v-select placeholder='片区'
                            @change="$parent.$parent.slice_area"
                            :options="$parent.$parent.selectValues.slice_area">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>街道:</label>
                  <v-select placeholder='街道'
                            @change="$parent.$parent.street"
                            :options="$parent.$parent.selectValues.street">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>小区:</label>
                  <v-select placeholder='小区'
                            @change="$parent.$parent.residential_area"
                            :options="$parent.$parent.selectValues.residential_area">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>模糊查询地址:</label>
                  <input class="form-control" placeholder='模糊查询地址' type="text" v-model="$parent.$parent.condition.address"/>
                </td>
              </tr>
            </table>
            <button class="btn btn-success width-100 btn-relative" @click="$parent.$parent.sqlcondition">查询</button>
            <button class="btn btn-success width-100 btn-relative" @click="$parent.$parent.back">返回</button>
            <button class="btn btn-success width-100 btn-relative" @click="$parent.$parent.operationValve(true)">批量开阀
            </button>
            <button class="btn btn-success width-100 btn-relative" @click="$parent.$parent.operationValve(false)">批量关阀
            </button>
            <br/>
            <br/>
            <hr>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <!--f_user_id-->
            <th>系统编号</th>
            <!--f_meternumber-->
            <th>表号</th>
            <!--f_user_name-->
            <th>用户名</th>
            <!--民用地址:f_address-->
            <th>地址</th>
            <!--f_area-->
            <th>辖区</th>
            <!--f_slice_area-->
            <th>片区</th>
            <!--f_street-->
            <th>街道</th>
            <!--f_residential_area-->
            <th>小区</th>
            <th>选中</th>
          </tr>
        </template>
        <template partial='body' partial='list' v-ref:grid>
          <tr>
            <td style="text-align:center">{{row.f_user_id}}</td>
            <td style="text-align:center">{{row.f_meternumber}}</td>
            <td style="text-align:center">{{row.f_user_name}}</td>
            <td style="text-align:center">{{row.f_address}}</td>
            <td style="text-align:center">{{row.f_area}}</td>
            <td style="text-align:center">{{row.f_slice_area}}</td>
            <td style="text-align:center">{{row.f_street}}</td>
            <td style="text-align:center">{{row.f_residential_area}}</td>
            <td style="text-align:center"><input type="checkbox" checked="checked"
                                                 @click="$parent.$parent.$parent.checked(row)"></td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {PagedList} from "vue-client";
  import vue from 'vue';

  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
  };
  export default {
    title: '物联网表批量开关阀',
    name: "WebMeterBatchOperationValve",
    data() {
      return {
        model: new PagedList("rs/sql/getMeterBrandAndModel", 1000000),
        selectValues: {
          area: [{label: '无', value: undefined}],
          slice_area: [{label: '无', value: undefined}],
          street: [{label: '无', value: undefined}],
          residential_area: [{label: '无', value: undefined}]
        },
        condition: {
          area: undefined,
          slice_area: undefined,
          street: undefined,
          residential_area: undefined,
          address:undefined
        },
        obj: {
          userid: "",
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: "",
          resids: ""
        },
        map: new Map()
      }
    },
    ready() {
      this.obj.userid = vue.$login.f.id;
      this.obj.res = `${vue.$login.f.f_fengongsi}.${vue.$login.f.f_parentname}`;
      this.obj.resids = `${vue.$login.f.f_orgids}`.replace(/\./g, '');
      this.getGroupData()
    },
    methods: {
      sqlcondition() {
        let str = `1=1 AND f_meter_type like '物联网表' AND f_orgstr like '${this.obj.resids}%'`;
        // let str = `1=1 AND f_meter_type like '物联网表'`
        if (this.condition.area) {
          str += ` AND f_area='${this.condition.area}'`
        }
        if (this.condition.slice_area) {
          str += ` AND f_slice_area='${this.condition.slice_area}'`
        }
        if (this.condition.street) {
          str += ` AND f_street='${this.condition.street}'`
        }
        if (this.condition.residential_area) {
          str += ` AND f_residential_area='${this.condition.residential_area}'`
        }
        if (this.condition.address){
          str+=` AND f_address like '${this.condition.address}%'`
        }
        // 因为默认是全选，所以把数据先全部塞到Map集合中
        this.model.search(str, this.model).then(() => {
          this.map.clear();
          let array = this.model.rows;
          for (let i = 0; i < array.length; i++) {
            let userid = array[i].f_user_id;
            let alias = array[i].f_alias;
            let userinfoid = array[i].f_userinfo_id;
            this.map.set(userid, {f_user_id: userid, f_alias: alias, f_userinfo_id: userinfoid})
          }
        })
      },
      getGroupData() {
        this.$resetpost("rs/logic/addressGroup", {}, {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.selectValues.area = fun(res.data.f_area);
          this.selectValues.slice_area = fun(res.data.f_slice_area);
          this.selectValues.street = fun(res.data.f_street);
          this.selectValues.residential_area = fun(res.data.f_residential_area)
        })
      },
      back() {
        this.$parent.msg = ""
      },
      add(val) {
        if (val.length == 0) {
          return undefined
        }
        return val[0]
      },
      area(val) {
        this.condition.area = this.add(val);
      },
      slice_area(val) {
        this.condition.slice_area = this.add(val);
      },
      street(val) {
        this.condition.street = this.add(val);
      },
      residential_area(val) {
        this.condition.residential_area = this.add(val);
      },
      getRes(msg) {
        console.log(msg);
        this.obj.res = msg.res;
        this.obj.resids = msg.resids
      },
      checked(val) {
        let userid = val.f_user_id;
        if (this.map.has(userid)) {
          this.map.delete(userid)
        } else {
          this.map.set(userid, {f_user_id: userid, f_alias: val.f_alias, f_userinfo_id: val.f_userinfo_id})
        }
      },
      operationValve(val) {
        let valve = val ? 1 : 0;
        let array = [];
        this.map.forEach((value, key, map) => {
          array.push(map.get(key))
        });
        this.$resetpost("rs/logic/batchSaveinstruct", {
          userid: array,
          contentData: valve,
          inputtor: vue.$login.f.name
        }, {rejectMsg: null, resolveMsg: null}).then((res) => {
          let cg = res.data.cg;
          let sb = res.data.sb;
          let count = cg.length + sb.length;
          let str = `执行完成,总共执行了${count}户的${val ? "开阀" : "关阀"}操作`;
          this.$showMessage(str)
        }).catch((res) => {
          this.$showMessage("执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！")
        })
      }
    }
  }
</script>

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

  .PanelTD {
    width: 5%;
  }

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