<style lang="less">
.em-info-header {
  height: 140px;
  width: 85%;
  margin: 23px auto;
}
.header-img-responsive {
  display:block;
  max-width: 100%;
  width: 94%;
  height: 55%;
  margin: 23px auto;
}
.info-chickbox{
  height: 14px;
  width: 14px;
  margin: 69px 16px;
}
.info-row{
  margin-top: 6px;
}
</style>
<template>
  <div class="dialogVisible">
    <Modal
      v-model="dialogVisible"
      title="环境监测失败"
      width="400"
      @on-ok="dialogVisible = false">
      <div v-html="lodopHTMLData"></div>
      <div slot="footer"></div>
    </Modal>
   <!--<div v-html="employmentInfo"></div>-->
<!--    &lt;!&ndash;<i-button type="primary" @click="printPreview(0)">直接打印</i-button>-->
    <!--<i-button type="primary" @click="printPreview(1)">打印预览</i-button>
    <i-button type="primary" @click="printPreview(2)">打印维护</i-button>
    <i-button type="primary" @click="printPreview(3)">打印设计</i-button>-->
    <div>
      <Modal v-model="listViewData" width="45%"  title="请选择打印信息">
        <div>
          <Tabs value="name1">
            <TabPane label="首页" name="name1">
              <div style="font-size: 16px;">
                <Row>
                  <Checkbox v-model="all" @on-change="handleSelectAll">全选</Checkbox>
                </Row>
                <Row type="flex" justify="center" style="margin-top: 5px">
                  <h3>就业创业证基本信息</h3>
                </Row>
                <Row type="flex" justify="end" style="border: 2px solid #e8eaec;margin-top: 10px;">
                  <Col span="3" >
                    <Checkbox v-model="emInfo" class="info-chickbox" ></Checkbox>
                  </Col>
                  <Col span="4" >
                    <img  class="header-img-responsive em-info-header"/>
                  </Col>
                  <Col span="16" offset="1" class="info" style="margin: 15px auto">
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4" >姓名:</Col>
<!--                      <Col span="8">{{employmentInfo.employmentInfo.aac003}}</Col>-->
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">身份证号:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.aac002}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">性别:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.aac004}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">出生日期:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.aac006}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">民族:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.aac005}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">发证日期:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.acc0mh}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">发证机构:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.acc0mj}}</Col>
                    </Row>
                    <Row type="flex" justify="start" class="info-row">
                      <Col span="4">证件编号:</Col>
                      <Col span="8">{{employmentInfo.employmentInfo.acc0m1}}</Col>
                    </Row>
                  </Col>
                </Row>
                <div>
                  <Row>
                    <Row type="flex" justify="center" style="margin-top: 20px">
                      <h3>户籍性质、户籍地址及变更情况</h3>
                    </Row>
                    <Row style="margin-top: 15px">
                      <Table border ref="selection1" :columns="columns1" :data="data1" @on-selection-change="onSelectData1"></Table>
                    </Row>
                  </Row>
                  <Row>
                    <Row type="flex" justify="center" style="margin-top: 20px">
                      <h3>常住地址及变更情况</h3>
                    </Row>
                    <Row style="margin-top: 15px">
                      <Table border ref="selection2" :columns="columns2" :data="data2" @on-selection-change="onSelectData2"></Table>
                    </Row>
                  </Row>
                </div>
                <Row type="flex" justify="end" style="margin-top: 20px">
                  <Col span="2">
                    <Button type="cancel" @click="listViewData=false">取消</Button>
                  </Col>
                  <Col span="2">
                    <Button type="primary" @click="LodopTest (1,3)">打印</Button>
                  </Col>
                </Row>
              </div>
            </TabPane>
            <TabPane label="第二页" name="name2">
              <div style="font-size: 16px;">
                <Row>
                  <Row type="flex" justify="center" style="margin-top: 20px">
                    <h3>学历及变更情况</h3>
                  </Row>
                  <Row style="margin-top: 15px">
                    <Table border ref="selection3" :columns="columns3" :data="data3"  @on-selection-change="onSelectData3"></Table>
                  </Row>
                </Row>
                <Row>
                  <Row type="flex" justify="center" style="margin-top: 20px">
                    <h3>职业资格、专业技术职务及变更情况</h3>
                  </Row>
                  <Row style="margin-top: 15px">
                    <Table border ref="selection4" :columns="columns4" :data="data4"  @on-selection-change="onSelectData4"></Table>
                  </Row>
                </Row>
                <Row type="flex" justify="end" style="margin-top: 20px">
                  <Col span="2">
                    <Button type="cancel" @click="listViewData=false">取消</Button>
                  </Col>
                  <Col span="2">
                    <Button type="primary" @click="LodopTest (2,3)">打印</Button>
                  </Col>
                </Row>
              </div>
            </TabPane>
<!--           <TabPane label="标签三" name="name3">标签三的内容</TabPane>-->
          </Tabs>
        </div>
        <div slot="footer">
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import { getLodop } from './LodopFuncs'
export default {
  name: 'print',
  props: {
    employmentInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    employmentInfo (val) {
      this.employmentInfo = val
      // 数据初始化
      if (this.employmentInfo.permanentAddress.dataList != null) {
        this.data1.length = 0
        let list = Array.from(this.employmentInfo.permanentAddress.dataList)
        list.forEach((value, index) => {
          value['row'] = index
          value['_checked'] = true
          this.data1.push(value)
        })
      }
      if (this.employmentInfo.address.dataList != null) {
        this.data2.length = 0
        let list = Array.from(this.employmentInfo.address.dataList)
        list.forEach((value, index) => {
          value['row'] = index
          value['_checked'] = true
          this.data2.push(value)
        })
      }
      if (this.employmentInfo.education.dataList != null) {
        this.data3.length = 0
        let list = Array.from(this.employmentInfo.education.dataList)
        list.forEach((value, index) => {
          value['row'] = index
          value['_checked'] = true
          this.data3.push(value)
        })
      }
      if (this.employmentInfo.job.dataList != null) {
        this.data4.length = 0
        let list = Array.from(this.employmentInfo.job.dataList)
        list.forEach((value, index) => {
          value['row'] = index
          value['_checked'] = true
          this.data4.push(value)
        })
      }
    }
  },
  data () {
    return {
      dialogVisible: false, // 环境监测对话框展示/隐藏
      lodopHTMLData: '', // 环境监测对话框内容
      listViewData: false,
      all: true,
      emInfo: true,
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          width: 100,
          align: 'center',
          key: 'aac071'
        },
        {
          title: '户籍性质',
          width: 100,
          align: 'center',
          key: 'aac009'
        },
        {
          title: '详细地址',
          align: 'center',
          key: 'aac010'
        }
      ],
      data1: [
        {
          aac071: '测试数据1-1',
          aac009: '测试数据1-2',
          aac010: '测试数据1-3',
          row: 0,
          _checked: true
        },
        {
          aac071: '测试数据2-1',
          aac009: '测试数据2-2',
          aac010: '测试数据2-3',
          row: 1,
          _checked: true
        },
        {
          aac071: '测试数据3-1',
          aac009: '测试数据3-2',
          aac010: '测试数据3-3',
          row: 2,
          _checked: true
        }
      ],
      columns2: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          width: 100,
          align: 'center',
          key: 'aac071'
        },
        {
          title: '详细地址',
          align: 'center',
          key: 'bab305'
        }
      ],
      data2: [
        {
          aac071: '测试数据a-1',
          bab305: '测试数据a-2',
          row: 0,
          _checked: true
        },
        {
          aac071: '测试数据b-1',
          bab305: '测试数据b-2',
          row: 1,
          _checked: true
        },
        {
          aac071: '测试数据c-1',
          bab305: '测试数据c-2',
          row: 2,
          _checked: true
        },
        {
          aac071: '测试数据d-1',
          bab305: '测试数据d-2',
          row: 3,
          _checked: true
        },
        {
          aac071: '测试数据e-1',
          bab305: '测试数据e-2',
          row: 4,
          _checked: true
        }
      ],
      columns3: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          width: 100,
          align: 'center',
          key: 'aac071'
        },
        {
          title: '毕业于何校何专业',
          align: 'center',
          key: 'aac180'
        },
        {
          title: '学历',
          width: 100,
          align: 'center',
          key: 'aac011'
        },
        {
          title: '备注',
          width: 100,
          align: 'center',
          key: 'aae013'
        }
      ],
      data3: [
      ],
      columns4: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          width: 100,
          key: 'aac071'
        },
        {
          title: '职业资格、专业技术职务名称与等级',
          align: 'center',
          key: 'acc0m5'
        },
        {
          title: '备注',
          width: 100,
          align: 'center',
          key: 'aae013'
        }
      ],
      data4: [
      ]

    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection1.selectAll(status)
      this.$refs.selection2.selectAll(status)
      this.$refs.selection3.selectAll(status)
      this.$refs.selection4.selectAll(status)
      this.emInfo = status
    },
    onSelectData1 (val) {
      for (var k = 0; k < this.data1.length; k++) {
        this.data1[k]['_checked'] = false
      }
      for (var i = 0; i < this.data1.length; i++) {
        for (var j = 0; j < val.length; j++) {
          if (this.data1[i]['row'] === val[j]['row']) {
            this.data1[i]['_checked'] = true
          }
        }
      }
    },
    onSelectData2 (val) {
      for (var k = 0; k < this.data2.length; k++) {
        this.data2[k]['_checked'] = false
      }
      for (var i = 0; i < this.data2.length; i++) {
        for (var j = 0; j < val.length; j++) {
          if (this.data2[i]['row'] === val[j]['row']) {
            this.data2[i]['_checked'] = true
          }
        }
      }
    },
    onSelectData3 (val) {
      for (var k = 0; k < this.data3.length; k++) {
        this.data3[k]['_checked'] = false
      }
      for (var i = 0; i < this.data3.length; i++) {
        for (var j = 0; j < val.length; j++) {
          if (this.data3[i]['row'] === val[j]['row']) {
            this.data3[i]['_checked'] = true
          }
        }
      }
    },
    onSelectData4 (val) {
      for (var k = 0; k < this.data4.length; k++) {
        this.data4[k]['_checked'] = false
      }
      for (var i = 0; i < this.data4.length; i++) {
        for (var j = 0; j < val.length; j++) {
          if (this.data4[i]['row'] === val[j]['row']) {
            this.data4[i]['_checked'] = true
          }
        }
      }
    },
    listPrintInfoView () {
      this.listViewData = true
    },
    CreateOneFormPage () {
      LODOP.PRINT_INITA(-8, -12, 530, 750, '就业创业证首页')
      LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
      LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='http://imgdl.tripln.top/webhdfs/v1/printTemplate/就业证首页_9584328769.jpeg?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0'>")
      LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '139.96mm')
      LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '197.91mm')
      LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW', true)
      if (this.emInfo) {
        LODOP.ADD_PRINT_TEXT(50, 293, 175, 25, this.employmentInfo.employmentInfo.aac003)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.ADD_PRINT_TEXT(317, 137, 175, 25, this.employmentInfo.employmentInfo.acc0m1)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.ADD_PRINT_TEXT(85, 293, 175, 25, this.employmentInfo.employmentInfo.aac002)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.ADD_PRINT_TEXT(119, 293, 175, 25, this.employmentInfo.employmentInfo.aac004)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.ADD_PRINT_TEXT(153, 293, 175, 25, this.employmentInfo.employmentInfo.aac006)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.ADD_PRINT_TEXT(187, 293, 175, 25, this.employmentInfo.employmentInfo.aac005)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        var aae036 = this.employmentInfo.employmentInfo.aae036
        var aae036Array = aae036.split('-')
        LODOP.ADD_PRINT_TEXT(218, 308, 50, 25, aae036Array[0])
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
        LODOP.ADD_PRINT_TEXT(218, 379, 40, 25, aae036Array[1])
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
        LODOP.ADD_PRINT_TEXT(218, 439, 40, 25, aae036Array[2])
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
        LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
        LODOP.ADD_PRINT_TEXT(256, 293, 175, 25, this.employmentInfo.employmentInfo.acc0mj)
        LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 13)
      }
      // 户籍性质、户籍地址及变更情况
      this.data1.forEach((value, index) => {
        if (value['_checked'] === true) {
          var row = value['row']
          var top = 467 + row * 25
          LODOP.ADD_PRINT_TEXT(top, 42, 78, 20, value['aac071'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 109, 60, 20, value['aac009'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
          LODOP.ADD_PRINT_TEXT(top, 174, 315, 20, value['aac010'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        }
      })
      // 常住地址LODOP.NewPageA();
      this.data2.forEach((value, index) => {
        if (value['_checked'] === true) {
          var row = value['row']
          var top = 593 + row * 25
          LODOP.ADD_PRINT_TEXT(top, 42, 78, 20, value['aac071'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 110, 380, 20, value['bab305'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        }
      })
    },
    CreateTwoFormPage () {
      LODOP.PRINT_INITA(-8, -12, 530, 750, '就业创业证第二页')
      LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
      LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='http://imgdl.tripln.top/webhdfs/v1/printTemplate/就业证第二页_9308825481.jpeg?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0'>")
      LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '139.96mm')
      LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '197.91mm')
      LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW', true)
      // 学历
      this.data3.forEach((value, index) => {
        if (value['_checked'] === true) {
          var row = value['row']
          var top = 86 + row * 25
          LODOP.ADD_PRINT_TEXT(top, 42, 78, 20, value['aac071'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 109, 235, 20, value['aac180'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 343, 78, 20, value['aac011'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 421, 78, 20, value['aae013'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        }
      })
      // 职业资格
      this.data4.forEach((value, index) => {
        if (value['_checked'] === true) {
          var row = value['row']
          var top = 225 + row * 25
          LODOP.ADD_PRINT_TEXT(top, 42, 78, 20, value['aac071'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 109, 315, 20, value['acc0m5'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
          LODOP.ADD_PRINT_TEXT(top, 421, 78, 20, value['aae013'])
          LODOP.SET_PRINT_STYLEA(0, 'FontName', '新宋体')
        }
      })
    },
    async LodopTest (page, type) {
      this.LODOP = getLodop() // 获取Lodop(必须写在下面的计时器之前)
      let num = 1 // 存储计时器走了几次
      const interval = setInterval(() => {
        if (lodopHTMLData === '') {
          num++
        } else {
          //  这里是插件异常,且弹框会弹出,所以要跳出计时器,不执行打印预览代码
          lodopHTMLData = ''
          clearInterval(interval)
        }
        if (num >= 5) {
          // 这里置0是为了防止下面的代码在clearInterval之前执行时间超过100毫秒而走了下一次循环
          num = 0
          // 创建打印页面
          if (page === 1) {
            this.CreateOneFormPage()
          }
          if (page === 2) {
            this.CreateTwoFormPage()
          }
          if (type === 0) {
            LODOP.PRINT() // 直接打印
          }
          if (type === 1) {
            LODOP.PREVIEW() // 打印预览
          }
          if (type === 2) {
            LODOP.PRINT_SETUP() // 打印维护
          }
          if (type === 3) {
            LODOP.PRINT_DESIGN() // 打印设计
          }
          // 这里置空是为了防止此变量在下次被赋值之前有值(因为用l此变量判断值是否为空)
          lodopHTMLData = ''
          clearInterval(interval)
        }
      }, 100)
    }
  },
  mounted () {
    console.log(this.employmentInfo, 'companyCodecompanyCode')
    const _this = this
    window.flagLodop = false
    window.lodopHTMLData = ''
    let value = ''
    // 监听window的属性flagLodop是否变化
    Object.defineProperty(window, 'flagLodop', {
      get () {
        return value
      },
      set (newVal) {
        _this.lodopHTMLData = lodopHTMLData // 这里的lodopHTMLData是从lodop插件的LodopFuncs.js中赋值的
        _this.dialogVisible = true
        value = newVal
      }
    })
  }
}
</script>
