<!--
@name:  单据打印
@author: 李恒
@time: 2022-06-06 09:33:12
-->
<template>
  <p-card title=' 单据打印'>
    <div slot='extra'>
      <p-button icon='filter' @click='toggleFormTag = !toggleFormTag'>{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
      <p-button type='primary' class='ml-10' @click='print'>打印</p-button>
    </div>
    <p-form-model v-show='toggleFormTag' ref='formTarget' :label-col='{ span: 8 }' :model='form'
                  :wrapper-col='{ span: 16 }' class='plg-grid-from'>
      <a-row>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item label='单据类型'>
            <p-select v-model='form.billType' :options="billTypeOptions" allowClear/>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item label='打印状态'>
            <p-select v-model='form.printStatus' :options="printStatusOptions" allowClear/>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item label='开始时间'>
            <p-date-picker v-model='form.startTime' :disabled-date='disabledStartDate'
                           :showTime='startShowTime' style='width: 100%;' valueFormat='YYYY-MM-DD HH:mm:ss'/>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item label='结束时间'>
            <p-date-picker v-model='form.endTime' :disabled-date='disabledEndDate'
                           :showTime='endShowTime' style='width: 100%;' valueFormat='YYYY-MM-DD HH:mm:ss'/>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item label='单据编号'>
            <p-input v-model='form.billNo' placeholder='请输入单据编号'/>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item :wrapper-col='{ span: 16, offset: 8 }'>
            <a-checkbox-group v-model="form.printReport">
              <a-checkbox value="OutboundPrintList">出库清单</a-checkbox>
              <a-checkbox value="MedicineCheckReport">报告单</a-checkbox>
            </a-checkbox-group>
          </p-form-model-item>
        </a-col>
        <a-col :span='8' :xxl='6'>
          <p-form-model-item :wrapper-col='{ span: 16, offset: 8 }'>
            <p-button type='primary' @click='onSubmit'>查询</p-button>
            <p-button class='ml-10' @click='onReset'>重置</p-button>
          </p-form-model-item>
        </a-col>
      </a-row>
    </p-form-model>
    <p-table ref='dataSource' :data-source.sync='dataSource'
             :scroll='{x:true}'
             :autoLoad='false'
             :remote-url='listRemoteUrl'
             :remoteData='listParams'
             :selectedRowKeys.sync='selectedRowKeys'
             bordered dragle row-key='billNo'>
      <p-table-column data-index='billNo' title='单据编号'/>
      <p-table-column data-index='billType' title='单据类型'/>
      <p-table-column data-index='gmtCreate' title='创建时间'/>
      <p-table-column data-index='totPcs' title='总件数'/>
      <p-table-column data-index='outBoundPrintCount' title='打印次数(出库清单)'/>
      <p-table-column data-index='reportPrintCount' title='打印次数(报告单)'/>
    </p-table>
  </p-card>
</template>

<script>
import {listRemoteUrl,getDictionary, print} from './api'

export default {
  components: {},
  data() {
    return {
      toggleFormTag: true,
      form: {},
      startShowTime: {
        format: 'HH:mm:ss',
        defaultValue: this.$moment('00:00:00', 'HH:mm:ss')
      },
      endShowTime: {
        format: 'HH:mm:ss',
        defaultValue: this.$moment('23:59:59', 'HH:mm:ss')
      },
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],
      // 字典
      billTypeOptions: [ // BILL_TYPE_VALUE

      ],
      printStatusOptions: [
        {label: '已打印', value: '1'},
        {label: '未打印', value: '0'},
      ]
    }
  },
  mounted(){
    this.initDictionary()
  },
  methods: {
    initDictionary() {
      getDictionary('BILL_TYPE_VALUE').then(options => {
        this.billTypeOptions = options
      })
    },
    onSubmit() {
      this.$refs.formTarget.validate(flag => {
        if (!flag) return
        this.listParams = {...this.form}
      })
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    // 日期选择限制
    disabledStartDate(startValue) {
      if (!startValue || !this.form.endTime) return false
      const endValue = this.$moment(this.form.endTime)
      return startValue.valueOf() > endValue.valueOf()
    },
    disabledEndDate(endValue) {
      const current = this.$moment()
      if (!endValue || !this.form.startTime) {
        return current.valueOf() > endValue.valueOf()
      }
      const startValue = this.$moment(this.form.startTime)
      return startValue.valueOf() > endValue.valueOf() || current.valueOf() > endValue.valueOf()
    },
    print() {
      const selectedRowKeys = this.selectedRowKeys
      const {printTypes} = this.form
      if (selectedRowKeys.length === 0) return this.$message.warn('请选择要打印的数据')
      if (printTypes.length === 0) return this.$message.warn('请选择打印类型')
      const params = {
        billIds: selectedRowKeys,
        printTypes
      }
      this.spinning = true
      print(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.onSubmit()
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    }
  }
}
</script>
