<template>
  <button class="button_export button_spacing" @click='printData()'>打印</button>
  <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-manage :model='model' v-show="false" v-ref:print
                     :top='40' :left='40' :right='40' :bottom='40' :print-name="printName"
                     :thead="thead" :tfoot='tfoot' :attach="attach" :sumhtml="sumhtml"
                     :fields="modelval" :is-selected="isSelected" :printpage="printpage">
        </print-table-manage>
      </center>
    </footer>
  </modal>
</template>

<script>
  import co from 'co'

  export default {
    // data:sql需要的替换字段
    // sqlurl:导出Excel查询的sql语句
    // field:需要导出Excel的字段名和对应中文名或hbm配置文件名（全名）
    // total:统计字段（统计行）
    // props: ['data', 'sqlurl', 'field', 'total', 'bean', 'chooseCol'],
    data () {
      return {
        printshow: false,
        all: false,
        fields: {},
        modelval: [],
        thead: '',
        tfoot: '',
        //合计数据
        sumsmodel: {},
        // 合计超文本
        sumhtml: ''
      }
    },
    props: {
      model: {},
      field: {},
      printName: {},
      // 默认列
      defaultfield: {},
      // 合计数据
      sumsmodel: {},
      isSelected: {
        type:Boolean,
        default:false
      },
      printpage: {
        type:Boolean,
        default:false
      },
      // 合计默认在第一页展示
      sumone: {
        type:Boolean,
        default:true
      },
      attach: {
        type: String,
        default: 'name'
      }
    },
    methods: {

      printData () {
        console.log('打印。。。', this.model, this.field, this.printName, this.sumsmodel)

        if (this.model.rows.length === 0) {
          this.$showAlert('请查询需要打印的数据！！', 'warning', 2000)
          return
        }
        this.all = false
        //默认选择要打印的列
        this.modelval = this.defaultfield
        this.fields = this.field
        console.log('所有打印字段',this.fields)
        this.printshow = true
        this.put()
      },

      put () {
        // 对Modelval进行排序
        this.sortModelval()
        this.getfield()
        // 组织头数据
        this.thead = `<tr><th colspan=${this.modelval.length}>${this.printName}统计报表</th></tr><tr>`
        for (let key of this.modelval) {
          this.thead += '<th>' + this.fields[key] + '</th>'
        }
        this.thead += '</tr>'
      },
      // 对选择的列进行排序
      sortModelval () {
        console.log('选择列进行排序。。。', this.fields, this.modelval)
        let sortModel = []
        Object.keys(this.fields).forEach((key) => {
          if (this.modelval.includes(key)) {
            sortModel.push(key)
          }
        })
        this.modelval = sortModel
        console.log('选择的打印的字段', this.modelval)
      },

      close () {
        this.all = false
        this.modelval = []
        this.printshow = false
        this.$dispatch('print-close')
      },

      print () {
        this.$refs.print.PrintAsFile()
        this.printshow = false
        this.$dispatch('print-data')
      },
      getfield(){
        //合计字段打印
        this.tfoot = ''
        if(this.sumsmodel){
          if (this.sumone) {
            this.sumhtml = `<tr><th colspan=${this.modelval.length}>全表汇总信息: `
            Object.keys(this.sumsmodel).forEach((key) => {
              this.sumhtml += this.fields[key] + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
            })
            this.sumhtml += '</th></tr>'
          } else {
            this.tfoot = `<tr><th colspan=${this.modelval.length}>全表汇总信息: `
            Object.keys(this.sumsmodel).forEach((key) => {
              this.tfoot += this.fields[key] + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
            })
            this.tfoot += '</th></tr>'
          }
        }
        this.tfoot += `<tr><th colspan=${this.modelval.length}>打印时间: ${this.$login.toStandardTimeString()}</th></tr>`
      },
    },
    watch: {
      'all' (val) {
        if (val) {
          this.modelval = Object.keys(this.fields)
        } else {
          this.modelval = []
        }
      },
      'modelval.length' () {
        this.put()
      }
    },
    computed: {

    }
  }
</script>
