<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" @on-change="searchMeterial"/>
      </div>
      <div class="filter">
        <label>{{$t('920160')}}：</label>
        <Select v-model="pname" filterable label-in-value clearable class="searchSelect">
          <Option
            v-for="item in plist"
            :value="item.name"
            :key="item.id"
          >{{ item.name }} </Option>
        </Select>
      </div>
      <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
          <div class="filter">
            <label>{{$t('900933')}}：</label>
            <Select v-model="merial" filterable label-in-value clearable class="searchSelect">
              <Option
                v-for="(item,index) in meriallist"
                :value="item.pn"
                :key="index"
              >{{ item.pn }} </Option>
            </Select>
          </div>
      </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>
      <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </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;margin-right:40px;" id="print">
        <div class="printCode">
          <div v-for="(item,index) in selection" :key="index" style="margin:10px 0px;">
            <div :id="'qrcode'+index" style="float:left;margin-bottom:10px;" ></div>
            <div class="sn_no">
              <p>{{$t('600647')}}：{{item.number}}</p>
            </div>
            <div style="margin-top:30px;">
              <p>{{$t('900337')}}：{{item.wo}}</p>
              <p>{{$t('1950522')}}：{{item.batch}}</p>
              <p>{{$t('920160')}}：{{item.name}}</p>
              <p>{{$t('600065')}}：{{item.specification}}</p>
            </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 JsBarcode from 'jsbarcode';
import QRCode from 'qrcodejs2';
import { getLodop } from '../../../static/Clodop/LodopFuncs';
import { mapState } from 'vuex';

export default {
    data () {
        return {
            loading1: false,
            morecondition: false, // 条件
            downloadexe: false,
            orderno: '', // 工单
            productname: '', // 产品
            number: '', // 数量
            datetime: '', // 预计生成日期
            no: '', // 序号
            qrcode: '', // 二维码
            pname: "",
            plist: [],
            merial:'',//料号
            meriallist:'',//物料列表

            products: [], // 产品列表
            productname: '', // 工单名称
            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: 'workordertype'
                },
                {
                    title: this.$t('900053'),
                    key: 'wo'
                },
                {
                    title: this.$t('900933'),
                    key: 'pn'
                },
                {
                    title: this.$t('920160'),
                    key: 'name'
                },
                {
                    title: this.$t('600065'),
                    key: 'specification'
                },
                {
                    title: this.$t('1950522'),
                    key: 'batch'
                },
                {
                    title: this.$t('300084'),
                    key: 'number'
                },
                {
                    title: this.$t('5500240'),
                    key: 'printNumber'
                }
            ],
            selection: []
        };
    },
    computed: {
        ...mapState(['user'])
    },
    created () {
        this.iniproducts('');
        this.loadMaterial('')
        this.getwoType();
        this.tosearch();
    },
    methods: {
        searchMeterial(){
          this.loadMaterial();
        },
        // 加载全部品名
        loadMaterial() {
          var data = {
            wo:this.orderno,
            name:''
          }
          axios
            .request({
              url: "acc/AppAssemb/GetAllName",
              data,
              method: "post",
            })
            .then((res) => {
              this.plist = []
              this.meriallist = []
              if (res.data.ret === 1) {
                this.plist = res.data.data;
                this.meriallist = res.data.data;
              } else {
                this.$Message.error(this.$t(res.data.msg));
              }
            });
        },
        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;
                    }
                });
        },
        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 () {
            this.selection = []
            var data = {
                productCode: this.productname, // 产品编号
                woType: this.ordertype, // 工单类型,
                wo: this.orderno, // type,
                name:this.pname,
                page: this.page,
                pn:this.merial,
                pagesize: this.pagesize
            };
            axios
                .request({
                    url: '/acc/AppAssemb/GetAssistMaterialsList',
                    data,
                    method: 'post'
                })
                .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(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData = this.search(this.page, this.pagesize);
        },
        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.selection.forEach((item, index) => {
                this.initqrcode(item.batch, 'qrcode' + index);
            });
        },
        initqrcode (qr_code, elid) {
            document.getElementById(elid).innerHTML = '';
            let qrcode = new QRCode(elid, {
                width: 60,
                height: 60,
                text: qr_code
            });
        },
        doprint () {
            let LODOP = getLodop();
            if (LODOP === undefined) {
                this.downloadexe = true;
            } else {
                this.printmodal = false;
                LODOP.PRINT_INIT('批次领料打印');
                LODOP.SET_PRINT_STYLE('FontSize', 8);
                // 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,60,60,'QRCode',this.selection[i].batch); // 二维码打印
                    LODOP.ADD_PRINT_TEXT(30, 70, 200, 15, this.$t('300084')+'：'+this.selection[i].number);
                    LODOP.ADD_PRINT_TEXT(65, 10, 200, 15, this.$t('900337')+'：'+this.selection[i].wo);
                    LODOP.ADD_PRINT_TEXT(80, 10, 200, 15, this.$t('1950522')+'：'+this.selection[i].batch);
                    LODOP.ADD_PRINT_TEXT(95, 10, 200, 15, this.$t('920160')+'：'+this.selection[i].name);
                    LODOP.ADD_PRINT_TEXT(110, 10, 200, 15, this.$t('600065')+'：'+this.selection[i].specification);
                    ids.push(this.selection[i].id);
                }
                // LODOP.PREVIEW();
                LODOP.PRINT(); // 直接打印
                // 更新打印次数
                this.updatePrintCount(ids);
            }
        },
        updatePrintCount (ids) {
            var data = {
                type: 2,
                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;
  // margin-left: 60px;
}
.sn_no {
  display: inline-block;
  margin: 25px 0px 0px 10px;
}
</style>
