<template>
  <div style="flex:1;" class="flex">
    <button class="btn btn-xs" v-show="!this.criteriaShow" @click="this.show()">
      <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
    </button>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfsearch' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group form-input-group">
            <label for="startDate" class="control-label">开始日期:</label>
            <datepicker id="startDate" placeholder="开始日期" width='100%'
                        v-model="model.startDate"
                        :value.sync="model.startDate"
                        :disabled-days-of-Week="[]"
                        condition="'{}' "
                        :format="'yyyy-MM-dd 00:00:00'"
                        :show-reset-button="reset">
            </datepicker>
          </div>

          <div class="form-group form-input-group">
            <label for="endDate" class="control-label">结束日期:</label>
            <datepicker id="endDate" placeholder="结束日期" width='100%'
                        v-model="model.endDate"
                        :value.sync="model.endDate"
                        condition="'{}' "
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd 23:59:59'"
                        :show-reset-button="reset">
            </datepicker>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
            <!--<export-excel :data="$parent.$parent.getPargram()"-->
            <!--sqlurl="rs/logic/exportfile" :bean="'日汇总查询导出'"></export-excel>-->
            <export-excel :data="$parent.$parent.getCondition"
                          :field="$parent.$parent.getfield"
                          sqlurl="rs/logic/exportfile" sql-name="yearSummarize" template-name='年汇总查询导出'  :choose-col="true"></export-excel>
            <!--<button class="btn" @click="$parent.$parent.hidden()" style="margin-left: 10px">-->
            <!--<span class="glyphicon glyphicon-chevron-up"></span>-->
            <!--</button>-->

          </div>
        </div>
      </criteria>
      <!--<data-grid :model="model" partial='list' v-ref:grid>-->
      <!--<template partial='head'>-->
      <!--<tr>-->
      <!--<th>序号</th>-->
      <!--<th>营业网点</th>-->
      <!--<th>操作员</th>-->
      <!--<th>笔数</th>-->
      <!--<th>用气性质</th>-->
      <!--<th>气量</th>-->
      <!--<th>应收金额</th>-->
      <!--<th>实收金额</th>-->
      <!--</tr>-->
      <!--</template>-->
      <!--<template partial='body'>-->
      <!--<td style="text-align: center;" :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{$index+1}}</td>-->
      <!--<td v-if="model.rows[$index-1] && model.rows[$index-1].f_outlets === row.f_outlets"></td>-->
      <!--<td v-else :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_outlets}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_operator}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.times}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_gasproperties}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_pregas}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_preamount}}</td>-->
      <!--<td :class = "{'bg-info' : row.f_outlets === '小计', 'bg-success' : row.f_outlets === '总计' }">{{row.f_collection}}</td>-->
      <!--</template>-->
      <!--</data-grid>-->
      <data-grid  :model="model" partial='list' v-ref:grid :classname="$parent.classname" @dblclick="$parent.dblclick">
        <template partial='head'>
          <tr>
            <th v-for="item in $parent.$parent.$parent.headData"><nobr>{{item}}</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td v-for="item in $parent.$parent.$parent.bodyData"><nobr>{{row[item]}}</nobr></td>
        </template>
        <template partial='foot'></template>
      </data-grid>
      <colligate-details :showinfo="showinfo" :businesstype="businesstype" :data="data" @close-info="showinfo=false"></colligate-details>
      <modal :show.sync="printshow" v-ref:modal backdrop="false">
        <header slot="modal-header" class="modal-header text-center">
          <h4 class="modal-title">打印列选择</h4>
          <input type="checkbox" class="" id="f_generations" v-model="all">
          <label for="f_generations" class="font-size">全选</label>
        </header>
        <article slot="modal-body">
          <div class="auto col-sm-11 col-md-offset-1"  style="margin-top: 10px;">
            <div class="col-sm-3" v-for="f in fields">
              <input type="checkbox" class="" :id="'water-owe-details-'+$index" v-model="modelval" :value="$key">
              <label :for="'water-owe-details-'+$index" class="font-size">{{f}}</label>
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <center>
            <button v-show="printshow" type="button" class="btn btn-default" @click='close()'>取消</button>
            <button v-show="printshow" type="button" class="btn btn-success" @click='print()'>打印</button>
            <print-table :model='model' v-show="false" v-ref:print
                         :top='40' :left='60' :right='40' :bottom='60'
                         :thead="thead" :tfoot='tfoot' :attach="yangsen"
                         :fields="modelval" :printpage="true">
            </print-table>
          </center>
        </footer>
      </modal>
    </criteria-paged>
  </div>
</template>
<script>
  import { PagedList } from 'vue-client'

  export default {
    title: '年汇总信息',
    data () {
      return {
        showinfo: false,
        businesstype: '年汇总',
        data: {},
        model: new PagedList('rs/sql/yearSummarize', 150, {startDate: '"' + this.$login.toStandardDateString() + ' 00:00:00' + '"', endDate: '"' + this.$login.toStandardDateString() + ' 23:59:59' + '"'}),
        criteriaShow: true,
        classname: 'table table-bordered table table-hover',
        headData: ["序号","月份","用气性质","笔数","气量","应收金额","实收金额"],
        bodyData: ["idnumber","f_delivery_date","f_gasproperties","times","f_pregas","f_preamount","f_collection"],

        filialeNameStr: null,
        filialeCodeStr: this.$login.f.f_orgids,
        userid: this.$login.f.id,
        source:`tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() != $role$))`,

        modelval: [],
        printshow: false,
        all: false,
        fields: {},
        thead: '',
        tfoot: '',
        //合计数据
        sumsmodel: {}
      }
    },
    props: [],
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.cri.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
      this.model.search()
      // console.log(Util.toStartAndEndDateString())
    },
    methods: {
      search () {
        this.model.search()
      },
      selfsearch (arr) {
        this.model = new PagedList('rs/sql/yearSummarize', 150, {startDate: '"' + this.getPargram().startDate + '"', endDate: '"' + this.getPargram().endDate + '"'})
        this.model.search()
      },
      getPargram () {
        let startDate = this.$refs.paged.$refs.cri.model.startDate
        let endDate = this.$refs.paged.$refs.cri.model.endDate
        return {startDate: startDate, endDate: endDate}
      },
      dblclick(obj) {
        this.data = obj
        this.showinfo = true
      },
      //   async selfSearch (args) {
      // let f_orgstr = this.filialeCodeStr
      // console.log('xxxx',f_orgstr)
      // args.condition =  `${args.condition} and f_orgstr like '${f_orgstr}%'`
      // console.log('我的阐述',JSON.stringify(args.condition))
      // await this.model.search(args.condition, args.model)
      //
      // this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
      //   console.log('合计字段',this.sumsmodel)
      // },
      clear(){
        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          this.$refs.paged.$refs.cri.model[key] = []
      })

      },
      show(){
        this.criteriaShow = true
      },
      hidden(){
        this.criteriaShow = false
      },
      getRes(obj) {
        this.filialeNameStr = obj.res
        this.filialeCodeStr = obj.resids
      },
      stamp () {
        this.all = false
        //默认选择要打印的列
        this.modelval = defaultPrint.config
        this.fields = this.getfield
        console.log('所有打印字段',this.fields)
        this.printshow = true
        this.put()
      },
      put () {
        // 对Modelval进行排序
        this.sortModelval()
        this.thead = `<tr><th colspan=${this.modelval.length}>年汇总表</th></tr><tr>`
        for (let key of this.modelval) {
          this.thead += '<th>' + this.fields[key] + '</th>'
        }
        this.thead += '</tr>'
      },
      print () {
        this.$refs.print.PrintAsFile()
        this.printshow = false
      },
      close () {
        this.printshow = false
        this.all = false
      },
      // 对选择的列进行排序
      sortModelval () {
        let sortModel = []
        Object.keys(this.fields).forEach((key) => {
          if (this.modelval.includes(key)) {
          sortModel.push(key)
        }
      })
        this.modelval = sortModel
        console.log('选择的打印的字段', this.modelval)
      }
    },
    watch:{
      'all' (val) {
        if (val) {
          this.modelval = this.bodyData
        } else {
          this.modelval = defaultPrint.config
          this.put()
        }
      },
      'modelval.length' () {
        this.put()
      },
    },
    computed: {
      getCondition(){
        console.log('getCondition===',Object.assign({condition: `${this.$refs.paged.$refs.cri.condition}  and f_orgstr like '${this.filialeCodeStr}%'`},this.getPargram ()))
        return Object.assign({condition: `${this.$refs.paged.$refs.cri.condition}  and f_orgstr like '${this.filialeCodeStr}%'`},this.getPargram ())
      },
      getfield(){
        let data = {}
        this.bodyData.forEach((value, index)=>{
          data[this.bodyData[index]] = this.headData[index]
        })

        //合计字段打印
        this.tfoot = `<tr><th colspan=${this.modelval.length}>全表汇总信息: `
        if(this.sumsmodel){
          Object.keys(this.sumsmodel).forEach((key) => {
            this.tfoot += this.fields[key] + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
        })
        }else{
          this.tfoot += '暂无'
        }
        this.tfoot += '</th></tr>'
        return data
      },
      bankname () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('银行名称')]
      },
      filiales () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('分公司')]
      }
    }
  }
</script>
