<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>
        </div>
      </div>
    </div>
    <div style="height: 97%;">
      <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[0]'
                        v-ref:pay></site-manager>
        </div>
        <div style="flex: 1;width: 50%">
          <bank-manager :startdate='model.startDate' :enddate='model.endDate' :orgid='model.orgid[0]'
                        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[0]' 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[0]' v-ref:pay ></bussiness-type>
        </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 {
        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()
      },
      getRes(obj) {
        this.model.orgid = obj
      },
    }
  }
</script>

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