<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #indexPage {
        font-family: Source Han Sans SC;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
    }

    .common-screen-container .common-screen-item,
    .common-screen-item-button,
    .common-refresh-button,
    .common-add-button {
        margin-bottom: 10px;
    }

    .el-input-group__prepend {
        width: 100px;
        background: #eee;
        color: #666;
    }

    .common-refresh-button {
        margin-right: 20px;
    }

    .common-screen-container .common-screen-condition {
        width: 240px;
    }

    .form-item-container {
        width: 200px;
    }

    .form-item-container .el-select {
        width: 100%;
    }

    .common-add-button {
        margin-right: 30px;
    }

    .common-submit-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #7438D5;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

    .choice-item-button {
        justify-content: flex-end;
    }

    .choice-item-cancel {
        color: #999;
        margin-right: 30px;
    }

    .select-option-container {
        width: 200px;
    }

    .option-id {
        width: 70px;
        flex-shrink: 0;
    }

    .select-pagination .el-pagination {
        margin: 0;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="indexPage" v-cloak v-loading="isAjax">
    <div class="common-header-container">
        备货管理
    </div>
    <div class="common-screen-container">
        <div class="common-refresh-button" @click="getIndexList">
            <i class="el-icon-refresh"></i>
        </div>
        <div class="common-button common-add-button" @click="operation('add')">
            <i class="el-icon-plus"></i>备货
        </div>
        <div class="display-flex common-screen-item common-screen-item-vague">
            <div class="common-screen-condition">
                <el-input placeholder="请输入内容" v-model="searchForm.form_1_value" class="input-with-select" size="small">
                    <el-select v-model="searchForm.form_1_key" slot="prepend" placeholder="请选择">
                        <el-option label="自提点ID" value="store_id"></el-option>
                        <el-option label="自提点名称" value="store_name"></el-option>
                    </el-select>
                </el-input>
            </div>
        </div>
        <div class="display-flex common-screen-item common-screen-item-vague">
            <div class="common-screen-condition">
                <el-input placeholder="请输入内容" v-model="searchForm.form_2_value" class="input-with-select" size="small">
                    <el-select v-model="searchForm.form_2_key" slot="prepend" placeholder="请选择">
                        <el-option label="物流公司" value="express_name"></el-option>
                        <el-option label="物流单号" value="express_no"></el-option>
                    </el-select>
                </el-input>
            </div>
        </div>
        <div class="display-flex common-screen-item-button">
            <div class="common-button common-reset-button" @click="screenEmpty">重置</div>
            <div class="common-button common-screen-button" @click="getIndexList">筛 选</div>
        </div>
    </div>
    <div class="common-table-container" v-loading="tableAjax">
        <el-table :data="indexList" border stripe>
            <el-table-column prop="id" label="ID" width="80" align="center">
            </el-table-column>
            <el-table-column prop="store_id" label="自提点名称" min-width="260">
                <template slot-scope="scope">
                    <div v-if="scope.row.store">{{scope.row.store.name}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column prop="express_name" label="物流公司" min-width="130">
                <template slot-scope="scope">
                    <div v-if="scope.row.express_name">{{scope.row.express_name}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column prop="express_no" label="物流单号" width="160">
                <template slot-scope="scope">
                    <div v-if="scope.row.express_no">{{scope.row.express_no}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column prop="express_no" label="发货状态" width="150" align="center">
                <template slot-scope="scope">
                    <div class="display-flex-c" v-if="scope.row.dispatch_status==0">
                        <span class="common-status-dot common-status-default-dot"></span>
                        <span class="common-status-default">{{scope.row.dispatch_status_text}}</span>
                    </div>
                    <div class="display-flex-c" v-if="scope.row.dispatch_status==1">
                        <span class="common-status-dot common-status-normal-dot"></span>
                        <span class="common-status-normal">{{scope.row.dispatch_status_text}}</span>
                    </div>
                    <div class="display-flex-c" v-if="scope.row.dispatch_status==2">
                        <span class="common-status-dot common-status-special-dot"></span>
                        <span class="common-status-special">{{scope.row.dispatch_status_text}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="express_no" label="发货时间" width="150" align="center">
                <template slot-scope="scope">
                    <div>
                        {{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="250">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.dispatch_status==0" class="common-edit-text" @click="operation('edit',scope.row)">编辑</span>
                        <span class="common-edit-text" style="color: #444;"
                            @click="operation('detail',scope.row)">详情</span>
                        <span v-if="scope.row.dispatch_status!=2" class="common-edit-text" style="color: #444;"
                            @click="operation('addexpress',scope.row)">发货</span>
                        <span class="common-edit-text" style="color: #444;"
                            @click="operation('printing',scope.row)">打印发货单</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="common-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
        </el-pagination>
    </div>
    <div class="dialog-isbutton-container">
        <el-dialog title="物流信息" :visible.sync="expressDialog" :before-close="operation">
            <el-form :model="expressData" label-width="80px">
                <el-form-item label="快递公司">
                    <div class="form-item-container">
                        <el-select class="select-page-container" v-model="expressData.express_name" filterable
                            size="medium" placeholder="请选择快递公司" :filter-method="selectFilter">
                            <el-option v-for="item in expressCompany" :key="item" :label="item.name" :value="item.id">
                                <div class="select-option-container display-flex">
                                    <div class="option-id">{{ item.id }}</div>
                                    <div class="flex-1">{{ item.name }}</div>
                                </div>
                            </el-option>
                            <div class="select-pagination">
                                <el-pagination class="pagination" :current-page="selectCurrentPage"
                                    :total="selectTotalPage" layout="total, prev, pager,next" pager-count="5"
                                    @current-change="selectCurrentChange" />
                                </el-pagination>
                            </div>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="快递单号">
                    <div class="form-item-container">
                        <el-input v-model="expressData.express_no" placeholder="请输入快递单号" size="medium">
                        </el-input>
                    </div>
                </el-form-item>
            </el-form>
            <div class="dialog-button-container">
                <div class="dialog-button dialog-button-cancel" @click="operation">取消</div>
                <div class="dialog-button dialog-button-define" @click="operation('successexpress')">确定</div>
            </div>
        </el-dialog>
    </div>
</div>