<template lang="html">
  <div :class="classname" v-if="jurisdiction.includes('首页')" :style="{width:width,height:height}">
    <div class="form-horizontal select-overspread container-fluid auto">
      <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="[]"
                      class="datepicker"
                      :format="'yyyy-MM-dd'"
                      :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%"
                      class="datepicker"
                      v-model="model.endDate"
                      :value.sync="model.endDate"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd'"
                      :show-reset-button="reset">
          </datepicker>
        </div>
        <div class="col-sm-3 form-group">
          <label class="font_normal_body" for="endDate">使用公司:</label>
          <res-select restype='organization'
                      @res-select="getRes"
                      :initresid="model.id">
          </res-select>
          <button class="button_search button_spacing" @click="changePage()">下一页</button>
        </div>
      </div>
    </div>
    <div style="height: 97%;" v-if="showPage === 1">
      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;height: 48%">
        <div style="flex: 1;border-right: 1px dashed #888;width: 50%">
          <site-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid'
                        v-ref:pay></site-manager>
<!--        <test></test>-->
        </div>
        <div style="flex: 1;width: 50%">
          <bank-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid'
                        v-ref:pay></bank-manager>
        </div>
      </div>
      <div class="flex-row" style="flex: 1;height: 48%">

        <div class="flex-row" style="flex: 1;width: 50%;border-right: 1px dashed #888;">
          <div style="flex: 1;">
            <paymentpie :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid'
                        v-ref:pay></paymentpie>
          </div>
          <!--          <div style="flex: 1;">-->
          <!--            <usertype-pie :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]' v-ref:pay ></usertype-pie>-->
          <!--          </div>-->
        </div>

        <div style="flex: 1;width: 50%">
          <bussiness-type :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid'
                          v-ref:pay></bussiness-type>
        </div>
      </div>
    </div>
    <div style="height: 97%;" v-if="showPage === 2">
      <div class="flex-row" style="flex: 1;height: 96%">
        <div style="flex: 1">
          <gas-properties-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid'></gas-properties-manager>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import * as Util from '../../Util'

export default {
  props: {
    classname: {
      type: String,
      default: 'basic-main'
    },
    width: {
      type: String,
      default: '98.5%'
    },
    height: {
      type: String,
      default: '98%'
    }
  },
  data () {
    return {
      showPage: 1,
      page: [1, 2],
      jurisdiction: this.$login.r,
      model: {
        id: [this.$login.f.orgid],
        orgid: this.$login.f.orgid,
        startDate: Util.toStandardDateString(),
        endDate: Util.toStandardDateString()
      }
    }
  },
  methods: {
    searchdata () {
      this.$refs.pay.searchdata()
    },
    changePage () {
      let curPage = this.page.indexOf(this.showPage)
      if (curPage + 1 === this.page.length) {
        this.showPage = this.page[0]
      } else {
        this.showPage = this.page[curPage + 1]
      }
    },
    getRes (obj) {
      console.log('obj--------',obj)
      let stringValue = ''
      for (var i = 0; i < obj.length; i++) {
        if (i === obj.length - 1) {
          stringValue = stringValue + "'" + obj[i] + "'"
        } else {
          stringValue = stringValue + "'" + obj[i] + "',"
        }
      }
      console.log('stringValue--------',stringValue)
      this.model.orgid = stringValue
    }
  }
}
</script>

<style lang="css">
</style>
