<template lang="html">
  <div class="flex" style="padding: 15px;">
    <div class="form-inline auto">
      <div class="form-group auto">
        <label for="startDate">开始日期:</label>
        <datepicker id="startDate" placeholder="开始日期"
                    v-model="model.startDate"
                    :value.sync="model.startDate"
                    :disabled-days-of-Week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-reset-button="reset">
        </datepicker>
      </div>
      <div class="form-group auto">
        <label for="endDate">结束日期:</label>
        <datepicker id="endDate" placeholder="结束日期"
                    v-model="model.endDate"
                    :value.sync="model.endDate"
                    :disabled-days-of-Week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-reset-button="reset">
        </datepicker>
      </div>
      <div class="form-group auto">
        <label class="control-label">组织机构</label>
        <right-tree :userid.sync='userid' :source.sync='source'  :selectData='filialeNameStr' @re-res="getRes" ></right-tree>
      </div>
    </div>
    <div class="flex echartsstyle" v-if="echartsshow">
      <div class="flex-row" style="flex: 1;border-bottom: 1px dashed #888;height: 50%">
        <div  style="flex: 1;border-right: 1px dashed #888;">
          <!--<site-manager :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></site-manager>-->
          <component  :is="config.componentname[0]" :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></component>
        </div>
        <div  style="flex: 1;">
          <!--<bank-manager :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay></bank-manager>-->
          <!--<company-user :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></company-user>-->
          <component :is="config.componentname[1]" :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></component>
        </div>
      </div>
      <div class="flex-row" style="flex: 1;height: auto">

        <div class="flex-row" style="flex: 1;border-right: 1px dashed #888;height: auto">
          <!--<div  style="flex: 1;">-->
            <!--&lt;!&ndash;<paymentpie :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></paymentpie>&ndash;&gt;-->
            <!--<component :is="componentname[2]" :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></component>-->
          <!--</div>-->
          <!--<div style="flex: 1;border-right: 1px dashed #888;">-->
            <!--&lt;!&ndash;<usertype-pie :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></usertype-pie>&ndash;&gt;-->
            <component :is="config.componentname[2]" :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></component>
          <!--</div>-->
        </div>

        <div style="flex: 1;">
          <!--<bussiness-type :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></bussiness-type>-->
          <component :is="config.componentname[3]" :startdate='model.startDate' :enddate='model.endDate' :f_orgstr="filialeCodeStr" v-ref:pay ></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as Util from '../../Util'
  import {HttpResetClass} from 'vue-client'

  //请求组件参数
  let asyncComponentName = async function(self){
    await self.$getConfig(self,'ComponentName')
  }

  export default {
    data() {
      return {
        model: {
          // startDate: Util.toStandardDateString(),
          startDate: new Date().getFullYear() - 1 + '-09-15',
          endDate: Util.toStandardDateString()
        },
        filialeNameStr: this.$login.f.f_orgids,
        filialeCodeStr: this.$login.f.orgpathstr,
        userid: this.$login.f.id,
        source:`tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() != $role$))`,
        config: {
          componentname:['business-hall','company-user','payment-distributed','bussiness-type']
        },
        echartsshow:true
      }
    },
    methods: {
      searchdata() {
        this.$refs.pay.searchdata()
      },
      getRes(obj) {
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
    },
    watch:{
      'config':{
        deep:true,
        handler(val){
          if(this.config.componentname.length>0){
            this.echartsshow=true
          }else {
            this.echartsshow=false
          }
        }
      }
    },
    ready() {
      console.log('jieshou',this.$login.f)
      asyncComponentName(this)
    }
  }
</script>

<style lang="css">
</style>
<style scoped>
  .echartsstyle{
    height: 95%;
  }
</style>
