<template>
  <div :style="!printing ? {'background-color':'#EEE','padding':'20px','overflow':'auto'} :{}">
    <div v-if="!printing" style="display: flex;justify-content: center; align-items: center;flex-wrap: wrap;margin-bottom: 20px; font-size: 14px;">
      <div>宽（mm）：<el-input-number v-model="width" :min="100" :controls="false" style="width: 60px;" @change="changeWH" /></div>
      <div style="margin-left: 40px;">高（mm）：<el-input-number v-model="height" :min="100" :controls="false" style="width: 60px;" @change="changeWH" /></div>
      <div style="margin-left: 40px;">
        纸张：
        <el-select v-model="paper" placeholder="请选择" style="width: 100px;">
          <el-option label="A4" value="A4" />
          <el-option label="A3" value="A3" />
          <el-option label="A2" value="A2" />
          <el-option label="A4横向" value="A4横向" />
          <el-option label="A3横向" value="A3横向" />
          <el-option label="A2横向" value="A2横向" />
        </el-select>
      </div>
      <div style="margin-left: 40px;"><el-button @click="print">打印</el-button></div>
      <div style="margin-left: 10px; font-size: 18px;">
        <el-button @click="helpDialogVisible = true">帮助</el-button>
        <el-dialog
          title="帮助"
          :visible.sync="helpDialogVisible"
          width="40%"
        >
          <p>· 此处设置纸张大小，仅是调整内容的宽高。实际纸张大小需点击【打印】后设置。建议两处设置的保持一致。</p>
          <p style="color: #999; font-size: 12px;">例如：此处设置A4纸张，打印设置A3纸张，最终会在A3纸上打印A4尺寸的内容。</p>
          <p>· 此页面预览时不包含页边距。</p>
          <p>· 内容超宽将无法打印，内容超长将自动翻页。</p>
          <p>· 页眉页脚、页码、页边距、打印机等设置，均在点击【打印】后弹出。</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="helpDialogVisible = false">好的</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div :style="style">
      <!--模板：领导带班变更-->
      <div v-if="model == 'c/leader/change'">
        <el-table ref="tablePrint" :data="data" row-key="id" border>
          <el-table-column prop="mineName" label="所属矿山" align="center" />
          <el-table-column prop="staffName" label="带班领导姓名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.staffName ? scope.row.staffName : '【取消带班】' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="scheduling.schedulingDate" label="带班日期" align="center" />
          <el-table-column prop="leaderClassesName" label="班次" align="center" />
          <el-table-column prop="note" label="备注" align="center" />
          <el-table-column prop="auditState" label="状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.auditState === 1 ? '未审核' : scope.row.auditState === 2 ? '审核通过' : '审核不通过' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="model == 'c/leader/log'">
        <el-table ref="tablePrint" :data="data" row-key="id" border>
          <el-table-column prop="mineName" label="所属矿山" align="center" />
          <el-table-column prop="staffName" label="姓名" align="center" />
          <el-table-column prop="staffJobName" label="职务" align="center" />
          <el-table-column prop="count" label="合计" align="center" />
          <el-table-column v-for="day in 31" :key="day" :prop="'D'+day" :label="day" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Print',
  data() {
    return {
      width: 210,
      height: 297,
      paper: 'A4',
      helpDialogVisible: false,
      printing: false,
      style: {
        'background-color': '#FFF',
        'box-shadow': '5px 5px #CCC',
        // padding: '5mm',
        margin: 'auto',
        width: '210mm',
        'min-height': '297mm'
      }
    }
  },
  computed: {
  },
  watch: {
    paper(newPaper) {
      if (newPaper) {
        if (newPaper === 'A4') {
          this.width = 210
          this.height = 297
        }
        if (newPaper === 'A3') {
          this.width = 297
          this.height = 420
        }
        if (newPaper === 'A2') {
          this.width = 420
          this.height = 594
        }
        if (newPaper === 'A4横向') {
          this.width = 297
          this.height = 210
        }
        if (newPaper === 'A3横向') {
          this.width = 420
          this.height = 297
        }
        if (newPaper === 'A2横向') {
          this.width = 594
          this.height = 420
        }
        this.changePaper()
      }
    }
  },
  created() {
    const model = window.localStorage.getItem('kd.print.model')
    const data = window.localStorage.getItem('kd.print.data')
    this.model = model
    this.data = JSON.parse(data)
  },
  methods: {
    changeWH() {
      this.changePaper()
      this.paper = null
    },
    changePaper() {
      const style = JSON.parse(JSON.stringify(this.style))
      style.width = this.width + 'mm'
      style['min-height'] = this.height + 'mm'
      this.style = style
    },
    print() {
      this.printing = true
      const oStyle = JSON.parse(JSON.stringify(this.style))
      const style = JSON.parse(JSON.stringify(this.style))
      style.margin = null
      style['box-shadow'] = null
      style.padding = null
      this.style = style
      this.$nextTick(() => {
        window.print()
        this.style = oStyle
        this.printing = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
