<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('100089')}}：</label>
        <Select
          v-model="productname"
          label-in-value
          clearable
          filterable
          remote
          :remote-method="remoteMethod1"
          :loading="loading1"
          class="searchSelect"
        >
          <Option
            v-for="(item,index) in products"
            :value="item.code"
            :key="index"
          >{{ item.name }}({{item.code}})</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('900934')}}：</label>
        <Select v-model="ordertype" label-in-value clearable class="searchSelect">
          <Option
            v-for="(item,index) in ordertypes"
            :value="item.workordertype"
            :key="index"
          >{{ item.workordername }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('900053')}}：</label>
        <Input class="searchInput" type="text" v-model="orderno" />
      </div>

      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="print()"
        >{{$t('100077')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
        @on-selection-change="handleSelection"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            :page-size="pagesize"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>

    <Modal
      class="newModalClass"
      :title="$t('100077')"
      v-model="printmodal"
      :styles="{width:'400px'}"
    >
      <div class="modal_body" style="height:200px;overflow:auto;" id="print">
        <div class="printCode">
          <div v-for="(item,index) in selection" :key="index">
            <div :id="'qrcode'+index" style="float:left;margin-bottom:10px;"></div>
            <div class="sn_no">{{item.sn}}</div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="printmodal = false">{{$t('1033')}}</Button>
        <Button type="primary" size="large" @click="doprint()">{{$t('100077')}}</Button>
      </div>
    </Modal>

    <!-- 打印插件 -->
    <Modal
      class="newModalClass"
      :title="$t('5500098')"
      v-model="downloadexe"
      :styles="{width:'700px'}"
    >
      <div class="modal_body" style="width:700px!important;padding:0 20px;">
        <div style="width:660px;padding-left:5px;">
          <div>
            <div class="filter">
              <a
                href="/static/lodop/CLodop_Setup_for_Win32NT.exe"
              >{{$t('5500099')}}:CLodop_Setup_for_Win32NT.exe</a>
              <br />
              <a href="/static/lodop/install_lodop32.exe">{{$t('5500099')}}:install_lodop32.exe</a>
              <br />
              <a href="/static/lodop/install_lodop64.exe">{{$t('5500099')}}:install_lodop64.exe</a>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request';
import QRCode from 'qrcodejs2';
import { getLodop } from '../../../static/Clodop/LodopFuncs';
import { mapState } from 'vuex';

export default {
    data () {
        return {
            loading1: false,
            downloadexe: false,
            orderno: '', // 工单
            productname: '', // 产品
            number: '', // 数量
            datetime: '', // 预计生成日期
            no: '', // 序号
            qrcode: '', // 二维码

            products: [], // 产品列表
            ordertypes: [],
            ordertype: '', // 工单类型
            orderno: '', // 工单
            printmodal: false,
            detailobj: '',

            total: 0,
            page: 1,
            pagesize: 10,
            tableData: [],
            tableColumns: [
                {
                    type: 'selection',
                    width: 60
                },
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: '70px'
                },
                {
                    title: this.$t('100089'),
                    key: 'productCode'
                },
                {
                    title: this.$t('900934'),
                    key: 'woType'
                },
                {
                    title: this.$t('900053'),
                    key: 'wo'
                },
                {
                    title: this.$t('1950517'),
                    key: 'qty'
                },
                {
                    title: this.$t('5500239'),
                    key: 'produceTime'
                },
                {
                    title: this.$t('1008'),
                    key: 'sn'
                },
                {
                    title: this.$t('5500240'),
                    key: 'printTime'
                }
            ],
            selection: [],
            serverIP: '' // IP地址
        };
    },
    computed: {
        ...mapState(['user'])
    },
    created () {
        this.iniproducts('');
        this.getwoType();
        this.tosearch();
    },
    methods: {
        iniproducts (name) {
            var params = {
                name: name,
                count: 50
            };
            axios
                .request({
                    url: '/config/ProjectProduct/GetProductsByCode',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.products = res.data.data;
                    } else {
                        this.products = [];
                    }
                });
        },
        remoteMethod1 (name) {
            if (name !== '') {
                this.loading1 = true;
                setTimeout(() => {
                    this.loading1 = false;
                    this.iniproducts(name);
                }, 200);
            } else {
                this.iniproducts('');
            }
        },
        getwoType () {
            axios
                .request({
                    url: '/acc/AppAssemb/WorkOrder',
                    method: 'get'
                })
                .then((res) => {
                    this.ordertypes = [];
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.ordertypes = res.data.data;
                    }
                });
        },
        tosearch () {
            this.page = 1;
            this.pagesize = 10;
            this.search();
        },
        search () {
            var params = {
                productCode: this.productname, // 产品编号
                woType: this.ordertype, // 工单类型,
                wo: this.orderno, // type,
                page: this.page,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/acc/Snlist/Getlist',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    this.total = 0;
                    this.tableData = [];
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.total = res.data.total;
                        this.tableData = res.data.data;
                    }
                });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData = this.search();
        },
        handleSelection (e) {
            this.selection = e;
        },
        print () {
            if (this.selection.length === 0) {
                this.$Message.error(this.$t('1017'));
                return false;
            }
            // this.orderno = this.detailobj.wo // 工单
            // this.productname = this.detailobj.productCode// 产品
            // this.number = this.detailobj.qty// 数量
            // this.datetime = this.detailobj.produceTime// 预计生成日期
            // this.no = this.detailobj.sn // 序号
            this.printmodal = true;
            // 获取前端路径
            this.getURL();
        },
        getURL () {
            var _this = this;
            var projectid = _this.user.projectId;

            axios
                .request({
                    url: '/config/DbNameConfig/GetConfig?projectId=' + projectid,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        _this.serverIP = res.data.data.serverIP;
                        _this.selection.forEach((item, index) => {
                            _this.$nextTick(() => {
                                var qrcode =
                  res.data.data.serverIP + '/#/mtsSearch?sn=' + item.sn;
                                _this.initqrcode(qrcode, 'qrcode' + index);
                            });
                        });
                    }
                });
        },
        initqrcode (qr_code, elid) {
            document.getElementById(elid).innerHTML = '';
            let qrcode = new QRCode(elid, {
                width: 100,
                height: 100,
                text: qr_code
            });
        },
        doprint () {
            let LODOP = getLodop();
            if (LODOP === undefined) {
                this.downloadexe = true;
            } else {
                this.printmodal = false;
                LODOP.PRINT_INIT(''); // 初始化在循环外
                // LODOP.SET_PRINT_PAGESIZE(1, 300, 500, "");
                var ids = [];
                for (var i = 0; i < this.selection.length; i++) {
                    LODOP.NewPage();
                    LODOP.ADD_PRINT_BARCODE(
                        10,
                        10,
                        80,
                        80,
                        'QRCode',
                        this.serverIP + '/#/mtsSearch?sn=' + this.selection[i].sn
                    ); // 二维码打印
                    LODOP.ADD_PRINT_TEXT(35, 90, 100, 40, this.selection[i].sn);
                    ids.push(this.selection[i].id);
                }
                // LODOP.PREVIEW();
                LODOP.PRINT(); // 直接打印
                // 更新打印次数
                this.updatePrintCount(ids);
            }
        },
        updatePrintCount (ids) {
            var data = {
                type: 1,
                ids: ids
            };
            axios
                .request({
                    url: '/acc/AppAssemb/PrintCount',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    this.search();
                    console.log(res);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.printContent {
  float: left;
  margin-right: 10px;
  .title {
    text-align: left;
    font-weight: bold;
    display: inline-block;
    margin: 5px 0px;
  }
}
.printCode {
  float: left;
}
.sn_no {
  display: inline-block;
  margin: 40px 0px 0px 10px;
  float: left;
}
</style>
