<template>
    <el-row>
        <el-card  style="background-color: #F5F7FA">
            <el-row class="toolbar" style="height:auto">
                <el-form  :model="addForm"  :rules="rules" ref="addForm" :inline="true">
                    <el-divider content-position="left"><i class="el-icon-document"></i> 货物信息 <el-tag type="info">流水号: {{addForm.serialnumber}}</el-tag></el-divider>
                    <el-row>
                        <el-col :span="6" v-if="false">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="serialnumber">
                                <el-input v-model="addForm.serialnumber" autocomplete="off" suffix-icon="el-icon-files"  disabled>
                                    <template slot="prepend">流&emsp;&emsp;水</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="waybill">
                                <el-input v-model="addForm.waybill" autocomplete="off"  suffix-icon="el-icon-document" clearable>
                                    <template slot="prepend">主&emsp;&emsp;单</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="billfhl">
                                <el-input v-model="addForm.billfhl" autocomplete="off"  suffix-icon="el-icon-document" clearable>
                                    <template slot="prepend">分&emsp;&emsp;单</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="totalpcs">
                                <el-input v-model.number="addForm.totalpcs" autocomplete="off"  suffix-icon="el-icon-files" clearable >
                                    <template slot="prepend">总&nbsp;件&nbsp;数</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="totalweight">
                                <el-input v-model="addForm.totalweight" autocomplete="off" suffix-icon="el-icon-files" clearable>
                                    <template slot="prepend">总&nbsp;重&nbsp;量</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="pcs">
                                <el-input v-model.number="addForm.pcs" autocomplete="off"  suffix-icon="el-icon-files" clearable >
                                    <template slot="prepend">入库件数</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="billweight">
                                <el-input v-model="addForm.billweight" autocomplete="off" suffix-icon="el-icon-files" clearable>
                                    <template slot="prepend">入库重量</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="feeweight">
                                <el-input v-model="addForm.feeweight" autocomplete="off"  suffix-icon="el-icon-files" clearable>
                                    <template slot="prepend">计费重量</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="packingid">
                                <el-input v-model="addForm.packingid" autocomplete="off"  suffix-icon="el-icon-files" clearable>
                                    <template slot="prepend">包裝类型</template>
                                </el-input>
                                <!--<div class="my-text-area">
                                    <div class="el-input-group__prepend prepand">包装类型</div>
                                    <el-select v-model="addForm.packingid"
                                               placeholder="包装类型"
                                               filterable
                                               default-first-option
                                               :filter-method="packgeOptionsFilter">
                                        <el-option
                                                v-for="item in packgeOptions"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="item.code">
                                            <span style="float: left">{{ item.code }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                                        </el-option>
                                    </el-select>
                                </div>-->
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth" prop="goodssize">
                                <el-tooltip class="item" effect="dark" content="单位:厘米,每行录入一个尺寸信息格式如:1x2x3x4(长x宽x高x件数),回车换行" placement="right">
                                    <div class="my-text-area">
                                        <div class="el-input-group__prepend prepand">尺&emsp;&emsp;寸</div>
                                        <el-input v-model="goodsSize"
                                                  type="textarea"
                                                  autosize
                                                  placeholder="请输入尺寸"
                                                  style="float: left;width:calc(100% - 89px)"
                                        >
                                        </el-input>
                                    </div>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="goodsvol">
                                <el-input v-model="addForm.goodsvol" autocomplete="off" suffix-icon="el-icon-files"  disabled>
                                    <template slot="prepend">入库体积</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="remark1">
                                    <div class="my-text-area">
                                        <div class="el-input-group__prepend prepand">备&emsp;&emsp;注</div>
                                        <el-input v-model="addForm.remark1"
                                                  type="textarea"
                                                  autosize
                                                  placeholder="备注信息"
                                                  style="float: left;width:calc(100% - 89px)"
                                        >
                                        </el-input>
                                    </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider content-position="left"><i class="el-icon-house"></i> 入库相关</el-divider>
                    <el-row>
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label=" " :label-width="formLabelWidth"  prop="area">-->
<!--                                <el-autocomplete-->
<!--                                        v-model="addForm.area"-->
<!--                                        :fetch-suggestions="areaQuerySearch"-->
<!--                                        placeholder="请输入库区编号"-->
<!--                                        :trigger-on-focus="false"-->
<!--                                        value-key = "areano"-->
<!--                                        clearable-->
<!--                                        highlight-first-item-->
<!--                                        style="width: 100%"-->
<!--                                >-->
<!--                                    <template slot="prepend">库&emsp;&emsp;区</template>-->
<!--                                    <template slot-scope="{ item }">-->
<!--                                        <div class="name" style="float: left">{{ item.areano }}</div>-->
<!--                                        <div class="addr" style="float: right">{{ item.areaname }}</div>-->
<!--                                    </template>-->
<!--                                </el-autocomplete>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="location">
                                <el-autocomplete
                                        v-model="addForm.location"
                                        :fetch-suggestions="locationQuerySearch"
                                        placeholder="请输入库位编号"
                                        :trigger-on-focus="false"
                                        value-key = "locationno"
                                        clearable
                                        highlight-first-item
                                        style="width: 100%"
                                >
                                    <template slot="prepend">库&emsp;&emsp;位</template>
                                    <template slot-scope="{ item }">
                                        <div class="name" style="float: left">{{ item.locationno }}</div>
                                        <div class="addr" style="float: right">{{ item.locationname }}</div>
                                    </template>
                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="licenseplate">
                                <el-input v-model="addForm.licenseplate" autocomplete="off" suffix-icon="el-icon-files" >
                                    <template slot="prepend">运输车辆</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="custcode">
                                <el-autocomplete
                                        v-model="addForm.custcode"
                                        :fetch-suggestions="crmQuerySearch"
                                        placeholder="请输入客户代码"
                                        :trigger-on-focus="false"
                                        value-key = "departmentid"
                                        clearable
                                        highlight-first-item
                                        style="width: 100%"
                                >
                                    <template slot="prepend">货主名称</template>
                                    <template slot-scope="{ item }">
                                        <div class="name" style="float: left">{{ item.departmentid }}</div>
                                        <div class="addr" style="float: right">{{ item.roleName }}</div>
                                    </template>
                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="opter">
                                <el-input v-model="addForm.opter" autocomplete="off"  disabled suffix-icon="el-icon-files">
                                    <template slot="prepend">经&nbsp;办&nbsp;人</template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
<!--                <el-row>
                        <el-col :span="7">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="house">
                                <el-input v-model="addForm.house" autocomplete="off"  style="width: 300px">
                                    <template slot="prepend">出入库仓库</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="opttime">
                                <el-input v-model="addForm.opttime" autocomplete="off"  style="width: 300px">
                                    <template slot="prepend">出入库时间</template>
                                </el-input>
                                <el-date-picker
                                        v-model="addForm.opttime"
                                        type="datetime" size="mini"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        style="width:300px"
                                        placeholder="选择出入库时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="station">
                                <el-input v-model="addForm.station" autocomplete="off"  style="width: 300px">
                                    <template slot="prepend">出入库场站</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                   </el-row>
-->
<!--                    <el-divider content-position="left"><i class="el-icon-mobile-phone"></i> 业务属性</el-divider>-->
<!--                    <el-row>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label=" " :label-width="formLabelWidth"  prop="transtype">-->
<!--                                <div class="my-text-area">-->
<!--                                    <div class="el-input-group__prepend prepand">交易类型</div>-->
<!--                                    <el-select v-model="addForm.transtype" placeholder="请选择交易类型"  autocomplete="off">-->
<!--                                        <el-option-->
<!--                                                v-for="item in options1"-->
<!--                                                :key="item.value"-->
<!--                                                :label="item.label"-->
<!--                                                :value="item.value">-->
<!--                                        </el-option>-->
<!--                                    </el-select>-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label=" " :label-width="formLabelWidth"  prop="goodstype">-->
<!--                                <div class="my-text-area">-->
<!--                                    <div class="el-input-group__prepend prepand">交易类型</div>-->
<!--                                    <el-select v-model="addForm.goodstype" placeholder="请选择出入库货物类型"  autocomplete="off">-->
<!--                                        <el-option-->
<!--                                                v-for="item in options"-->
<!--                                                :key="item.value"-->
<!--                                                :label="item.label"-->
<!--                                                :value="item.value">-->
<!--                                        </el-option>-->
<!--                                    </el-select>-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="8">-->
<!--                            <el-form-item label=" " :label-width="formLabelWidth"  prop="ietype">-->
<!--                                <div class="my-text-area">-->
<!--                                    <div class="el-input-group__prepend prepand">交易类型</div>-->
<!--                                    <el-select v-model="addForm.ietype" placeholder="出入库类型" size="mini">-->
<!--                                        <el-option label="出入库类型-进" value="I"></el-option>-->
<!--                                        <el-option label="出入库类型-出" value="E"></el-option>-->
<!--                                    </el-select>-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
                    <el-divider content-position="left"><i class="el-icon-picture-outline"></i>图像操作</el-divider>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label=" " :label-width="formLabelWidth"  prop="annex">
                                <el-input v-model="addForm.annex" autocomplete="off"  suffix-icon="el-icon-document" clearable>
                                    <template slot="prepend">图片地址</template>
                                </el-input>

                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-button-group style="float:right">
                                <el-button type="success" icon="el-icon-camera"  @click="imgdrawerVisible = true">入库图像采集</el-button>
                                <el-button type="warning" icon="el-icon-edit"  @click="otherDrawerVisible = true">其他入库信息</el-button>
                            </el-button-group>
                        </el-col>

<!--                        <el-col :span="8">-->
                            <!--                                <el-form-item label="" :label-width="formLabelWidth"  prop="status">-->
                            <!--                                    <el-input v-model="addForm.status" autocomplete="off"  style="width: 300px">-->
                            <!--                                        <template slot="prepend">状&emsp;&emsp;态</template>-->
                            <!--                                    </el-input>-->
                            <!--                                </el-form-item>-->
<!--                            <el-form-item label="" :label-width="formLabelWidth"  prop="status">-->
<!--                                <el-select v-model="addForm.status" placeholder="请选择状态" size="mini" style="width: 300px">-->
<!--                                    <el-option label="状态-失败" value="0"></el-option>-->
<!--                                    <el-option label="状态-成功" value="1"></el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                    </el-row>
<!--                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="custel">
                                <el-input v-model="addForm.custel" autocomplete="off"  style="width: 300px">
                                    <template slot="prepend">出入库客户联系电话</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="" :label-width="formLabelWidth"  prop="customer">
                                <el-input v-model="addForm.customer" autocomplete="off"  style="width: 300px">
                                    <template slot="prepend">出入库客户联系人姓名</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>-->
                </el-form>
            </el-row>
            <!--            搜索区域-->
            <el-row class="toolbar">
                <el-col :span="24">
                    <el-button type="success" icon="el-icon-download"  @click="batchAdd()">批量入库</el-button>
                    <el-button type="primary" icon="el-icon-right"  @click="nextBill()" style="float:right">下一票</el-button>
                </el-col>
            </el-row>
            <!--            列表区域-->
            <el-row>
                <el-table
                            :data="tableData"
                            border
                            @selection-change="trnSelectionChange"
                            :cell-style="{textAlign:'center'}"
                            style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                            show-summary
                            :summary-method="getSummaries"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
                    >
                    <el-table-column
                            type="selection"
                            :selectable="checkSelectable"
                            fixed="left"
                            width="55"
                    />
                    <el-table-column
                            fixed
                            prop="serialnumber"
                            label="流水号"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="waybill"
                            label="主单号"
                            width="120">
                        <template slot-scope="scope">
                            {{scope.row.waybill}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="waybill"
                            label="分单号"
                            width="120">
                        <template slot-scope="scope">
                            {{scope.row.billfhl}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pcs"
                            label="入库件数"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="billweight"
                            label="入库重量"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="feeweight"
                            label="计费重量"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="goodssize"
                            label="尺寸"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="goodsvol"
                            label="入库体积"
                            width="100">
                    </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="area"-->
<!--                                label="库区"-->
<!--                                width="60">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="location"
                                label="库位"
                                width="60">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="station"-->
<!--                                label="出入库场站"-->
<!--                                width="100">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="status"-->
<!--                                label="状态"-->
<!--                                width="80">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.status ==='0'">失败</span>-->
<!--                                <span v-if="scope.row.status ==='1'">成功</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="licenseplate"
                                label="运输车辆"
                                width="100">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="transtype"-->
<!--                                label="交易类型"-->
<!--                                width="100">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="custel"-->
<!--                                label="客户联系电话"-->
<!--                                width="140">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="customer"-->
<!--                                label="联系人姓名"-->
<!--                                width="100">-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="custcode"
                                label="客户代码"
                                width="80">
                        </el-table-column>
<!--                        <el-table-column-->
<!--                                prop="goodstype"-->
<!--                                label="货物类型"-->
<!--                                width="80">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="house"-->
<!--                                label="出入库仓库"-->
<!--                                width="100">-->
<!--                        </el-table-column>-->
<!--                        <el-table-column-->
<!--                                prop="ietype"-->
<!--                                label="类型"-->
<!--                                width="60">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.ietype ==='I'">进</span>-->
<!--                                <span v-if="scope.row.ietype ==='E'">出</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                        <el-table-column
                                prop="opter"
                                label="出入库经办人"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="opttime"
                                label="出入库时间"
                                width="140">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="160">
                            <template slot="header" slot-scope="scope">
                                <el-button type="success" icon="el-icon-check"  @click="applyAdd()">入&emsp;&emsp;库</el-button>
                            </template>
                            <template slot-scope="scope">
                                <el-row type="flex" justify="center">
                                    <Print :wmsInfo = "scope.row"></Print>
                                </el-row>
                                <el-row type="flex" justify="space-between">
                                    <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
                                    <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">移除</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-row>
<!--            <el-row style="margin-top: 10px" class="toolbar">-->
<!--                <el-pagination-->
<!--                        @size-change="handleSizeChange"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        :current-page="queryInfo.pageNum"-->
<!--                        :page-size="queryInfo.pageSize"-->
<!--                        :page-sizes="[10, 50, 100, 500]"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="total">-->
<!--                </el-pagination>-->
<!--            </el-row>-->
        </el-card>
        <el-drawer
                title="我是标题"
                :visible.sync="imgdrawerVisible"
                :with-header="false">
            <video width="100%" height="200" autoplay loop controls id="videos">
                <source src="/static/login/New-jumbo.mp4" type="video/mp4">
            </video>
            <el-row>
                <el-image
                        :src="imgBase64"
                        style="width: 200px; height: 200px"
                        fit="fill">
                    <div slot="error" class="image-slot">
                        未截图<i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </el-row>
            <el-button type="success" class="btns" @click="screenshot">一键截屏上传</el-button>
<!--            <el-upload-->
<!--                    class="upload-demo"-->
<!--                    drag-->
<!--                    action=""-->
<!--                    :headers="uploadHeaderObj"-->
<!--                    :on-success="handleUploadSuccess"-->
<!--                    :auto-upload="false"-->
<!--                    :on-change="submitUpload"-->
<!--                    ref="upload"-->
<!--            >-->
<!--                <i class="el-icon-upload avatar-uploader-icon"></i>-->
<!--                <div class="el-upload__text">将文件拖到此处，或<em>点击上传文件</em></div>-->
<!--                <div class="el-upload__tip" slot="tip">只能上传xml文件，且不超过2MB</div>-->
<!--            </el-upload>-->
<!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->

        </el-drawer>
        <el-drawer
                title="其他入库信息"
                :visible.sync="otherDrawerVisible"
                :with-header="false">
            <el-row style="margin-top:0;padding-top:0">
                <el-card shadow="always" >
                    <div slot="header" class="clearfix">
                        <span>随货文件</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <el-switch
                            v-model="addForm.hasFiles"
                            active-text="有随货文件"
                            inactive-text="无随货文件"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                    >
                    </el-switch>
                    <el-card shadow="always" style="margin-top:10px;" v-if="addForm.hasFiles">
                        <el-checkbox-group v-model="addForm.files" @change="handleCheckedfilessChange">
                            <el-checkbox v-for="filename in flieOptions" :label="filename" :key="filename">{{filename}}</el-checkbox>
                        </el-checkbox-group>
                    </el-card>
                </el-card>

            </el-row>
            <el-row>
                <el-card shadow="always" >
                    <div slot="header" class="clearfix">
                        <span>异常状况</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <el-switch
                            v-model="addForm.hasUnusual"
                            active-text="有异常"
                            inactive-text="无异常"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                    >
                    </el-switch>
                    <el-card shadow="always" style="margin-top:10px;" v-if="addForm.hasUnusual">
                        <el-checkbox-group v-model="addForm.unusuals" @change="handleCheckedfilessChange">
                            <el-checkbox v-for="op in unusualOptions" :label="op" :key="op">
                                {{op}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-card>
                </el-card>
            </el-row>
            <el-row>
                <el-card shadow="always" >
                    <div slot="header" class="clearfix">
                        <span>破损状况</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <el-card shadow="always" style="margin-top:10px;">
                        <el-checkbox-group v-model="addForm.damages" @change="handleCheckedfilessChange">
                            <el-checkbox v-for="op in damageOptions" :label="op" :key="op">
                                {{op}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-card>
                </el-card>
            </el-row>
            <el-row>
                <el-card shadow="always" >
                    <div slot="header" class="clearfix">
                        <span>特殊操作情况</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <el-card shadow="always" style="margin-top:10px;">
                        <el-checkbox-group v-model="addForm.sphCodes" @change="handleCheckedfilessChange">
                            <el-checkbox v-for="op in SPHOptions" :label="op.code" :key="op.code" border>
                                <template>
                                 ({{op.code}}){{op.desCn}}
                                </template>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-card>
                </el-card>
            </el-row>

        </el-drawer>
    </el-row>
</template>

<script>
    import {
        selectInventroyrecords,
        batchImpNewinventroyrecord,
        ediInventroyrecord,
        selectAreas,
        selectLocations,
        getSPHCode
    } from '../../api/consigner/station';
    import dateUtil from "@/utils/index"
    import jsutil from "@/common/js/util";
    import { getList as getCRMList } from '@/api/crm_api';
    import { loginedUserInfo } from '@/api/user';
    import html2canvas from 'html2canvas'
    import {uploadPath,upfileWithPost} from "../../api/technological";
    import packge from '@/api/nmms/packge'
    import unusualOP from '@/api/wms/unusualOptions'
    import damageOP from '@/api/wms/damageOptions'
    import Print from '@/components/Print'


    export default {
        name: "inventroyrecord",
        components:{Print},
        data() {
            var checkInputArea = (rule, value, callback) => {
                let err = {
                    name:'',
                    message:''
                }
                let _this = this
                let tempVol = 0
                if (!value) {
                    err  = new Error('体积信息必填')
                    return callback(err);
                }
                setTimeout(() => {
                    value = value.replaceAll('*','x')
                    var lineStr = value.replace('\r').split('\n')
                    lineStr.forEach(((v,index) => {
                        // eslint-disable-next-line no-useless-escape
                        var pattern = /^[0-9\.]+[xX][0-9\.]+[xX][0-9\.]+[xX][0-9\.]+$/;
                        if(!pattern.test(v)){
                            err  = new Error('行'+(index+1)+'的值:'+v+'的体积格式输入错误,格式为1x1x1x1支持小数点')
                            return callback(err);
                        }else {
                            const volV = this.multiply(v)
                            tempVol += volV
                        }
                    }))

                    console.log(err.name + '  '+ err.message)
                    callback();
                    if (err && err.message===''){
                        _this.addForm.goodsvol = (tempVol/1000000).toFixed(2)
                        _this.volAreatextMerge(lineStr)
                    }

                }, 200);
            };
            return {
                queryInfo: {
                    waybill:'',
                    serialnumber:'',
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 10,
                },
                total: 0,
                tableData:[],
                areaData:[],
                locationData:[],
                roles:[],
                imgBase64:'',
                imgUploadPath:uploadPath,
                uploadFileList:[],
                uploadHeaderObj: {
                    Authorization: window.sessionStorage.getItem("token"),
                },
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogApply: 'create',
                apply_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false
                },
                imgdrawerVisible: false,
                otherDrawerVisible: false,
                addForm: {
                    area: '',
                    feeweight: 0,
                    custel: '',
                    customer: '',
                    custcode: '',
                    goodstype: '运单',
                    house:'',
                    ietype:'I',
                    location:'',
                    opter:'',
                    opttime: '',
                    pcs: 0,
                    totalpcs:0,
                    serialnumber: '',
                    station: '',
                    status: '',
                    licenseplate: '',
                    transtype:'销售入库',
                    goodssize:'',
                    goodsvol:0,
                    waybill:'',
                    billfhl:'',
                    //随货文件
                    hasFiles:false,
                    hasUnusual:false,
                    unusuals:[],
                    files:[],
                    damages:[],
                    sphCodes:[],
                    billweight:0,
                    totalweight:0,
                    packingid:'',
                    remark:'',
                    remark1:'',
                    remark2:'',
                    remark3:'',
                    remark4:'',
                    remark5:'',
                    annex:''
                },
                packgeOptions:packge,
                options: [{
                    value: '板箱',
                    label: '货物类型-板箱'
                }, {
                    value: '运单',
                    label: '货物类型-运单'
                }, {
                    value: '托盘',
                    label: '货物类型-托盘'
                }],
                options1: [{
                    value: '采购入库',
                    label: '交易类型-采购入库'
                }, {
                    value: '生产入库',
                    label: '交易类型-生产入库'
                }, {
                    value: '销售入库',
                    label: '交易类型-销售入库'
                }],
                formLabelWidth: '5px',
                flieOptions:['报关单证','关封','运单','信封','保函','安检申报清单','随机文件','备案清单','放行通知书','货物运输条件鉴定书(磁化/化工品)','其他'],
                unusualOptions:unusualOP,
                damageOptions:damageOP,
                SPHOptions:[],
                rules: {
                    waybill:[
                        { pattern: /^[0-9\-]+$/, message: '主单号格式只支持数字与-符号' }
                    ],
                    billfhl:[
                        { pattern: /^[0-9A-Z]+$/, message: '分单号格式只支持数字与大写字母' }
                    ],
                    pcs: [
                            { required: true, message: '入库件数必填', trigger: 'blur' },
                            { type:"number", message: '件数必须为整数'}
                    ],
                    billweight: [
                        {  required: true, message: '入库重量为必填项', trigger: 'blur' },
                        // eslint-disable-next-line no-useless-escape
                        { pattern: /^([0-9]+)(\.\d{2})?$/, message: '只允许输入数字与小数,支持到小数点后两位' }
                    ],
                    feeweight: [
                        { pattern: /^([0-9]+)(\.\d{2})?$/, message: '只允许输入数字与小数,支持到小数点后两位' }
                    ],
                    area: [
                        { required: true, message: '库区为必填项', trigger: 'blur' }
                    ],
                    location: [
                        { required: true, message: '库位为必填项', trigger: 'blur' }
                    ],
                    custcode: [
                        { required: true, message: '货主名称为必填项', trigger: 'blur' }
                    ],
                    opter: [
                        { required: true, message: '必须包含经办人信息', trigger: 'blur' }
                    ],
                    goodssize:[
                        {  required: true, message: '尺寸信息必填', trigger: 'blur' },
                        {  validator: checkInputArea,  trigger: 'blur' }
                        // { pattern: /^[0-9\.x]+$/gm, message: '体积信息只能输入数字和(.)点符号与x小写字母' }
                    ],
                    // packingid:[
                    //     {  required: true, message: '包装信息必选', trigger: 'blur' }
                    // ]
                },
            }
        },
        methods: {
            handleSizeChange(val) {
                this.queryInfo.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryInfo.pageNum = val
                this.getList()
            },
            getList() {
                const _this = this
                selectInventroyrecords(this.queryInfo).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data.list
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            // 添加对话框，打开事件
            applyAdd() {
                let ld = this.$loading({
                    text:"入库中..."
                })
                batchImpNewinventroyrecord(this.tableData).then((response) => {
                    let res = response.data;
                    // 添加失败
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    // 添加，成功
                    this.$message.success(res.msg);
                    this.tableData = [];
                }).catch(error => {
                    this.$message.error(error.toString());
                }).finally(()=>{
                    ld.close()
                });
            },
            batchAdd(){
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    const  wmslog = Object.assign({},this.addForm)
                    wmslog.opttime = new Date().format('yyyy-MM-dd hh:mm:ss')
                    this.tableData.push(wmslog)
                    this.addForm.serialnumber = this.serialNumber()
                    this.addForm.damages=[]
                    this.addForm.files=[]
                })
            },
            // 添加功能
            add() {
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    batchImpNewinventroyrecord(this.addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.apply_dialog.addDialog = false;
                        // 刷新列表
                        this.getList();
                    }).catch(error => {
                        this.$message.error(error.toString());
                    });
                })
            },
// 打开编辑
            applyEdit(row) {
                this.apply_dialog.addDialog = true;
                this.dialogApply = 'update';
                this.addForm=row;
            },
            // 编辑功能
            edit() {
                // 进行表单的预验证
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    ediInventroyrecord(this.addForm).then((response) => {
                        // console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.apply_dialog.addDialog = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 删除
            applyDel(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    console.log('del'+index);
                    this.tableData.splice(index, 1)
                }).catch(() => {
                })
            },
            serialNumber:()=>{
                let serialDate= new Date();
                let serialCode = serialDate.format("yyyyMMddhhmmssS")
                return serialCode
            },
            getAreaList() {
                const _this = this
                let para = {
                        // 当前页数
                        pageNum: 1,
                        // 每页大小
                        pageSize: 1000,
                }
                let ld = this.$loading({
                    text:"库区数加载中..."
                })
                selectAreas(para).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取库区记录，失败！')
                    }
                    // 获取列表数据
                    _this.areaData = res.data.list
                    _this.$message.success('获取库区记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                }).finally(()=>{
                    ld.close()
                })
            },
            areaQuerySearch(queryString, cb) {
                var restaurants = this.areaData;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.areano.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            getLocationList() {
                const _this = this
                let para = {
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 1000,
                }
                let ld = this.$loading({
                    text:"库位数加载中..."
                })
                selectLocations(para).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取库位记录，失败！')
                    }
                    // 获取列表数据
                    _this.locationData = res.data.list
                    _this.$message.success('获取库位记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                }).finally(()=>{
                    ld.close()
                })
            },
            getSPHCode() {
                const _this = this
                let ld = this.$loading({
                    text:"特货代码数加载中..."
                })
                getSPHCode({}).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取特货代码记录，失败！')
                    }
                    // 获取列表数据
                    _this.SPHOptions = res.data
                    _this.$message.success('获取特货代码记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error('获取特货代码记录，失败！'+error.toString())
                }).finally(()=>{
                    ld.close()
                })
            },
            locationQuerySearch(queryString, cb){
                var restaurants = this.locationData;
                var results = queryString ? restaurants.filter(this.locationFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            locationFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.locationno.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            getRoles() {
                let _this= this;
                let ld = this.$loading({
                    text:"客户数据加载中..."
                })
                getCRMList({},1,2000).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取库位记录，失败！')
                    }
                    // 获取列表数据
                    _this.roles = res.data.list
                    _this.$message.success('获取客户数据，成功！')
                }).catch((error) => {
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        return _this.$message.error(status+msg)
                    }else {
                        return _this.$message.error(error.toString())
                    }
                }).finally(()=>{
                    ld.close()
                });

            },
            crmQuerySearch(queryString, cb){
                var restaurants = this.roles;
                var results = queryString ? restaurants.filter(this.crmFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            crmFilter(queryString) {
                return (restaurant) => {
                    if (restaurant.departmentid){
                        return (restaurant.departmentid.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    }
                };
            },
            screenshot(){
                let video = document.getElementById('videos')
                html2canvas(video, {
                    allowTaint: true,
                    useCORS: true
                }).then((canvas) => {
                    // base64
                    this.imgBase64 = canvas.toDataURL('image/png')
                    // 下载方法1，浏览器弹出下载文件提示
                    const saveInfo = {
                        // 导出文件格式自己定义
                        'download': '文件名' + '.png',
                        'href': this.imgBase64
                    }
                    const element = document.createElement('a')
                    element.style.display = 'none'
                    for (const key in saveInfo) {
                        element.setAttribute(key, saveInfo[key])
                    }
                    document.body.appendChild(element)
                    // element.click()
                    setTimeout(() => {
                        document.body.removeChild(element)
                    }, 300)
                    this.uploadFile(this.imgBase64)
                })
            },
            // 接口上传
            uploadFile(imgBase64){
                const base64List = imgBase64.split(',')[1]
                const raw = window.atob(base64List)
                const rawLength = raw.length
                const uInt8Array = new Uint8Array(rawLength)
                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i)
                }
                // 若需上传，将base64转为file文件
                const blob = new Blob([uInt8Array], { type: 'image/png' })
                const filename = this.serialNumber()+'';
                let fileOfBlob = new File([blob], filename + '.png')
                // this.submitUpload(fileOfBlob);
                var formData = new FormData()
                formData.append('file', fileOfBlob)
                this.submitUpload(formData);
            },
            //上传文件
            handleUploadSuccess: function(response, file, fileList){
                let res = response.data;
                if (response.code !== '200') {
                    // 关闭加载
                    return this.$message.error(response.msg);
                }
                this.$message.success(res.msg);
                this.addForm.annex = res.data.relativePath

            },
            submitUpload(formData){
                const fileServiceName = '/api/wlpt-custom-service-workflow/'
                let ld = this.$loading({
                    text:"图片数据上传中..."
                })
                upfileWithPost(formData).then((response)=>{
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        return this.$message.error(res.msg);
                    }
                    this.$message.success(res.msg);
                    this.addForm.annex = fileServiceName + res.data.relativePath
                }).finally(()=>{
                    ld.close()
                })
                // this.$refs.upload.submit();
            },
            trnSelectionChange(){

            },
            checkSelectable(){

            },
            handleCheckedfilessChange(value){
                console.log(JSON.stringify(value))
            },
            packgeOptionsFilter(searchStr){
                let tempIndex = -1
                if (searchStr){
                    this.packgeOptions = packge.filter((item,index,arr) =>{
                         if (item.code.toLocaleUpperCase().indexOf(searchStr.toLocaleUpperCase()) > -1){
                             tempIndex = index
                             return true
                         }else{
                             return false
                         }
                    })
                    if (tempIndex === -1){
                        this.packgeOptions = packge
                    }
                }else {
                    this.packgeOptions = packge
                }


            },
            multiply(str){
                var everyNum = str.replaceAll('X','x').split('x');
                let tempNum = 1;
                everyNum.forEach(item =>{
                    tempNum = tempNum*item
                })
                return tempNum;
            },
            /**
             * 每行相同的体积数据进行合并
             */
            volAreatextMerge(strArr){
                if (strArr){
                    let newArray = strArr.reduce((total, cur, index) => {
                        let hasValue = total.findIndex(current => {
                            //这里查找长x宽x高 一样的元素
                            return current === cur
                        })
                        //没找到重复元素 入到临时数组
                        hasValue === -1 && total.push(cur)

                        let piece = 0
                        //找到重复元素
                        if(hasValue !== -1 ) {
                            // total[hasValue] = total[hasValue].sl + cur.sl
                            //累加重复元素的件数
                            //1.获取需要累加的重复元素的件数
                            piece += total[hasValue].split('x')[3]
                            console.log("重复元素"+hasValue)
                            console.log("重复元素总件数"+piece)
                        }
                        return total
                    }, [])
                    console.log(newArray)
                }else{
                    this.$message.error("合并体积录入数据出错")
                }
            },
            nextBill(){
                this.$refs.addForm.resetFields()
                this.initUserInfo()
                this.tableData = []

            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => {
                        if (column.property==='billweight' || column.property==='feeweight' || column.property==='pcs' || column.property==='goodsvol'){
                            return  Number(item[column.property])
                        }else {
                            return undefined
                        }
                    });
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                const r = Number(prev) + Number(curr)
                                return new Number(r).toFixed(2);
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },
            initUserInfo(){
                let userinfo = loginedUserInfo();
                if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
                    this.$message.error("获取用户信息出错")
                }else{
                    this.addForm.opter = userinfo.username
                }
            }
        },
        mounted() {
            this.addForm = {
                        area: '',
                        feeweight: 22.68,
                        custel: '',
                        customer: '',
                        custcode: 'APX',
                        goodstype: '运单',
                        house:'',
                        ietype:'I',
                        location:'hx001',
                        opter:'wuliu',
                        opttime: '',
                        pcs: 17,
                        totalpcs:113,
                        serialnumber: '',
                        station: '',
                        status: '',
                        licenseplate: '豫A61CR7',
                        transtype:'销售入库',
                        goodssize:'120x230x78x17',
                        goodsvol:36.60,
                        waybill:'172-12345678',
                        billfhl:'FILE788',
                        //随货文件
                        hasFiles:false,
                        hasUnusual:false,
                        unusuals:[],
                        files:[],
                        damages:[],
                        sphCodes:[],
                        billweight:12.34,
                        totalweight:2573,
                        packingid:'PK',
                        remark:'',
                        remark1:'备注',
                        remark2:'',
                        remark3:'',
                        remark4:'',
                        remark5:'',
                        annex:''
            }

            this.getAreaList();
            this.getLocationList();
            this.getRoles();
            this.getSPHCode()
            this.addForm.serialnumber = this.serialNumber()
            this.initUserInfo()
        },
        computed: {
            goodsSize:{
                get: function () {
                    return this.addForm.goodssize;
                },
                set:function (value) {
                    value = value.replaceAll('*','x')
                    value = value.replaceAll('X','x')
                    this.addForm.goodssize = value
                    // console.log("opebTab监视:value = "+ value);
                }
            }
        },


    }
</script>

<style scoped>
    .toolbar{
        height: 60px;
        background-color: white;
        /*line-height: 60px;*/
        vertical-align: middle;
        border-radius: 5px 5px 5px 5px;
        padding: 10px 10px 0 10px;
        box-shadow: 0px 5px 5px #e5e8eb;
    }

    .my-text-area .prepand{
        float: left;
        width:89px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
    }
</style>
<style>
    .my-text-area .el-textarea__inner{
        min-height: 28px;
        height: 28px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
</style>