<template>
  <div class="basic-main" style="height: 100%">
    <div class="form-group" >
      <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
        <div class="row">
          <div class="col-sm-3 form-group" >
            <label class="font_normal_body" for="startDate">开始日期:</label>
            <datepicker id="startDate" placeholder="开始日期" style="width: 60%"
                        v-model="model.startDate"
                        :value.sync="model.startDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="col-sm-3 form-group" >
            <label  class="font_normal_body" for="endDate">结束日期:</label>
            <datepicker id="endDate" placeholder="结束日期" style="width: 60%"
                        v-model="model.endDate"
                        :value.sync="model.endDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd HH:mm:ss'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="col-sm-3 form-group" >
            <label class="font_normal_body" for="org">公&emsp;&emsp;司:</label>
            <right-tree id="org" @re-res="getRes"></right-tree>
          </div>
          <div class="col-sm-3 form-group">
            <label class="font_normal_body" for="dep" >部&emsp;&emsp;门:</label>
            <res-select id="dep" restype='department'
                        @res-select="getdep"
                        :parentresid="depresid"
                        :initresid='queryData.depid' >
            </res-select>

          </div>
          <div class="col-sm-3 form-group">
            <label class="font_normal_body">气表品牌</label>
            <v-select :value.sync="model.f_meter_brand"
                      v-model="model.f_meter_brand"
                      :options="meterbrands" value-single
                      close-on-select></v-select>
          </div>
          <div class="col-sm-3 form-group">
            <label class="font_normal_body">换表类型</label>
            <v-select :value.sync="queryData2.f_changetables_reason"
                      v-model="queryData2.f_changetables_reason"
                      :options="reasons" multiple>
            </v-select>
          </div>
          <div class="col-sm-2 form-group" style="float:right;">
            <button class="button_search" @click="searchData()">查询</button>
            <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':criteriaShow,
                  'button_shrink_bottom':!criteriaShow}"  @click="hidden()"></div>
          </div>
        </div>
      </div>
      <div style="width:100%;height: 100%;margin-top: 2%" class="div-iframe">
        <iframe class="iframe_style" style="width:100%;height:100% ;border: medium none;" :src="url" v-if="isShow"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
let readySomething = async function (self) {
  await self.$MagLoadParams.loadParam()
  self.initParams()
}
export default {
  title: '客户类型分项汇总表',
  data () {
    return {
      orgCondtionStr: '1=1',
      model: {
        startDate: '',
        endDate: '',
        f_meter_brand: ''
      },
      isShow: false,
      url: '',
      urlPrefix: 'http://139.9.204.64:8080/report/jmreport/shareView/825973291077713920',
      queryData: {
        f_orgid: [],
        f_depid: [],
        f_payment: []
      },
      queryData2: {
        f_changetables_reason: []
      },
      orgname: '',
      depresid: [],
      userresid: [],
      depname: '',
      operatorname: '',
      operatorid: [],
      depid: [],
      criteriaShow: false,
      meterbrands: [],
      reasons: this.$appdata.getParam('换表原由') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('换表原由')] : [],
    }
  },
  ready () {
    this.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
    this.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
    // this.$refs.paged.$refs.criteria.search()
    readySomething(this).then(() => {
      this.$emit('ready')
    }).catch((error) => {
      this.$emit('error', error)
    })
    this.searchData()
  },
  methods: {
    initParams () {
      // 初始化气表品牌
      let brandArr = []
      this.$MagGetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        brandArr.push(temp)
      })
      this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
    },
    dataHand (obj) {
      let queryData = ''
      queryData = this.orgCondtionStr
      for (let key in obj) {
        if (obj[key] !== null && obj[key] !== '' && obj[key] !== undefined && obj[key].length > 0) {
          if (Array.isArray(obj[key])) {
            let stringValue = ''
            for (var i = 0; i < obj[key].length; i++) {
              if (i === obj[key].length - 1) {
                stringValue = stringValue + "'" + obj[key][i] + "'"
              } else {
                stringValue = stringValue + "'" + obj[key][i] + "',"
              }
            }
            queryData = queryData + ' and t.' + key + ' in (' + stringValue + ')'
          } else {
            queryData = queryData + ' and t.' + key + ' = ' + "'" + obj[key] + "'"
          }
        }
      }
      return queryData
    },
    searchData () {
      let condition = this.dataHand(this.queryData)
      let f_changetables_reason = this.dataHand(this.queryData2)
      // 重置url
      this.url = ''
      // encodeURIComponent是将该参数中的特殊符号进行编码，后端会进行解码
      this.url = this.urlPrefix + '?condition=' + encodeURIComponent(condition) +
        '&startDate=' + encodeURIComponent(this.model.startDate) +
        '&endDate=' + encodeURIComponent(this.model.endDate) +
        '&f_meter_brand=' + encodeURIComponent(this.model.f_meter_brand) +
        '&f_changetables_reason=' + encodeURIComponent(f_changetables_reason)
      console.log('报表===>' + this.url)
      this.isShow = true
    },
    load () {
      this.isShow = true
    },
    getRes (obj) {
      this.orgname = obj.res[0]
      this.depresid = obj.resids
      this.userresid = obj.resids
      this.queryData.f_orgid = obj.resids
    },
    getdep (obj, val) {
      this.depname = val[0]
      this.userresid = obj
      this.queryData.f_depid = obj
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    }
  },
  computed: {
  }
}
</script>
<style scoped>
.noborder{
  border: none;
}
.span{
  height: 0;
}
.iframe_style{
  border: medium none;
}
</style>
