<template>
  <div class="auto">
    <criteria-paged :model='model' v-ref:paged>
      <criteria :model='model' partial='criteria'>
        <div novalidate class="form-inline col-sm-12 auto" partial>
          <div class="form-group form-input-group col-sm-12">
            <div class="form-inline col-sm-12">
              <center>
              <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('getNoUseGas')">未用气查询
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('getLoseTrackUser')">失联查询
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('getWarningUser')">关阀走气查询
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('getTimeHandPlan')">未抄查询
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('getSplitUser')">拆表报警
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('webMeterMonthUseGas')">日用气量统计
                  </button>
              </span>
                <span class="col-sm-1">
                  <button class="btn btn-success width-100" style="border: 1px solid black;"
                          @click="$parent.$parent.statistics('batchOperationValve')">批量开关阀
                  </button>
              </span>
              </center>
            </div>
            <br/>
            <br/>
            <hr>
            <table width="100%">
              <tr class="PanelTR">
                <td class="PanelTD">
                  <label>组织机构:</label>
                  <label v-if='$parent.$parent.obj.show'>禁止选择</label>
                  <right-tree v-if='!($parent.$parent.obj.show)'
                              :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='气表品牌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                    @change="$parent.$parent.sqlBrand"
                    :options="$parent.$parent.meterBrand">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>气表类型:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <v-select
                    placeholder='气表类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                    @change="$parent.$parent.sqlType"
                    :options="$parent.$parent.meterType">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>气表状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <v-select
                    placeholder='气表状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                    @change="$parent.$parent.sqlState"
                    :options="$parent.$parent.meterState">
                  </v-select>
                </td>
              </tr>
              <tr class="PanelTR">
                <td class="PanelTD">
                  <label>用气性质:</label>
                  <v-select
                    placeholder='用气性质&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                    @change="$parent.$parent.sqlGasproperties"
                    :options="$parent.$parent.gaspropertiesArray">
                  </v-select>
                </td>
                <td class="PanelTD">
                  <label>系统编号:</label>
                  <input class="form-control" placeholder='系统编号' type="text"
                         v-model="$parent.$parent.meterInfo.f_user_id"/>
                </td>
                <td class="PanelTD">
                  <label>开户起始时间:</label>
                  <datepicker placeholder="开户起始时间"
                              readonly
                              v-model="$parent.$parent.createFileDate"
                              :value.sync="$parent.$parent.createFileValue"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                  ></datepicker>
                </td>
                <td class="PanelTD">
                  <label>开户结束时间:</label>
                  <datepicker placeholder="开户结束时间"
                              readonly
                              v-model="$parent.$parent.endFileDate"
                              :value.sync="$parent.$parent.endFileValue"
                              :format="'yyyy-MM-dd'"
                  ></datepicker>
                </td>
              </tr>
              <tr class="PanelTR">
                <td class="PanelTD">
                  <label>表号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <input class="form-control" placeholder='表号' type="text"
                         v-model="$parent.$parent.meterInfo.f_meternumber"/>
                </td>
                <td class="PanelTD">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-success width-100"
                                                                                      @click="$parent.$parent.sqlcondition">
                  查询
                </button>
                </td>
                <td class="PanelTD">
                  <button class="btn btn-success width-100" @click="$parent.$parent.SaveAsFile('daochu1')">导出当前页为xls</button>
                </td>
                <td class="PanelTD"></td>
              </tr>
            </table>
            <hr>
          </div>
        </div>
      </criteria>
      <data-grid id="daochu1" :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_user_type-->
            <th>用户类型</th>
            <!--f_gasproperties-->
            <th>用气性质</th>
            <!--f_position-->
            <th>表安装位置</th>
            <!--f_meter_brand-->
            <th>气表品牌</th>
            <!--f_meter_style-->
            <th>气表型号</th>
            <!--f_meter_type-->
            <th>气表类型</th>
            <!--f_table_state-->
            <th>气表状态</th>
            <!--f_meter_base-->
            <th>气表底数</th>
            <!--f_total_usegas_amount-->
            <th>累计扣费金额</th>
            <!--f_balance-->
            <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_user_type}}</td>
            <td style="text-align:center">{{row.f_gasproperties}}</td>
            <td style="text-align:center">{{row.f_position}}</td>
            <td style="text-align:center">{{row.f_meter_brand}}</td>
            <td style="text-align:center">{{row.f_meter_style}}</td>
            <td style="text-align:center">{{row.f_meter_type}}</td>
            <td style="text-align:center">{{row.f_table_state}}</td>
            <td style="text-align:center">{{row.f_meter_base}}</td>
            <td style="text-align:center">{{row.f_total_usegas_amount}}</td>
            <td style="text-align:center">{{row.f_balance}}</td>
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import vue from 'vue'
  import getLodop from '../../plugins/LodopFuncs'

  //组合数据填充类型选择下拉框
  let getherData = async (data) => {
    let meterBrand = [], meterType = [], dataBrand = [{label: '全部', value: '%%'}],
      dataType = [{label: '全部', value: '%%'}];
    for (let i = 0; i < data.length; i++) {
      if (meterBrand.indexOf(data[i].f_meter_brand) == -1) {
        meterBrand.push(data[i].f_meter_brand);
        dataBrand.push({label: data[i].f_meter_brand, value: data[i].f_meter_brand})
      }
    }
    for (let i = 0; i < data.length; i++) {
      if (meterType.indexOf(data[i].f_meter_type) == -1) {
        meterType.push(data[i].f_meter_type);
        dataType.push({label: data[i].f_meter_type, value: data[i].f_meter_type})
      }
    }
    let res = {meterBrand: dataBrand, meterType: dataType};
    return res
  };

  let getGroup = async (self) => {
    let result;
    await self.$resetpost('rs/sql/getMeterGroup', {data: {}}, {resolveMsg: null, rejectMsg: null}).then((res) => {
      result = getherData(res.data);
      result.then((res) => {
        self.meterType = res.meterType;
        self.meterBrand = res.meterBrand
      })
    })
  };

  export default {
    title: '表具列表',
    name: "MeterList",
    data() {
      return {
        model: new PagedList("rs/sql/getMeterBrandAndModel", 30),
        meterState: [{label: '全部', value: '%%'},
          {label: '正常', value: '正常'},
          {label: '停用', value: '停用'},
          {label: '已发送', value: '已发送'},
          {label: '未发送', value: '未发送'}],
        meterType: [{label: '全部', value: '%%'}],
        meterBrand: [{label: '全部', value: '%%'}],
        gaspropertiesArray: [{label: '全部', value: '%%'},
          {label: '居民', value: '居民%'},
          {label: '非居民', value: '非居民%'},
          {label: '村村通', value: '村村通%'},
          {label: '取暖', value: '取暖%'}],
        condition: '1=1',
        type: undefined,
        brand: undefined,
        state: undefined,
        gasproperties: undefined,
        meterInfo: {
          f_user_id: undefined,
          f_meternumber: undefined
        },
        createFileDate: {},
        createFileValue: '',
        endFileDate: {},
        endFileValue: '',
        obj: {
          userid: "",
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: "",
          resids: "",
          show: true
        }
      }
    },
    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.obj.show = this.obj.resids > 6 ? true : false;
      getGroup(this);
      this.model.search('1=1' + ` AND f_orgstr like '${this.obj.resids}%'`, this.model)
      // this.model.search('1=1', this.model)
    },
    methods: {
      sqlcondition() {
        //点击后关闭item界面
        this.$parent.showItem = false;
        if (!this.type && !this.brand && !this.state) {
          this.condition = '1=1'
        } else if (!this.type && !this.brand) {
          this.condition = `1=1 AND f_table_state like '${this.state[0]}'`
        } else if (!this.type && !this.state) {
          this.condition = `1=1 AND f_meter_brand like '${this.brand[0]}'`
        } else if (!this.state && !this.brand) {
          this.condition = `1=1 AND f_meter_type like '${this.type[0]}'`
        } else if (!this.type) {
          this.condition = `1=1 AND f_meter_brand like '${this.brand[0]}' AND f_table_state like '${this.state[0]}'`
        } else if (!this.state) {
          this.condition = `1=1 AND f_meter_brand like '${this.brand[0]}' AND f_meter_type like '${this.type[0]}'`
        } else if (!this.brand) {
          this.condition = `1=1 AND f_meter_type like '${this.type[0]}' AND f_table_state like '${this.state[0]}'`
        } else {
          this.condition = `1=1 AND f_meter_type like '${this.type[0]}' AND f_table_state like '${this.state[0]}' AND f_meter_brand like '${this.brand[0]}'`
        }

        if (!this.meterInfo.f_user_id && this.meterInfo.f_meternumber) {
          this.condition += ` AND f_meternumber='${this.meterInfo.f_meternumber}'`
        } else if (!this.meterInfo.f_meternumber && this.meterInfo.f_user_id) {
          this.condition += ` AND f_user_id='${this.meterInfo.f_user_id}'`
        } else if (this.meterInfo.f_meternumber && this.meterInfo.f_user_id) {
          this.condition += ` AND f_user_id='${this.meterInfo.f_user_id}' AND f_meternumber='${this.meterInfo.f_meternumber}'`
        }
        if (this.gasproperties) {
          this.condition += ` AND f_gasproperties like '${this.gasproperties}'`
        }
        if (this.createFileValue != '' && this.endFileValue != '') {
          this.condition += ` AND f_createfile_date BETWEEN '${this.createFileValue}' AND '${this.endFileValue}'`
        }
        if (this.createFileValue != '' && this.endFileValue == '') {
          this.condition += ` AND f_createfile_date >='${this.createFileValue}'`
        }
        if (this.createFileValue == '' && this.endFileValue != '') {
          this.condition += ` AND f_createfile_date <='${this.endFileValue}'`
        }
        this.model.search(this.condition + ` AND f_orgstr like '${this.obj.resids}%'`, this.model)
        // this.model.search(this.condition, this.model)
      },
      sqlType(value) {
        if (value.length == 0)
          return;
        this.type = value
      },
      sqlBrand(value) {
        if (value.length == 0)
          return;
        this.brand = value
      },
      sqlState(value) {
        if (value.length == 0)
          return;
        this.state = value
      },
      sqlGasproperties(value) {
        if (value.length == 0)
          return;
        this.gasproperties = value
      },
      statistics(msg) {
        this.$parent.msg = msg
      },
      getRes(msg) {
        this.obj.res = msg.res;
        this.obj.resids = msg.resids.replace(/\./g, '')
      },
      SaveAsFile(str) {
        let style = '<style>' +
          'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
        let strHtml = style + document.getElementById(str).innerHTML;
        console.log(strHtml);
        let LODOP = getLodop();
        LODOP.PRINT_INIT('');
        LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
        LODOP.SAVE_TO_FILE('新文件名.xls')
      }
    }
  }
</script>

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

  .PanelTD {
    width: 25%
  }
</style>
