<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div>
            <div class="filter">
            <label>Duns：</label>
            <Select v-model="supplierduns" label-in-value clearable filterable class="searchSelect">
                <Option v-for="item in dunsList" :value="item.name" :key="item.id">{{ item.name }}</Option>
            </Select>
            </div>
            <div class="filter">
            <label>{{$t('900933')}}：</label>
            <Select v-model="partname" label-in-value clearable filterable class="searchSelect">
                <Option v-for="item in partList" :value="item.pn" :key="item.id" @click.native="getMoreParams(item)">{{ item.pn + "(" + item.name +")" }}</Option>
            </Select>
            </div>
            <div class="filter">
            <label>{{$t('600532')}}：</label>
            <DatePicker v-model="datetime" type="date" placeholder="Select date" class="searchInput" readonly></DatePicker>
            </div>
            <div class="filter">
            <label>Traceability：</label>
            <Input class="searchInput" type="text" v-model="traceability" />
            </div>
        </div>
        <div>
            <div class="filter">
            <label>Quantity：</label>
            <Input class="searchInput" type="text" v-model="quantity" />
            </div>
             <div class="filter">
            <label>Die/matrix：</label>
            <Input class="searchInput" type="text" v-model="matrix" />
            </div>
             <div class="filter">
            <label>Steel DUNS：</label>
            <Input class="searchInput" type="text" v-model="steelduns" />
            </div>
             <div class="filter">
            <label>Steel Route：</label>
            <Input class="searchInput" type="text" v-model="steelroute" />
            </div>
        </div>
        <div class="divborder_batchItemLabel">
          <div class="filter">
            <label>Remark：</label>
            <Input type="textarea" v-model="remark" :autosize="{maxRows:3,minRows: 3}" class="searchInput MaxWidth"/>
          </div>
        </div>
         <div class="searchBtn">
        <Button type="primary" class="fourWord intervalRight" icon="ios-bookmark-outline" @click="getMark()">{{$t('5500004')}}</Button>
        <Button type="warning" class="twoWord" icon="ios-print-outline" v-print="'#printTest'">{{$t('100077')}}</Button>
         </div>
    </div>
    <div class="divborder" v-show="showqrcode">
        <!--startprint-->
        <div id="printTest">
            <h3 class="title" v-text="toptitle" :style="{'font-size': '20px'}">Supplier Name/Logo or other information</h3>

            <div id="barcodeTarget" class="barcodeTarget" :style="{width:'200px',height:'200px',display:'inline-block',float:'left'}"></div>
            <div class="contenttext">
                <div><span class="detailtext">Part Name</span>：<span v-text="partname1"></span></div>
                <div><span class="detailtext">Supplier DUNS</span>：<span v-text="supplierduns1"></span></div>
                <div><span class="detailtext">Traceability</span>：<span v-text="traceability1"></span></div>
                <div><span class="detailtext">Quantity</span>：<span v-text="quantity1"></span></div>
                <div><span class="detailtext">Die/matrix</span>：<span v-text="matrix1"></span></div>
                <div><span class="detailtext">Steel DUNS</span>：<span v-text="steelduns1"></span></div>
                <div><span class="detailtext">Steel Route</span>：<span v-text="steelroute1"></span></div>
                <div><span class="detailtext">Remark</span>：<span v-text="remark1"></span></div>
            </div>
        </div>
        <!--endprint-->
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { barcode } from '../../../assets/js/jquery-barcode'
import axios from '@/libs/api.request'
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            dunsList: [], // duns列表
            partList: [], // 料号列表
            datetime: moment(new Date().getTime()).format('YYYY-MM-DD'),
            showqrcode: false,
            toptitle: '',
            partname: '',
            supplierduns: '',
            traceability: '',
            quantity: '',
            matrix: '',
            steelduns: '',
            steelroute: '',
            barcodeValue: '',
            remark: '',
            partname1: '',
            supplierduns1: '',
            traceability1: '',
            quantity1: '',
            matrix1: '',
            steelduns1: '',
            steelroute1: '',
            barcodeValue1: '',
            remark1: ''
        }
    },
    created () {
        this.iniduns()
        this.inimaterials()
    },
    methods: {
        getMoreParams (data) {
            this.toptitle = data.supplier
        },
        iniduns () {
            this.axios.request({
                url: '/config/BussineseUser/GetSupplierDunsByUser',
                method: 'get'
            })
                .then(res => {
                    this.dunsList = res.data.data
                });
        },
        inimaterials () {
            this.axios.request({
                url: 'config/Material/GetMaterialList',
                method: 'get'
            })
                .then(res => {
                    this.partList = res.data.data
                });
        },
        getMark () {
            // 请求接口  赋值标题及二维码等详细信息
            if (this.supplierduns == '' || this.partname == '' || this.traceability == '' || this.quantity == '' || this.matrix == '' || this.steelduns == '' || this.steelroute == '') {
                this.$Message.error('请输入所有参数');
                return false;
            }
            let parameter = {
                partname: this.partname,
                supplierduns: this.supplierduns,
                traceability: this.traceability,
                quantity: this.quantity,
                matrix: this.matrix,
                steelduns: this.steelduns,
                steelroute: this.steelroute,
                date: this.datetime
            }
            axios
                .request({
                    url: '/qms/barcode/CreateDataMatrix',
                    data: parameter,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.barcodeValue = res.data.data
                        this.partname1 = this.partname
                        this.supplierduns1 = this.supplierduns
                        this.traceability1 = this.traceability
                        this.quantity1 = this.quantity
                        this.matrix1 = this.matrix
                        this.steelduns1 = this.steelduns
                        this.steelroute1 = this.steelroute
                        this.barcodeValue1 = this.barcodeValue
                        this.remark1 = this.remark
                        this.generateBarcode();
                        this.showqrcode = true
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        generateBarcode () {
            var value = this.barcodeValue;
            var btype = 'datamatrix';
            var renderer = 'bmp';

            var settings = {
                output: renderer,
                bgColor: '#FFFFFF',
                color: '#000000',
                barWidth: 1,
                barHeight: 200,
                moduleSize: 5,
                posX: 10,
                posY: 20,
                addQuietZone: 1
            };
            $('#barcodeTarget').html('').show().barcode(value, btype, settings);
        }

    }
}
</script>
<style lang="less" scoped>

.title{
    margin:20px 100px;
}
.qrcodebox{
    width: 200px;
    height: 200px;
    display: inline-block;
    float: left;
    margin-left:20px;
}
.contenttext{
    display: inline-block;
    font-size: 16px;
    height: 200px;
    margin-left: 50px;
    float:left;
}
.detailtext{
    font-weight: bold;
}
.divborder_batchItemLabel {
  padding: 0px;
  overflow: hidden;
  margin-bottom: 10px;
  height:98px;
}
</style>
