<template>
    <el-row>
        <el-card  style="background-color: #F5F7FA">
            <!--            搜索区域-->
            <el-row  class="toolbar">
                <el-col :span="5">
                    <el-input v-model="queryInfo.waybillNum" prefix-icon="el-icon-search" size="small"
                              placeholder="主单号" clearable>
                        <template slot="prepend">主单号</template>
                    </el-input>
                </el-col>
                <el-col :span="5" style="margin-left: 10px">
                    <el-input v-model="queryInfo.hbs_serial_number" prefix-icon="el-icon-search" size="small"
                              placeholder="分单号" clearable>
                        <template slot="prepend">分单号</template>
                    </el-input>
                </el-col>
                <el-col :span="5" style="margin-left: 10px">
                    <el-input v-model="queryInfo.opter" prefix-icon="el-icon-search" size="small"
                              placeholder="操作代理人" clearable>
                        <template slot="prepend">代理人</template>
                    </el-input>
                </el-col>
                <el-col :span="5" style="margin-left: 10px">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
                        查询
                    </el-button>
<!--                    <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>-->
                </el-col>
            </el-row>
            <!--            列表区域-->
            <el-row>
                <template>
                    <el-table
                            :data="tableData"
                            border
                            :cell-style="{textAlign:'center'}"
                            style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                    >
                        <el-table-column
                                prop="waybillNum"
                                label="主单号">
                        </el-table-column>
                        <el-table-column
                                prop="hbs_serial_number"
                                label="分单号">
                        </el-table-column>
                        <el-table-column
                                prop="opter"
                                label="代理人">
                        </el-table-column>
                        <el-table-column
                                prop="origin"
                                label="起始站">
                        </el-table-column>
                        <el-table-column
                                prop="destination"
                                label="目的站">
                        </el-table-column>
                        <el-table-column
                                prop="quantity_picecs"
                                label="件数">
                        </el-table-column>
                        <el-table-column
                                prop="quantity_weight"
                                label="重量">
                        </el-table-column>
                        <el-table-column
                                prop="cariier"
                                label="承运人">
                        </el-table-column>
                        <el-table-column
                                prop="flightNumber"
                                label="航班号">
                        </el-table-column>
                        <el-table-column
                                prop="day"
                                label="航班日期">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="160">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
<!--                                <el-button type="danger" size="mini" @click="applyDel(scope.row)">删除</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </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-row>
                <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%" >
                    <el-form  :model="addForm"  :rules="rules" ref="addForm" style="margin-top: 40px">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label=" " :label-width="formLabelWidth"  prop="billTypeName">
                                    <el-input v-model="addForm.billTypeName" autocomplete="off" size="small" style="width: 260px">
                                        <template slot="prepend">费用类别名称</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label=" " :label-width="formLabelWidth" prop="billRateUnit">
                                    <el-input v-model="addForm.billRateUnit" autocomplete="off" size="small" style="width: 260px">
                                        <template slot="prepend">计费单位</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label=" " :label-width="formLabelWidth"  prop="billRate">
                                    <el-input v-model="addForm.billRate" autocomplete="off" size="small" style="width: 260px">
                                        <template slot="prepend">费率</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="apply_dialog = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
                    </div>
                </el-dialog>
            </el-row>
        </el-card>
    </el-row>
</template>

<script>
    import {selectList,selectByKey} from '../../api/remote_interface/byont_import';

    export default {
        name: "Telegram",
        data() {
            return {
                queryInfo: {
                    waybillNum:'',
                    hbs_serial_number:'',
                    opter:'',
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 10,
                },
                total: 0,
                tableData:[],
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dis: undefined,
                dialogApply: 'update',
                apply_dialog: false,
                addForm: {
                    billTypeName: '',
                    billTypeId: '',
                    billRateUnit: '',
                    billRate: '',
                },
                formLabelWidth: '220px',
                rules: {
                    billTypeName: [
                        {  required: true, message: '必填', trigger: 'change' }
                    ],
                },
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.queryInfo.pageNum = val
                this.getList()
            },
            handleSizeChange(val) {
                this.queryInfo.pageSize = val
                this.getList()
            },
            getList() {
                const _this = this
                selectList(this.queryInfo).then((response) => {
                    const res = response.data
                    console.log(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())
                })
            },
// 打开编辑
            applyEdit(row) {
                this.$router.push({
                    path:'/Way',
                    query:{id:row.id}
                })
            },
            // 编辑功能
            edit() {
                // 进行表单的预验证
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    selectByKey(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 = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
        },
        mounted() {
            this.getList();
        }
    }
</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;
    }
    .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>