<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <!--Content S-->
    <div class="x_panel">
        <div class="x_title">
            <h2>搜尋</h2>
            <a :href="editUrl(-1)" class="btn btn-success">新增</a>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="x_content top_search">
            <select name="ddlproductType" class="form-control btn btn-default status" v-model="query.productType" @change="getList(1);">
                <option value="-1">= 類型 =</option>
                <option v-for="item in ltProductType" :value="item.value">{{item.name}}</option>
            </select>

            <select name="ddlparentId" class="form-control btn btn-default status" v-model="query.parentId" @change="query.categoryId=-1;getList(1);">
                <option value="-1">= 大分類 =</option>
                <option v-for="item in ltCategory" :value="item.id" v-if="item.parentId == null || item.parentId == -1">{{item.name}}</option>
            </select>
            <select name="ddlcategoryId" class="form-control btn btn-default status" v-model="query.categoryId" @change="getList(1);">
                <option value="-1">= 中分類 =</option>
                <option v-for="item in ltCategory" :value="item.id" v-if="query.parentId > 0 && item.parentId == query.parentId">{{item.name}}</option>
            </select>

            <input type="text" name="keyword" class="form-control keyword" v-model="query.keyword" placeholder="型號、品名、內容、JDE(輸入關鍵字查詢)"
                    @change="query.keyword=$event.target.value" @keypress="keychange($event);" />

            <select name="ddlfreightTypeId" class="form-control btn btn-default status" v-model="query.freightTypeId" @change="getList(1);">
                <option value="-1">= 運費 =</option>
                <option v-for="item in ltFreightType" :value="item.id">{{item.name}}</option>
            </select>

            <select name="ddlstatus" class="form-control btn btn-default status" v-model="query.status" @change="getList(1);">
                <option value="-1">= 上架 =</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>

            <div class="group-btn">
                <button class="btn btn-success" @click="getList(1);">搜尋</button>&nbsp;
                <button class="btn btn-primary" @click="clearCriteria();">清除條件</button>
            </div>
        </div>
    </div>
    <div v-if="pager != null" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-4">
                <div class="dataTables_info">總筆數 {{pager.totalRecord}} 筆, 第 {{pager.startItemIndex}} ~ {{pager.endItemIndex}} 筆</div>
            </div>
            <div class="col-sm-8">
                <div class="dataTables_paginate paging_simple_numbers">
                    <ul class="pagination">
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(1);"><i class="fas fa-angle-double-left"></i></a></li>
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(pager.currentPage - 1 );"><i class="fas fa-angle-left"></i></a></li>

                        <li class="paginate_button" :class="{ active: n == pager.currentPage }" v-for="n in pager.endPage" v-if="n >= pager.startPage">
                            <a @click="goPage(n);">{{n}}</a>
                        </li>

                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.currentPage + 1 );"><i class="fas fa-angle-right"></i></a></li>
                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.totalPage);"><i class="fas fa-angle-double-right"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
        <thead>
            <tr>
                <td></td>
                <td>產品分類</td>
                <td class="text-center">排序</td>
                <td>類型</td>
                <td>型號</td>
                <td>品名</td>
                <td class="text-center">封面圖</td>
                <td class="text-center">運費類型</td>
                <td class="text-center">上架</td>
                <td class="text-right">售價</td>
                <td class="text-right">售價對帳</td>
                <td class="text-right">月租費</td>
                <td class="text-right">月租對帳</td>
                <td class="text-right">週租費</td>
                <td class="text-right">週租對帳</td>
                <td class="text-center">JDE料號</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list">
                <td class="text-center">
                    <a :href="editUrl(item.id)" class="btn btn-success btn-sm"><i class="fas fa-edit"></i></a>
                </td>
                <td>
                    <a :href="editUrl(item.id)" class="small">
                        <div>{{item.paretName}}</div>
                        <div>{{item.cateName}}</div>
                    </a>
                </td>
                <td class="text-center"><a :href="editUrl(item.id)">{{item.sort}}</a></td>
                <td><a :href="editUrl(item.id)">{{item.productTypeString}}</a></td>
                <td><a :href="editUrl(item.id)">{{item.productCode}}</a></td>
                <td><a :href="editUrl(item.id)">{{item.name}}</a></td>
                <td class="text-center"><a :href="editUrl(item.id)"><img :src="item.coverImage" v-if="item.coverImage != null && item.coverImage != ''" /></a></td>
                <td class="text-center"><a :href="editUrl(item.id)">{{item.freightTypeName}}</a></td>
                <td class="text-center" :class="'status' + item.status"><span v-if="item.status == 1">是</span><span v-else>否</span></td>
                <td class="text-right">
                    <span v-if="item.salePrice >= 0">{{item.salePrice}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-right">
                    <span v-if="item.salePriceCost >= 0">{{item.salePriceCost}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-right">
                    <span v-if="item.monthlyCharge >= 0">{{item.monthlyCharge}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-right">
                    <span v-if="item.monthlyCost >= 0" class="blue">{{item.monthlyCost}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-right">
                    <span v-if="item.weeklyCharge >= 0">{{item.weeklyCharge}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-right">
                    <span v-if="item.weeklyCost >= 0" class="blue">{{item.weeklyCost}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-center small"><a :href="editUrl(item.id)">{{item.modelNo}}</a></td>
            </tr>
        </tbody>
    </table>
    <div v-if="pager != null" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-4">
                <div class="dataTables_info">總筆數 {{pager.totalRecord}} 筆, 第 {{pager.startItemIndex}} ~ {{pager.endItemIndex}} 筆</div>
            </div>
            <div class="col-sm-8">
                <div class="dataTables_paginate paging_simple_numbers">
                    <ul class="pagination">
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(1);"><i class="fas fa-angle-double-left"></i></a></li>
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(pager.currentPage - 1 );"><i class="fas fa-angle-left"></i></a></li>

                        <li class="paginate_button" :class="{ active: n == pager.currentPage }" v-for="n in pager.endPage" v-if="n >= pager.startPage">
                            <a @click="goPage(n);">{{n}}</a>
                        </li>

                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.currentPage + 1 );"><i class="fas fa-angle-right"></i></a></li>
                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.totalPage);"><i class="fas fa-angle-double-right"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="list.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>