<template xmlns:el-col="http://www.w3.org/1999/html">
    <section>
<!--        <el-row  class="toolbar">-->
<!--            <el-col :span="2">-->
<!--                <el-input-->
<!--                        v-model="formTrn.customscode"-->
<!--                        placeholder="关区"-->
<!--                        style="width: 100px"-->
<!--                />-->
<!--            </el-col>-->
<!--            <el-col :span="3">-->
<!--                <el-input-->
<!--                        v-model="formTrn.username"-->
<!--                        placeholder="申报用户"-->
<!--                        style="width: 160px"-->
<!--                />-->
<!--            </el-col>-->
<!--            <el-col :span="3">-->
<!--&lt;!&ndash;                <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                        v-model="formTrn.trnmode"&ndash;&gt;-->
<!--&lt;!&ndash;                        placeholder="转关方式"&ndash;&gt;-->
<!--&lt;!&ndash;                        style="width: 140px"&ndash;&gt;-->
<!--&lt;!&ndash;                />&ndash;&gt;-->
<!--                <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px">-->
<!--                    <el-option label="0-非转关运抵模式" value="0"></el-option>-->
<!--                    <el-option label="1-南方转关运抵模式" value="1"></el-option>-->
<!--                    <el-option label="2-北方转关运抵模式" value="2"></el-option>-->
<!--                    <el-option label="3-水运中转运抵模式" value="3"></el-option>-->
<!--                </el-select>-->
<!--            </el-col>-->
<!--            <el-col :span="3">-->
<!--                <el-input-->
<!--                        v-model="formTrn.unloadcode"-->
<!--                        placeholder="卸货地代码"-->
<!--                        style="width: 160px"-->
<!--                />-->
<!--            </el-col>-->
<!--            <el-col :span="7">-->
<!--&lt;!&ndash;                <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                        v-model="formTrn.creattime"&ndash;&gt;-->
<!--&lt;!&ndash;                        placeholder="新增时间段"&ndash;&gt;-->
<!--&lt;!&ndash;                        style="width: 160px"&ndash;&gt;-->
<!--&lt;!&ndash;                />&ndash;&gt;-->
<!--                <el-date-picker-->
<!--                        v-model="formTrn.creattime"-->
<!--                        type="daterange"-->
<!--                        align="right"-->
<!--                        unlink-panels-->
<!--                        range-separator="至"-->
<!--                        start-placeholder="开始日期"-->
<!--                        end-placeholder="结束日期"-->
<!--                        value-format="yyyy-MM-dd"-->
<!--                        format="yyyy-MM-dd"-->
<!--                        :picker-options="pickerOptions">-->
<!--                </el-date-picker>-->
<!--            </el-col>-->
<!--            <el-col :span="5">-->
<!--                <el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>-->
<!--                <el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button>-->
<!--                <el-button type="warning" icon="el-icon-edit"  :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>-->
<!--            </el-col>-->
<!--        </el-row>-->
        <el-row class="toolbar" style="height: 100px">
            <el-form :inline="true" :model="formTrn">
                <el-row style="margin-top: -5px">
                    <el-col :span="6">
                        <el-form-item>
                            <el-input
                                    v-model="formTrn.customscode"
                                    placeholder="关区" style="width: 210px"
                            >
                                <template slot="prepend">关&nbsp;&nbsp;&nbsp;区</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-input
                                    v-model="formTrn.username"
                                    placeholder="申报用户" style="width: 210px"
                            >
                                <template slot="prepend">申报用户</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <el-input
                                    v-model="formTrn.unloadcode"
                                    placeholder="卸货地代码" style="width: 210px"
                            >
                                <template slot="prepend">卸货地代码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top:0">
                    <el-col :span="6">
                        <el-form-item>
                            <div style="display: inline-block;background-color: #6F8294;color: white;
                            border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
                            border-bottom-left-radius:4px;padding-left: 14px">转关方式</div>
                            <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 136px">
                                <el-option label="0-非转关运抵模式" value="0"></el-option>
                                <el-option label="1-南方转关运抵模式" value="1"></el-option>
                                <el-option label="2-北方转关运抵模式" value="2"></el-option>
                                <el-option label="3-水运中转运抵模式" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <div style="display: inline-block;background-color: #6F8294;color: white;
                            border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
                            border-bottom-left-radius:4px;padding-left: 14px">申报时间段</div>
                            <el-date-picker
                                    v-model="searchTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd" style="width: 300px"
                                    :picker-options="pickerOptions">
                                <template slot="prepend">新增时间段</template>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="trnList">查&nbsp;&nbsp;询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" icon="el-icon-edit" @click="addTrn">新&nbsp;&nbsp;增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="warning" icon="el-icon-edit"  :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="6">-->
<!--                        <el-form-item>-->
<!--                            <el-date-picker-->
<!--                                    v-model="formTrn.creattime"-->
<!--                                    type="daterange"-->
<!--                                    unlink-panels-->
<!--                                    range-separator="至"-->
<!--                                    start-placeholder="开始日期"-->
<!--                                    end-placeholder="结束日期"-->
<!--                                    value-format="yyyy-MM-dd"-->
<!--                                    format="yyyy-MM-dd"-->
<!--                                    :picker-options="pickerOptions">-->
<!--                                <template slot="prepend">新增时间段</template>-->
<!--                            </el-date-picker>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->

                </el-row>
            </el-form>
        </el-row>
        <el-row class="rowTwo">
            <el-table
                    v-loading="listLoading"
                    :data="tableData"
                    border
                    highlight-current-row
                    @selection-change="trnSelectionChange"
                    tooltip-effect="dark"
                    style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
            >
                <el-table-column
                        type="selection"
                        :selectable="checkSelectable"
                        fixed="left"
                        width="55"
                />
                <el-table-column label="统一编号" width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.seqno }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="转关方式" width="140">
                    <template slot-scope="scope">
                        <span v-if="scope.row.trnmode ==='0'">非转关运抵模式</span>
                        <span v-if="scope.row.trnmode ==='1'">南方转关运抵模式</span>
                        <span v-if="scope.row.trnmode ==='2'">北方转关运抵模式</span>
                        <span v-if="scope.row.trnmode ==='3'">水运中转运抵模式</span>
<!--                        <span>{{ scope.row.trnmode }}</span>-->
                    </template>
                </el-table-column>
                <el-table-column label="申报地海关" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.customscode }}</span>
                    </template>
                </el-table-column>
<!--                <el-table-column label="集装箱（器）编号" width="140">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span>{{ scope.row.contaid }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="总提运单号" width="140">
                    <template slot-scope="scope">
                        <span>{{ scope.row.billno }}</span>
                    </template>
                </el-table-column>
<!--                <el-table-column label="进出境运输方式代码" width="120">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span v-if="scope.row.trafmode ==='2'">江海运输</span>-->
<!--                        <span v-if="scope.row.trafmode ==='3'">铁路运输</span>-->
<!--                        <span v-if="scope.row.trafmode ==='4'">汽车运输</span>-->
<!--                        <span v-if="scope.row.trafmode ==='5'">航空运输</span>-->
<!--                        <span v-if="scope.row.trafmode ==='6'">邮件运输</span>-->
<!--&lt;!&ndash;                        <span>{{ scope.row.trafmode }}</span>&ndash;&gt;-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="境内运输工具名称" width="140">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span>{{ scope.row.trafname }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="境内运输工具航（班）次" width="160">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span>{{ scope.row.voyageno }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="境内运输方式" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.trafway ==='2'">江海运输</span>
                        <span v-if="scope.row.trafway ==='3'">铁路运输</span>
                        <span v-if="scope.row.trafway ==='4'">汽车运输</span>
                        <span v-if="scope.row.trafway ==='5'">航空运输</span>
                        <span v-if="scope.row.trafway ==='6'">邮件运输</span>
<!--                        <span>{{ scope.row.trafway }}</span>-->
                    </template>
                </el-table-column>
                <el-table-column label="托运货物件数" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.packno }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="货物总毛重" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.grosswt }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="卸货地代码" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.unloadcode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.creattime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="申报状态" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.dstatus ==='000'">未申报/已暂存</span>
                        <span v-if="scope.row.dstatus ==='001'">已申报</span>
                    </template>
                </el-table-column>
                <el-table-column label="回执状态" width="120">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.customResponseStatus ==='0'">申报成功</el-tag>
                        <el-tag type="danger" v-if="scope.row.customResponseStatus ==='1'">申报失败</el-tag>
                        <el-tag type="success" v-if="scope.row.customResponseStatus ==='S'">申报成功</el-tag>
                        <el-tag type="danger" v-if="scope.row.customResponseStatus ==='F'">申报失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="回执内容" width="220">
                    <template slot-scope="scope">
                            <span :style="{'color':scope.row.customResponseStatus=='0'?'rgb(103,194,58)'
                                                    :scope.row.customResponseStatus=='1'?'rgb(245,110,110)':scope.row.customResponseStatus=='S'?'rgb(103,194,58)'
                                                    :scope.row.customResponseStatus=='F'?'rgb(245,110,110)':'rgb(60,62,66)'}">{{ scope.row.customResponseText }}</span>
                        <br/>
                        <el-button type="text"   @click="check(scope.row)">
                                查看回执
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="success" @click="editTrn(scope.$index,scope.row)">编&emsp;&emsp;辑</el-button>
                            <el-button type="danger"  :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="delTrn(scope.row)">
                                删&emsp;&emsp;除
                            </el-button>
                        </el-row>
                        <el-row>
                            <el-button type="warning" :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="declareTrn(scope.row)">
                                申&emsp;&emsp;报
                            </el-button>
                            <el-button type="info" @click="statusTrn(scope.row)">
                                修改状态
                            </el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <div style="margin-top: 10px" class="toolbar">
                <el-pagination
                        :current-page="formTrn.pageNum"
                        :page-sizes="[10, 50, 100, 500]"
                        :page-size="formTrn.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>

        </el-row>
        <el-row>
            <el-dialog
                    :title="dialogMap[dialogStatus]"
                    :visible.sync="trn_dialog.addDialog"
                    style="margin-top: -50px"
                    text-align="center"
                    width="85%"
                    @close="trn_addDialogClosed"
            >
                <el-form ref="form" :inline="true" :model="form" class="demo-form-inline" label-width="120px" style="margin-top: -20px;" label-position="right" :rules="rules" >
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content content">信息表单 [id: {{form.autoid}}]-[申报用户:{{form.username}}]</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="海关申报序号" prop="seqno">
                                <el-input v-model="form.seqno" placeholder="" disabled suffix-icon=“xxxx”></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="海关关区" prop="customscode">
                                <el-input v-model="customscode" placeholder="" suffix-icon=“xxxx” oninput="value=value.replace(/[^\d]/g,'')"
                                          maxLength='4'/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="转关方式" prop="trnmode">
                                <!--                                <el-input v-model="form.trnmode" size="small"/>-->
                                <el-select v-model="form.trnmode" placeholder="请选择" size="mini">
                                    <el-option label="0-非转关运抵模式" value="0"></el-option>
                                    <el-option label="1-南方转关运抵模式" value="1"></el-option>
                                    <el-option label="2-北方转关运抵模式" value="2"></el-option>
                                    <el-option label="3-水运中转运抵模式" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>



<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="操作员卡号" prop="inputopid">-->
<!--                                <el-input v-model="form.inputopid" placeholder="" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="操作员姓名" prop="inputopname">-->
<!--                                <el-input v-model="form.inputopname" placeholder="" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                    </el-row>
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="报关公司" prop="applyname">-->
<!--                                <el-input v-model="form.applyname" placeholder="" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="十位海关编码" prop="applycode">-->
<!--                                <el-input v-model="form.applycode" placeholder="" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="组织机构代码" prop="copcode">-->
<!--                                <el-input v-model="form.copcode" placeholder="" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                    <el-row>
                        <el-col :span="8">
                            <el-tooltip content="运抵编号：北方模式必填；南方模式免填；水运中转模式选填。运抵编号规则：4位申报地海关代码+2位卸货地代码+6位编号生成日期（顺序为年（2位）月（2位)）日（2位））+6位流水号"  effect="light">
                                <el-form-item label="运抵编号" prop="arriveno">
                                    <el-input suffix-icon=“xxxx” v-model="form.arriveno" :disabled="form.trnmode==1" placeholder=""
                                    />
                                </el-form-item>
                            </el-tooltip>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="运单号" prop="billno">
                                <el-input suffix-icon=“xxxx” v-model="form.billno" placeholder="限填大写字母数字下滑杠" @keyup.native="form.billno=form.billno.replace(/[^A-Z0-9_]/g,'')" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="进出境运输方式" prop="trafmode">
<!--                                <el-input v-model="form.trafmode" placeholder="" />-->
                                <el-select v-model="form.trafmode" placeholder="请选择" size="mini" >
                                    <el-option label="2-江海运输" value="2"></el-option>
                                    <el-option label="3-铁路运输" value="3"></el-option>
                                    <el-option label="4-汽车运输" value="4"></el-option>
                                    <el-option label="5-航空运输" value="5"></el-option>
                                    <el-option label="6-邮件运输" value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-tooltip content="运输工具名称：北方模式选填；南方模式填写@+13位载货清单号；水运中转模式必填：境内水路运输填报驳船船名，境内铁路运输填报车名（主管海关4位关别代码+TRAIN）；境内公路运输填报车名（主管海关4位关别代码+TRUCK）" placement="bottom" effect="light">
                                <el-form-item label="运输工具名称" prop="trafname">
                                    <el-input suffix-icon=“xxxx” v-model="form.trafname" placeholder="" />
                                </el-form-item>
                            </el-tooltip>

                        </el-col>
                        <el-col :span="8">
                            <el-tooltip content="启运时间：北方模式选填；南方模式免填；水运中转模式必填：境内水路运输填报驳船航次号，境内铁路、公路运输填报6位启运日期（顺序为年（2位）月（2位）日（2位））" placement="bottom" effect="light">
                                <el-form-item label="启运时间"  prop="voyageno">
                                    <!--                                <el-input v-model="form.voyageno" placeholder="" />-->
                                    <el-date-picker
                                            v-model="form.voyageno"
                                            type="date"  size="mini"
                                            value-format="yyMMdd"
                                            format="yyMMdd"  :disabled="form.trnmode==1"
                                            style="width:93%"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-tooltip>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="境内运输方式" prop="trafway">
<!--                                <el-input v-model="form.trafway" placeholder="" />-->
                                <el-select v-model="form.trafway" placeholder="请选择" size="mini">
                                    <el-option label="2-江海运输" value="2"></el-option>
                                    <el-option label="3-铁路运输" value="3"></el-option>
                                    <el-option label="4-汽车运输" value="4"></el-option>
                                    <el-option label="5-航空运输" value="5"></el-option>
                                    <el-option label="6-邮件运输" value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="托运件数" prop="packno">
                                <el-input suffix-icon=“xxxx” v-model="form.packno" placeholder="" oninput="value=value.replace(/[^\d]/g,'')" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="托运重量" prop="grosswt">
                                <el-input suffix-icon=“xxxx” v-model="form.grosswt" placeholder="" oninput="value=value.replace(/[^\d.]/g,'')" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="卸货地代码" prop="unloadcode">
<!--                                <el-input suffix-icon=“xxxx” v-model="unloadcode" placeholder="" />-->
                                <el-autocomplete
                                        suffix-icon=“xxxx”
                                        v-model="unloadcode"
                                        :fetch-suggestions="unloadcodeSearchAsync"
                                        placeholder=""
                                        @select="unloadcodeSelect"
                                        clearable
                                >
                                    <template slot-scope="{item}">
                                        <el-tooltip placement="right">
                                            <div slot="content">{{item.value}} - {{item.label}}</div>
                                            <span>{{item.label}}</span>
                                        </el-tooltip>
                                    </template>

                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-tooltip content="集装箱(器)编号：集装箱货物必填：4个字母即货主编码、6位数字序列号以及1位检测数字组成；非集装箱货物免填" placement="bottom" effect="light">
                                <el-form-item label="集装箱编号" prop="contaid">
                                    <el-input suffix-icon=“xxxx” v-model="form.contaid" placeholder="" />
                                </el-form-item>
                            </el-tooltip>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="到达卸货地时间" prop="arrivetime">
<!--                                <el-input v-model="form.arrivetime" size="mini" placeholder="" />-->
                                <el-date-picker
                                        v-model="form.arrivetime"
                                        type="datetime" size="mini"
                                        value-format="yyyyMMddHHmmss"
                                        format="yyyyMMddHHmmss"
                                        style="width:93%"
                                        placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-tooltip content="集装箱(器)尺寸：集装箱货物必填；非集装箱货物免填" placement="bottom" effect="light">
                                <el-form-item label="集装器尺寸" prop="contatype">
                                    <el-input suffix-icon=“xxxx” v-model="form.contatype" placeholder="" />
                                </el-form-item>
                            </el-tooltip>

                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="notes">
                                <el-input
                                        v-model="form.notes"
                                        type="textarea"
                                        :rows="1"  style="width: 520px"
                                        placeholder="请输入内容"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  align="middle">
                        <el-col :span="24" :offset="9">
                            <el-form-item >
                                    <el-button style="width: 100px" type="info" @click="trn_dialog.addDialog = false">取消</el-button>
                                    <el-button type="primary" style="width: 100px" @click="dialogStatus==='create'?trn_add():trn_edit()">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </el-row>
<!--        回执明细弹框-->
        <DetailedLog
                ref="detailedlog"
                :message-id="detailedlogId"
                :visible="dialogDetailedLogVisible"
                @updateVisible="updateVisible"
        />
    </section>
</template>

<script>
    import {selectTrans,delTrans,batchSend,ediTrans,send,addTrans} from "../../api/trn";
    import DetailedLog from '@/components/detailedDialog'
    import  uti from '@/utils'
    import loginedUserInfo from "@/api/user";
    import unloadingCode from "@/common/customs/trans_arrive_unloadingCode";
    import {mapActions, mapGetters} from 'vuex'


    export default {
        name: "transit",
        components: { DetailedLog },

        data(){
            return{
                //组件数据
                detailedlogId: '',
                dialogDetailedLogVisible: false,
                detailedList: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                formTrn: {
                    customscode:'',
                    username:'',
                    trnmode:'',
                    unloadcode:'',
                    creattime:'',
                    startDate:'',
                    endDate:'',
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogStatus: 'create',
                trn_dialog: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false
                },
                batchSendLoading: false,
                listLoading: false,
                tableData: [],
                //批量选中的
                selectedWaybillList: [],
                //新增编辑表单
                form: {
                    autoid:'',
                    seqno:'',
                    ieflag:'E',
                    customscode:'4604',
                    inputopid: '',
                    inputopname:'',
                    applyname:'',
                    applycode:'',
                    copcode:'',
                    arriveno:'',
                    contaid:'',
                    billno:'',
                    trafmode:'5',
                    trafname:'',
                    voyageno:'',
                    trafway:'5',
                    packno:'',
                    grosswt:'',
                    unloadcode:'460043',
                    arrivetime: '',
                    contatype:'',
                    trnmode:'2',
                    notes:'',
                    opertype:'A',
                    sign:'',
                    signdate:'',
                    clientseqno:'',
                    hostid:'',
                    certno:'',
                    username:''

                },
                rules: {
                    // trafmode: [
                    //     {  required: true, message: '请输入', trigger: 'change' }
                    // ],
                    // trafway: [
                    //     {  required: true, message: '请输入', trigger: 'change' }
                    // ],
                    packno: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    grosswt: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    trnmode: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                }

            }
        },
        mounted() {
            //获取列表
            this.trnList();

        },
        computed:{
            ...mapGetters(['getUserInfoStore','getUserMenuStore']),
            //海关关区
            customscode: {
                get: function () {
                    //呈现的数据
                    return this.form.customscode
                },
                set:function (val) {
                    //操作的数据
                    this.form.customscode = val;
                    let loadcode = ''
                    if (this.unloadcode && this.unloadcode.length >= 2) {
                        let length = this.unloadcode.length
                        loadcode = this.unloadcode.substring(length - 2, length)
                    }
                    //给运抵编号赋值
                    this.form.arriveno = this.customscode + loadcode + new Date().format('yyMMddHHmmss');
                }
            },
            //卸货地代码
            unloadcode: {
                get: function () {
                    return this.form.unloadcode
                },
                set:function (val) {
                    this.form.unloadcode = val
                    let loadcode = ''
                    console.log(this.unloadcode.length)
                    if (this.unloadcode && this.unloadcode.length >= 2) {
                        let length = this.unloadcode.length
                        loadcode = this.unloadcode.substring(length - 2, length)
                    }
                    console.log(loadcode+"aaaa")
                    this.form.arriveno = this.customscode + loadcode + new Date().format('yyMMddHHmmss');
                }
            },
            username: function () {
                var user = this.getUserInfoStore;
                if (user) {
                    return  user.username || '';
                }
            },
            searchTime: {
                get:function () {
                    return this.formTrn.creattime
                },
                set:function (val) {
                    this.formTrn.creattime = val
                    if (val && val.length===2){
                        this.formTrn.startDate = val[0]
                        this.formTrn.endDate = val[1]
                    }
                }
            }

        },
        methods:{
            //查看回执按钮
            check(row) {
                this.dialogDetailedLogVisible = true
                this.autoid = row.autoid
                this.$refs.detailedlog.check(row.autoid)
            },
            updateVisible(val) {
                this.dialogDetailedLogVisible = val
            },
            //分页
            handleSizeChange(val) {
                this.formTrn.pageSize = val
                this.trnList()
            },
            handleCurrentChange(val) {
                this.formTrn.pageNum = val
                this.trnList()
            },
            //修改状态
            statusTrn(row) {
                this.$confirm('修改状态', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    row.customResponseText = undefined
                })
            },
            // 删除
            delTrn(row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    delTrans(row).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.trnList()
                    }).catch(error => {
                        this.$message.error(res.msg)
                    })
                }).catch(() => {
                })
            },
            // 获取消息标签列表
            trnList() {
                const _this = this
                let para = Object.assign({}, this.formTrn)
                para.creattime = ''
                selectTrans(para).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())
                })
            },
            //新增编辑弹框关闭重置
            trn_addDialogClosed() {
                // 重置对话框
                this.$refs.form.resetFields()
            },
            // 打开新增
            addTrn() {
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
                this.dialogStatus = 'create'
                this.trn_dialog.addDialog = true
                this.form.arrivetime = new Date().format('yyyyMMddHHmmss')
                this.form.username = this.username
                this.form.ieflag = 'E'
                this.form.trnmode = '2'
                this.form.trafmode= '5'
                this.form.trafway = '5'
                this.form.unloadcode = '460043'
                this.form.customscode = '4604'
            },

            // 新增功能
            trn_add() {     // 进行表单的预验证
                this.$refs.form.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    addTrans(this.form).then((response) => {
                        const res = response.data
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            return this.$message.error(res.msg)
                        }
                        // 添加，成功
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.trn_dialog.addDialog = false
                        // 刷新列表
                        this.trnList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 打开编辑
            editTrn(index, row) {
                this.form = Object.assign({}, row)
                this.trn_dialog.addDialog = true
                this.dialogStatus = 'update'
                this.$nextTick(() => {
                    this.form = Object.assign({}, row)
                })
            },
            // 编辑功能
            trn_edit() {
                // 进行表单的预验证
                this.$refs.form.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    ediTrans(this.form).then((response) => {
                        const res = response.data
                        if (res.code !== '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.trn_dialog.addDialog = false
                        // 刷新列表
                        this.trnList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 申报
            declareTrn(row) {
                row.customResponseText = '已申报'
                row.opertype= "C"
                send(row).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        this.$message({
                            dangerouslyUseHTMLString: true,
                            showClose: true,
                            type:'error',
                            duration:0,
                            message: '<strong>'+ res.msg +'</strong><br/>' + '<span>'+ res.error+'</span>'
                        });
                        return
                    }
                    this.$message.success('申报成功！');
                    this.trnList();
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            // 产生回执的不批量发送
            checkSelectable: function(row) {
                if (row.customResponseText && row.customResponseText !== undefined && row.customResponseText.length > 0) {
                    return false
                } else {
                    return true
                }
            },
            //批量选中
            trnSelectionChange: function(selectRows) {
                console.log(selectRows)
                const list = []
                if (selectRows) {
                    selectRows.forEach(function(item, index) {
                        list.push(item.autoid)
                    })
                }
                this.selectedWaybillList = list
            },
            //批量申报
            batchTrn() {
                this.batchSendLoading = true
                if (this.selectedWaybillList && this.selectedWaybillList.length > 0) {
                    batchSend(this.selectedWaybillList).then(res => {
                        if (res.code === '200') {
                            Message.success('批量申报成功')
                        } else {
                            Message.error('批量申报成功，请稍后重试')
                        }
                    }).catch(action => {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '取消修改'
                                : '停留在当前页面'
                        })
                    })
                    this.batchSendLoading = false
                    setTimeout(() => {
                        this.trnList()
                    }, 1000)
                    Message.success('批量申报执行完毕')
                } else {
                    Message.error('请选择需要批量发送的运单')
                }
            },
            unloadcodeSearchAsync(queryString, cb) {
                let customs_unloadingCode  = unloadingCode;
                console.log(customs_unloadingCode)
                let results = queryString ? customs_unloadingCode.filter(this.unloadcodeFilter(queryString)) : customs_unloadingCode;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            unloadcodeFilter(queryString) {
                return (unloadingCode) => {
                    return (unloadingCode.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            unloadcodeSelect(item) {
                console.log(item);
            }
        }

    }
</script>

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