<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">用户状态:</label>
              <v-select :value.sync="queryData.f_user_state" multiple
                        v-model="queryData.f_user_state"
                        :options='f_state' placeholder='请选择'>
              </v-select>
          </div>
          <div class="col-sm-3 form-group" style = "float:right;">
            <button class="button_search" @click="searchData()">查询</button>
          </div>
        </div>
        </div>
      <div style="width:100%;height: 100%;margin-top: 2%" class="div-iframe">
        <iframe class="ifarme_style" style="width:100%;height:100%" :src="url" v-if="isShow"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  title: '案例报表',
  data () {
    return {
      f_state: [ {label: '全部', value: ''}, {label: '正常', value: '正常'}, {label: '销户', value: '销户'}, {label: '预备', value: '预备'} ],
      orgCondtionStr: '1=1',
      model: {
        startDate: '',
        endDate: ''
      },
      isShow: false,
      url: '',
      urlPrefix: '/report/jmreport/shareView/761723305776898048',
      queryData: {
        f_user_state: []
      }
    }
  },
  ready () {
    this.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
    this.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
  },
  methods: {
    searchData () {
      let queryData = this.orgCondtionStr
      for (let key in this.queryData) {
        if (this.queryData[key] !== null && this.queryData[key] !== '' && this.queryData[key] !== undefined && this.queryData[key].length > 0) {
          if (Array.isArray(this.queryData[key])) {
            var stringValue = ''
            for (var i = 0; i < this.queryData[key].length; i++) {
              if (i === this.queryData[key].length - 1) {
                stringValue = stringValue + "'" + this.queryData[key][i] + "'"
              } else {
                stringValue = stringValue + "'" + this.queryData[key][i] + "',"
              }
            }
            queryData = queryData + ' and ' + key + ' in (' + stringValue + ')'
          } else {
            queryData = queryData + ' and ' + key + ' = ' + this.queryData[key]
          }
        }
      }
      // 重置url
      this.url = ''
      // encodeURIComponent是将该参数中的特殊符号进行编码，后端会进行解码
      this.url = this.urlPrefix + '?condition=' + encodeURIComponent(queryData) +
        '&startDate=' + encodeURIComponent(this.model.startDate) +
        '&endDate=' + encodeURIComponent(this.model.endDate) +
        '&logicName=testReport'
      this.isShow = true
    },
    load () {
      this.isShow = true
    }
  }
}
</script>
<style scoped>
.noborder{
  border: none;
}
.span{
  height: 0;
}
.ifarme_style{
  border: medium none;
}
</style>
