<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-self :model='model' v-show="false" v-ref:print
                     :top='40' :left='1' :right='1' :bottom='40' :printName="printName"
                     :thead="thead" :tfoot='tfoot' :attach="attach" :sumhtml="sumhtml" :sumhtml1="sumhtml1"
                          :startDate="startDate" :endDate="endDate" :sumhtml2="sumhtml2" :sumhtml3="sumhtml3"
                     :fields="modelval" :is-selected="isSelected" :printpage="printpage">
        </print-table-self>
      </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: true,
        fields: {},
        modelval: [],
        thead: '',
        tfoot: '',
        //合计数据
        sumsmodel: {},
        // 合计超文本
        sumhtml: '',
        sumhtml1: '',
        sumhtml2: '',
        sumhtml3: ''
      }
    },
    props: {
      model: {},
      field: {},
      printName: {},
      // 默认列
      defaultfield: {},
      // 合计数据
      sumsmodel: {},
      // 合计数据的列名称配置(当没有找到对应合计的名称时,会从field中找)
      sumField: {},
      startDate:"",
      endDate:"",
      // 单页合计
      pageSum: null,
      isSelected: {
        type:Boolean,
        default:false
      },
      printpage: {
        type:Boolean,
        default:false
      },
      // 合计默认在第一页展示
      sumone: {
        type:Boolean,
        default:true
      },
      attach: {
        type: String,
        default: 'name'
      },
      chooserow: {
        type: Boolean,
        default: false
      }
    },
    methods: {

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

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

      },

      put () {
        // 对Modelval进行排序
        this.sortModelval()
        this.getfield()
        // 组织头数据
        this.thead =  `<tr>
                            <th style="width: 70px;">用户编号</th>
                            <th style="width: 130px;">用户名称</th>
                            <th style="width: 130px;">用户地址</th>
                            <th style="width: 70px;">购气气量</th>
                            <th style="width: 65px;">阶一</th>
                            <th style="width: 65px;">阶二</th>
                            <th style="width: 65px;">阶三</th>
                            <th style="width: 65px;">收费金额</th>
                            <th style="width: 65px;">用户类型</th>
                            <th style="width: 80px;">收费类型</th>
                            <th style="width: 130px;">日期</th>
                            <th style="width: 80px;">操作员</th>
                       </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 = true
        this.modelval = []
        // this.printshow = false
        this.$dispatch('print-close')
      },

      print () {
        this.$refs.print.PrintAsFile()
        // this.printshow = false
        this.$dispatch('print-data')
      },
      getfield(){
        //合计字段打印
        this.tfoot = ''
        this.sumhtml2 = `营业厅明细报表`
        if(this.sumsmodel){
          if (this.sumone) {
            this.sumhtml1 = `<tr><th colspan=${this.modelval.length}>报表统计时间:`
            if(this.startDate == this.endDate){
              this.sumhtml1 += this.startDate  + '</th></tr>'
            }else{
              this.sumhtml1 += this.startDate + '至' + this.endDate + '</th></tr>'
            }
            this.sumhtml = `<tr><th colspan=${this.modelval.length}>报表汇总信息: `
            // Object.keys(this.sumsmodel).forEach((key) => {
            //   let keyName = this.sumField[key] ? this.sumField[key] : this.fields[key]
            //   this.sumhtml += keyName + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
            // })
            // this.sumhtml += '</th></tr>'
            this.sumhtml += '卡费合计: ' + `<font color="blue">${this.sumsmodel['cardfee']} </font>`
            this.sumhtml += '方量合计: ' + `<font color="blue">${this.sumsmodel['f_pregas']} </font>`
            this.sumhtml += '金额合计: ' + `<font color="blue">${this.sumsmodel['f_preamount']} </font>`
            this.sumhtml += '</th></tr>'
            this.sumhtml3 = `<tr><th colspan=${this.modelval.length}>&emsp;&emsp;&emsp;小&emsp;计:`
            this.sumhtml3 += '现金合计: ' + `<font color="blue">${this.sumsmodel['xianjin']} </font>`
            this.sumhtml3 += '转账合计: ' + `<font color="blue">${this.sumsmodel['zhuanzhang']} </font>`
            this.sumhtml3 += '</th></tr>'
          } else {
            this.tfoot = `<tr><th colspan=${this.modelval.length}>全表汇总信息: `
            Object.keys(this.sumsmodel).forEach((key) => {
              let keyName = this.sumField[key] ? this.sumField[key] : this.fields[key]
              this.tfoot += keyName + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
            })
            this.tfoot += '</th></tr>'
          }
        }
        if (this.pageSum) {
          this.tfoot += `<tr>`
          for (let row of this.modelval) {
            let format = this.pageSum[row]
            if (format) {
              this.tfoot += `<td tdata="SubSum" format="${format}">######</td>`
            } else {
              this.tfoot += `<td></td>`
            }
          }
          this.tfoot += `</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>
