<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .btn-default, .btn-success { text-align: left; }
        .btn-success h4 .small { color: #f5f5f5; }
        .modifydate { margin-left: 1em; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <h3 class="alignleft">[{{productObj.productCode}}]</h3>
            <h3 class="alignleft">{{productObj.name}}</h3>
            <h3 class="alignleft" v-show="attrObj.id != null && attrObj.id > 0">{{attrObj.name}}</h3>
            <h3 class="alignright">可租用（佳醫在庫）清單</h3>
            <div class="clear"></div>
            <hr />
            <div>※點選產編即可加入或移除選擇。</div>
            <a class="col-md-2 col-sm-4 col-xs-6 btn" 
               v-for="(item, idx) in list"
               @click="selected(item)" 
               :class="[isChecked(item) ? 'btn-success':'btn-default']">
                <h4>
                    <span class="small">({{idx+1}})</span> {{item.propertyNo}}
                    <div class="modifydate">
                        <label class="label label-info">{{item.modifyDate}}</label>
                        <i v-if="isChecked(item)" class="far fa-check-square float-right"></i>
                        <i v-else class="far fa-square float-right"></i>
                    </div>
                </h4>
            </a>
        </div>
        <div class="col-md-12 col-xs-12 text-center">
            <hr />
            <a class="btn btn-info" @click="closeAndReloadParent()">關閉</a>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="_stocklist.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>