<template>
        <section>
            <!--        工具条-->
            <el-row class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" ref="filters" :model="filters" :rules="rules" >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="主单号：" prop="waybill">
                                <el-input v-model="filters.waybill" placeholder="" size="small" style="width: 240px"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-button type="primary" @click="getWaybillList('filters')" size="small" style="margin-left: 40px">查询</el-button>
                                <span style="color: red;margin-left: 10px">查询单号前请先选定业务类型</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
            <!--        列表-->
            <el-row>
                <el-table :data="awbaList" v-loading="commonLoading" style="width: 100%">
                    <el-table-column fixed  label="操作">
                        <template slot-scope="scope">
                            <el-button @click="addWaybill(scope.$index, scope.row)" type="primary" size="small">添加</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="flightno"  label="航班号">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flightno.length > 4" >{{scope.row.flightno}}</span>
                            <span v-else>{{scope.row.carrier}}{{scope.row.flightno}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="flightDate"  label="航班日期">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flightDate !=null">{{scope.row.flightDate | formatDate}}</span>
                            <span v-else>{{scope.row.flightdate | formatDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="segment" label="航段">
                        <template slot-scope="scope">
                            <span v-if="scope.row.segment != null" >{{scope.row.segment}}</span>
                            <span v-else>{{scope.row.originatingstation}}-{{scope.row.destinationstation}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="waybillnomaster" label="主单号">
                    </el-table-column>
                    <el-table-column prop="totalpiece" label="件数">
                    </el-table-column>
                    <el-table-column prop="totalweight" label="重量">
                    </el-table-column>
                    <el-table-column prop="customscode" label="关区">
                    </el-table-column>
                    <el-table-column prop="createdate" :formatter="formatDate" label="时间">
                    </el-table-column>
                    <el-table-column prop="receiptinformation" label="回执内容" width="280px">
                    </el-table-column>
                </el-table>
            </el-row>
            <!--        申请表单信息-->
            <el-row style="padding-bottom: 0px;">
                <el-form ref="addForm" :model="addForm" :rules="addFormRules">
                    <el-row>
                        <el-col :span="10">
                            <el-row>
                                <el-form-item label="输入备注：">
                                    <el-input
                                            type="text"
                                            v-model="addForm.remark3"
                                            maxlength="10"
                                            show-word-limit
                                            size="small" style="width: 180px">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="车牌号码：" prop="trailerFrameNo">
                                    <el-input v-model="addForm.trailerFrameNo" placeholder="请输入车牌号" @change="trailerFrameNo(addForm.trailerFrameNo)" size="small" style="width: 180px"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="货物类型：" prop="cocode">
                                    <el-select v-model="addForm.cocode" placeholder="请选择" size="small" style="width: 180px">
                                        <el-option label="转关货" value="转关货"></el-option>
                                        <el-option label="换单货" value="换单货"></el-option>
                                        <el-option label="普通货" value="普通货"></el-option>
                                        <el-option label="退库货" value="退库货"></el-option>
                                        <el-option label="查验货" value="查验货"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="场站选择：" prop="endstationList">
                                    <el-select v-model="addForm.endstationList" multiple placeholder="请选择">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.stationId"
                                                :label="item.name"
                                                :value="item.stationId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="运输公司：">
                                    <el-input v-model="addForm.agentno" placeholder="" size="small" style="width: 180px"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="挂靠单位：">
                                    <el-input v-model="addForm.agentname" placeholder="" size="small" style="width: 180px"></el-input>
                                </el-form-item>
                            </el-row>
                        </el-col>
                        <el-col :span="7">
                            <el-row>
                                <el-form-item label="业务类型：" prop="businesstype">
                                    <el-select v-model="addForm.businesstype" clearable placeholder="请选择" size="small" style="width: 180px">
                                        <el-option label="进口提货" value="进口提货"></el-option>
                                        <el-option label="出口送货" value="出口送货"></el-option>
                                        <el-option label="分拨业务" value="分拨业务"></el-option>
                                        <el-option label="调拨业务" value="调拨业务"></el-option>
                                    </el-select>
                                </el-form-item>

                            </el-row>
                            <el-row>
                                <el-form-item label="申请单位：">
                                    <el-input v-model="addForm.veProperty" disabled size="small" style="width: 180px"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="备案单位：">
                                    <el-input v-model="addForm.trailerLicenseNo" disabled size="small" style="width: 180px"></el-input>
                                </el-form-item>

                            </el-row>
                            <el-row>
                                <el-form-item label="主单列表：">
                                    <el-input
                                            type="textarea"
                                            :rows="4"
                                            placeholder="请输入主单号，例如17212341234，多个单号以‘，’（英文）分割"
                                            v-model="addForm.masterList"
                                            style="width: 180px">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="margin-left: 320px">
                        <el-button type="primary" @click="saveSubmit()"  :disabled="disabledStr">保存</el-button>
<!--                        <el-button type="primary" @click="saveSubmit()" :disabledStr="disabledStr" >保存</el-button>-->
                    </el-row>

                </el-form>
            </el-row>
        </section>

</template>
<script>
    import {getYardList as yartList} from '../../api/station_dispatch'
    import {trailerFrameNoSuccess, save} from '../../api/remote_interface/byont_import'
    // import {formatDate} from '../../api/comcommonUtil'
    import loginUserInfo from "../../api/base";
    import {add} from "../../api/security/security";
    export default {
        filters: {
            formatDate(value) {
                if(value == null) {
                    return null
                }
                let dt = new Date(value)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
            }
        },
        data() {
            return {
                rules:{
                    waybill: [
                      { required: true, message: '请输入运单号', trigger: 'change' }
                      ]
                },
                addFormRules:{
                    businesstype: [
                        {required: true, message: '请输入运单号', trigger: 'blur'}
                    ],
                    trailerFrameNo: [
                        {required: true, message: '请输入车牌号', trigger: 'blur'}
                    ],
                    cocode: [
                        {required: true, message: '请选择货务类型', trigger: 'blur'}
                    ],
                    endstationList: [
                        {required: true, message: '请选择场站', trigger: 'blur'}
                    ]
                },
                options:[],
                filters: {
                    waybill: ''
                },
                radio:'',
                awbaList:[],
                yardList: [],
                commonLoading: false,
                textarea: '',
                disabledStr: true,
                waybilllist:[],
                addForm: {
                    // 备注
                    remark3: '',
                    // 业务类型
                    businesstype: '',
                    // 车牌号
                    trailerFrameNo: '',
                    //备案单位
                    trailerLicenseNo: '',
                    // 主单列表
                    masterList: '',
                    // 场站编号
                    endstation: '',
                    endstationList: '',
                    // 运输公司
                    agentno: '',
                    // 挂靠单位
                    agentname: '',
                    //申请单位
                    veProperty: '',
                    // 货物类型
                    cocode:'',
                    // 货物重量
                    remark: '',
                    createBy: this.userid = JSON.parse(sessionStorage.getItem('user')).id
                },
                weightFloat: 0

            }
        },
        methods: {
            // 运单查询
            getWaybillList(filters){
                let businesstype = this.addForm.businesstype;
                if (businesstype != undefined && businesstype != null && businesstype != ''){
                    this.$refs[filters].validate((valid) => {
                        if (valid) {
                            this.commonLoading = true;
                            if (businesstype == '进口提货'){
                                businesstype = 'I';
                            }else if (businesstype == '出口送货'){
                                businesstype = 'E';
                            }else if (businesstype == '分拨业务'){
                                businesstype = 'I';
                            }else if (businesstype == '调拨业务'){
                                businesstype = 'E';
                            }
                            let _this = this;
                            var url = "http://tjfx.15miaoo.com:8003/orig/orig";
                            var xhr = new XMLHttpRequest();
                            // 访问nginx中的代理服务器
                            xhr.open('get', url+'?waybill='+this.filters.waybill+'&imp='+businesstype, true);
                            xhr.send();
                            xhr.onreadystatechange = function(){
                                if(xhr.readyState == 4){
                                    if(xhr.status ==200){
                                        var data = JSON.parse(xhr.responseText);
                                        _this.awbaList=data;
                                        //console.log(data);
                                        _this.commonLoading = false;
                                    }
                                }
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }else {
                    this.$message({
                        message: '请在下列选择业务类型',
                        type: "error"
                    })
                }
            },
            // 获取场站
            getYardList(){
                yartList().then((res) =>{
                    this.options = res.data.data;
                }).catch((error) => {
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        alert(status+msg);
                    }else {
                        alert(error);
                    }

                });
            },
            // 校验车牌号是否合格
            trailerFrameNo(value){
                let params = {
                    'trailerFrameNo': value,
                }
                trailerFrameNoSuccess(params).then((res) =>{
                    if (res.data.code == 200){
                        this.$message({
                            message: res.data.msg,
                            type: "success"
                        })
                        this.addForm.agentno = res.data.data.coCode;
                        this.addForm.trailerLicenseNo = res.data.data.veTargetNo;
                        this.addForm.agentname = res.data.data.proposer;

                        this.disabledStr = false;
                    }else if(res.data.code == 201) {
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        })
                        this.disabledStr = true;
                    }else if (res.data.code == 202){
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        })
                        this.addForm.agentno = res.data.data.coCode;
                        this.addForm.trailerLicenseNo = res.data.data.veTargetNo;
                        this.addForm.agentname = res.data.data.proposer;
                        this.addForm.veProperty = res.data.data.veProperty;
                        this.disabledStr = true;
                    }
                }).catch((error) => {
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        alert(status+msg);
                    }else {
                        alert(error);
                    }

                });
            },
            formatDate: function (row, column) {
                // 获取单元格数据
                let data = row.createdate;
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()+ ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
            },
            // 添加主单号到主单列表
            addWaybill: function(index, row){
                this.addForm.masterList += row.waybillnomaster + ',';
            },
            addweight(){
                var _this = this;
                // 运单重量累加
                let lists = _this.wayBillList();
                var split = lists.split(",");
                _this.weightFloat = 0;
                // 判断进出港  进出港返回字段不一样
                if(_this.getBusinesstype() == "I"){
                    split.forEach((item) =>{
                        var url = "http://tjfx.15miaoo.com:8003/orig/orig";
                        var xhr = new XMLHttpRequest();
                        // 访问nginx中的代理服务器
                        xhr.open('get', url+'?waybill='+item+'&imp='+_this.getBusinesstype(), true);
                        xhr.send();
                        xhr.onreadystatechange =  function(){
                            if(xhr.readyState == 4){
                                if(xhr.status ==200){
                                    var data = JSON.parse(xhr.responseText);
                                    data.forEach((itmeData => {
                                        if (itmeData != null){
                                            _this.weightFloat += parseFloat(itmeData.manifesttotalweight);
                                        }
                                    }));
                                }
                            }
                        }
                    });
                }else {
                    split.forEach((item) =>{
                        var url = "http://tjfx.15miaoo.com:8003/orig/orig";
                        var xhr = new XMLHttpRequest();
                        // 访问nginx中的代理服务器
                        xhr.open('get', url+'?waybill='+item+'&imp='+_this.getBusinesstype(), true);
                        xhr.send();
                        xhr.onreadystatechange =  function(){
                            if(xhr.readyState == 4){
                                if(xhr.status ==200){
                                    var data = JSON.parse(xhr.responseText);
                                    data.forEach((itmeData => {
                                        if (itmeData != null){
                                            _this.weightFloat += parseFloat(itmeData.preparetotalweight);
                                        }
                                    }));
                                }
                            }
                        }
                    });
                }
                return _this.weightFloat;
            },
            addsubmit(){
                this.addForm.masterList = this.wayBillList();
                this.addForm.remark = this.weightFloat.toString();
                let para = Object.assign({}, this.addForm);
                save(para).then((res) => {
                    if (res.data.code == 200){
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.$router.push({path:'/Page6',query:{}});
                        this.$refs['addForm'].resetFields();
                    }else {
                        this.$message({
                            message: '提交失败',
                            type: 'error'
                        });
                    }
                }).catch(error => alert(error));
            },
            getBusinesstype:function(){
                let businesstype = this.addForm.businesstype;
                if (businesstype == '进口提货'){
                    businesstype = 'I';
                }else if (businesstype == '出口送货'){
                    businesstype = 'E';
                }else if (businesstype == '分拨业务'){
                    businesstype = 'I';
                }else if (businesstype == '调拨业务'){
                    businesstype = 'E';
                }
                return businesstype;
            },
            // 申请添加
            saveSubmit (){
                let _this = this;
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            _this.addsubmit();
                        }).catch(() =>{

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 添加页面主单列表 结尾逗号处理
            wayBillList:function () {
                if (this.addForm.masterList.endsWith(",")==true){
                    return this.addForm.masterList.substring(0,this.addForm.masterList.length-1);
                }else {
                    return this.addForm.masterList
                }
            }
        },
        mounted() {
            this.getYardList();
        },
        computed: {
        },
        watch: {
            'addForm.masterList':{
                handler: function() {
                    this.addForm.remark = "";
                    this.addForm.masterList = this.addForm.masterList.replaceAll("，",",");
                    this.addweight();
                },
            }
        }
    }
</script>

<style scoped>
    /*.father{*/
    /*    position: relative;*/
    /*}*/
    /*.sun{*/
    /*    position: absolute;*/
    /*    top:-220px;*/
    /*    right:80px*/
    /*}*/


</style>