<template>
  <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
    <p class="bg-info text-center" style="padding: 8px;">CNG车辆充装记录汇总表</p>
    <div class="row">
      <div class="col-sm-3 form-group form-input-group">
        <label for="startDate" class="control-label">开始日期</label>
        <datepicker id="startDate" placeholder="开始日期"
                    v-model="model.startDate"
                    :value.sync="model.startDate"
                    :disabled-days-of-Week="[]"
                    :format="'yyyy-MM-dd 00:00:00'">
        </datepicker>
      </div>
      <div class="col-sm-3 form-group form-input-group">
        <label for="endDate" class="control-label">结束日期</label>
        <datepicker id="endDate" placeholder="结束日期"
                    v-model="model.endDate"
                    :value.sync="model.endDate"
                    :disabled-days-of-Week="[]"
                    :format="'yyyy-MM-dd 23:59:59'">
        </datepicker>
      </div>
      <div class="col-sm-3 form-group form-input-group">
        <label class="control-label">充装量</label>
        <input type="text" style="width:60%" class="input_search" v-model="model.f_pregas"
               condition="f_pregas = '{}' " placeholder="充装量">
      </div>
      </div>
      <div class="row">
        <div class="span" style="float:right;">
          <button class="btn btn-primary width-100" @click="search()">查询</button>
          <report-print id='gasprice' top='1cm' left='2cm' width='100%' height='100%'
                        :preview="true"></report-print>
          <report-excel id='gasprice'></report-excel>
        </div>
      </div>
      <div partial='list' v-el:handcollect id='gasprice' style="height: 70vh; overflow-y: scroll;">
        <table class='tableprint' style="margin: 0 auto">
          <thead>
          <tr>
            <th colspan='18' style="font-weight: normal; text-align: center;">
              <h3 style="text-align: center">CNG车辆充装记录汇总表</h3>
            </th>
          </tr>
          <tr>
            <th colspan='18' style="font-weight: normal; text-align: center;">
              开始时间：{{model.startDate}}&nbsp;&nbsp;&nbsp;结束时间：{{ model.endDate }}&nbsp;&nbsp;&nbsp;
            </th>
          </tr>
          </thead>
          <tr>
            <td colspan='9'>
              {{{ model.data.substring(26,model.data.length-8) }}}
            </td>
          </tr>
          <tfoot>
          </tfoot>
        </table>
      </div>
    </div>
</template>

<script>
import getLodop from 'vue-client/src/LodopFuncs'
export default {
  name: 'operatingStatement',
  title: '营业报表',
  props: {
    id: {},
    top: {},
    left: {},
    width: {},
    height: {},
    style: {},
    notrepeat: {},
    showbtn: {
      type: Boolean,
      default: true
    },
    attach: {
      type: String,
      default: 'name'
    },
    extra: {
      type: Object,
      default: function () {
        return {
          count: 0,
          tops: []
        }
      }
    },
    preview: {}
  },
  data () {
    return {
      taskId: null,
      isPrint: true,
      model: {
        startDate: '',
        endDate: '',
        data: '',
        f_pregas: ''
      },
      org: this.$login.f.orgid
    }
  },
  methods: {
    search () {
      let condition = '1=1'
      let condition1 = '1=1'
      let condition2 = '1=1'
      if (this.org === '99' || this.org === 99) {
        condition1 = '1=1'
        condition2 = 'f_orgid = ' + this.org
      } else {
        condition1 = 'f_orgid = ' + this.org
        condition2 = 'f_orgid = ' + this.org
      }
      const obj = {
        data: {
          startDate: this.model.startDate, endDate: this.model.endDate, condition1: condition1, condition2: condition2, condition: condition
        }
      }
      if (this.model.f_pregas !== '') {
        obj.data.condition = condition + ' and f_pregas = ' + this.model.f_pregas
      }
      this.$http.post('rs/report/rpt', obj).then((res) => {
        this.model.data = res.body
      })
    },
    print () {
      let lodop = getLodop()
      lodop.SET_PRINT_MODE('RESELECT_PRINTER', true)
      // 如果知道能打印一次,且已经打印一次，将不再打印
      if (this.notrepeat && !this.isPrint) {
        return
      }
      // 打印一次，将可打印设置为false
      this.isPrint = false
      this.$nextTick(() => {
        this.refreshData()
      })

      var selfStyle = '<style>'
      // var style = '<link rel="stylesheet/less" type="text/less" href="../client.less"/>'
      if (this.style) {
        selfStyle += this.style
      } else {
        selfStyle += 'td {border-width: 2px;padding: 0.5px;border-style: solid; border-color:#000000;  }  \n' +
          'table{border-collapse:collapse; border}\n' +
          '.noborder{border-width: 0px;}\n' +
          '.tdleft{text-align: left;}\n' +
          '.tdright{text-align: right;}  \n' +
          '.tdcenter{text-align: center;}\n' +
          '.fs10{font-size: 0.4em;}\n' +
          '.fs11{font-size: 0.5em;}\n' +
          '.fs12{font-size: 0.6em;}\n' +
          '.fs13{font-size: 0.7em;}\n' +
          '.fs15{font-size: 0.9em;}\n' +
          '.fs17{font-size: 1.1em;}\n' +
          '.fs19{font-size: 1.2em;}\n' +
          '.fs24{font-size: 1.5em;}\n' +
          '.fs26{font-size: 1.6em;}\n' +
          '.b{font-weight: bold;}\n' +
          '.td-border-right{BORDER-RIGHT: #000000 1px solid; }\n' +
          '.td-border-top{BORDER-TOP: #000000 1px solid; }\n' +
          '.td-border-left{BORDER-LEFT: #000000 1px solid;}\n' +
          '.td-border-bottom{BORDER-BOTTOM: #000000 1px solid;}'
      }
      selfStyle += '</style>'
      var strFormHtml = selfStyle + document.getElementById(this.id).innerHTML
      lodop.PRINT_INIT('报表打印')
      // lodop.SET_PRINT_PAGESIZE(1, 0, 0, 'A4')
      lodop.ADD_PRINT_HTM(this.top, this.left, this.width, this.height, strFormHtml)

      // 支持一张纸打印多份
      for (var i = 0; i < this.extra.count; i++) {
        lodop.ADD_PRINT_HTM(this.extra.tops[i], this.left, this.width, this.height, strFormHtml)
      }

      // lodop.SET_PRINT_MODE("CATCH_PRINT_STATUS",true)
      let that = this
      // 这个设置 针式打印机打印纸张会超出界限导致右侧打不全
      // lodop.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')
      if (lodop.CVERSION) {
        lodop.On_Return = function (TaskID, Value) {
          // 当直接打印时，Value值为true和false
          // 当走打印预览是，Value值为1和0
          switch (Value) {
            case '1':
            case true:
              that.$dispatch('print-success', Value)
              break
            case '0':
            case false:
              that.$dispatch('print-error', Value)
              break
          }
        }
        // lodop.PREVIEW()
        if (this.preview) {
          lodop.PREVIEW()
        } else {
          lodop.PRINT()
        }
      }
      this.$dispatch('print', this.id)
    },
    refreshData () { // 让innerHTML获取的内容包含input和select(option)的最新值
      let allInputObject = document.getElementById(this.id).getElementsByTagName('input')
      for (let i = 0; i < allInputObject.length; i++) {
        if (allInputObject[i].type === 'checkbox') {
          if (allInputObject[i].checked) {
            allInputObject[i].setAttribute('checked', 'checked')
          } else {
            allInputObject[i].removeAttribute('checked')
          }
        } else if (allInputObject[i].type === 'radio') {
          if (allInputObject[i].checked) {
            allInputObject[i].setAttribute('checked', 'checked')
          } else {
            allInputObject[i].removeAttribute('checked')
          }
        } else {
          allInputObject[i].setAttribute('value', allInputObject[i].value)
        }
      }
      for (let i = 0; i < document.getElementsByTagName('select').length; i++) {
        let sl = document.getElementsByTagName('select')[i]
        for (let j = 0; j < sl.options.length; j++) {
          if (sl.options[j].selected) {
            sl.options[j].setAttribute('selected', 'selected')
          } else {
            sl.options[j] = new Option(sl.options[j].text, sl.options[j].value)
          }
        }
      }
    }
  },
  ready () {
    this.model.startDate = this.$login.toStandardDateString() + ' 00:00:00'
    this.model.endDate = this.$login.toStandardDateString() + ' 23:59:59'
    this.search()
  }
}
</script>
