<style lang="less">
    #varieties{
        table{
            >thead{
                width:calc(100% - 1em);
                >tr{
                    height:35px;
                }
            }
            >tbody{
                display: block;
                height: 200px;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                height: calc(100vh - 160px);
                >tr{
                    height:30px;
                    background:#fff;
                    &.name{
                        text-align: left;
                        >td{
                            padding-left:15px;
                            color:#5E9AFE;
                            text-decoration: underline;
                            // >span{
                            //     border-bottom:1px solid #5E9AFE;
                            // }
                        }
                    }
                    &:not(.name){
                        >td:not(:first-child){
                            border-top:1px solid #eef4fe;
                        }
                    }
                }
            }
            >tbody tr,>thead{
                display: table;
                width: 100%;
                table-layout: fixed; /**表格列的宽度由表格宽度决定，不由内容决定*/
                text-align: center;
            }
            >thead th,>tbody td{
                width:50px;
            }
        }
    }
</style>
<template>
    <div id="varieties">
        <div class="search">
            <searchComponent :search="search" :status="[]"/>
        </div>
        <table align="center" v-if="list.length>0">
            <thead>
                <tr>
                    <th>品种</th>
                    <th>匹数</th>
                    <th>米数</th>
                    <th>码数</th>
                    <th>重量</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(v,k) in list">
                    <tr class="name" :key="k+'_name'">
                        <td @click="toDetail(k)">
                            <span style="font-size: 13px;">{{v.sSampleMaterialNo||""}}</span>
                            <span>{{v.sSampleMaterialNo&&v.sSampleMaterialName?",":""}}</span>
                            <span style="font-size: 13px">{{v.sSampleMaterialName||""}}</span>
                        </td>
                    </tr>
                    <tr :key="k+'_1'">
                        <td style="color:#048ECA;">期初库存</td>
                        <td>{{v.nOldPieceQty||0}}</td>
                        <td style="color:#53A97E;">{{v.nOldLengthM||0}}</td>
                        <td style="color:#53A97E;">{{v.nOldLengthYD||0}}</td>
                        <td>{{v.nOldWeight||0}}</td>
                    </tr>
                    <tr :key="k+'_2'">
                        <td style="color:#048ECA;">本期入库</td>
                        <td>{{v.nInPieceQty||0}}</td>
                        <td style="color:#53A97E;">{{v.nInLengthM||0}}</td>
                        <td style="color:#53A97E;">{{v.nInLengthYD||0}}</td>
                        <td>{{v.nInWeight||0}}</td>
                    </tr>
                    <tr :key="k+'_3'">
                        <td style="color:#048ECA;">本期出库</td>
                        <td>{{v.nOutPieceQty||0}}</td>
                        <td style="color:#53A97E;">{{v.nOutLengthM||0}}</td>
                        <td style="color:#53A97E;">{{v.nOutLengthYD||0}}</td>
                        <td>{{v.nOutWeight||0}}</td>
                    </tr>
                    <tr :key="k+'_4'">
                        <td style="color:#048ECA;">本期库存</td>
                        <td>{{v.nStockPieceQty||0}}</td>
                        <td style="color:#53A97E;">{{v.nStockLengthM||0}}</td>
                        <td style="color:#53A97E;">{{v.nStockLengthYD||0}}</td>
                        <td>{{v.nStockWeight||0}}</td>
                    </tr>
                    <tr :key="k+'_5'" style="height:10px;background:transparent;"/>
                </template>
            </tbody>
        </table>
        <img v-else src="@/assets/noData.jpg" class="_img" style="width:100%" alt="" />
    </div>
</template>
<script>
import Util from "@/libs/util.js"
import searchComponent from '@/components/search'

export default {
    name:"varieties",
    components:{searchComponent},
    data(){
        return{
            search:{
                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
                page:1,
                per_page:30,
                sStatus:'全部'
            },
            list:[],
        }
    },
    created(){
        this.global.$off('searchData');
        this.global.$on('searchData',()=>{
            this.searchData();
        });
    },
      async activated(){
        this.searchData()
    },
    methods:{
        toDetail(index){
            this.$router.push({
                path:"/tiip/receive_varieties_detail",
                query:{
                    sStockPlace:this.list[index].sProviderName,
                    sStoreNo:this.$route.query.sStoreNo,
                    sSampleMaterialNo:this.list[index].sSampleMaterialNo,
                }
            })
        },
        async searchData(){
            var value=await this.request("getTiipReceiveStorage",{
                data:[
                    {key:"url",value:"sMaterial"},
                    {key:"dStartDate",value:this.search.dBeginDate},
                    {key:"dEndDate",value:this.search.dEndDate},
                    {key:"sStoreNo",value:this.$route.query.sStoreNo},
                    {key:"sStockPlace",value:this.$route.query.sStockPlace},
                ]
            },"加载中",{})
            this.list=value
        },
    }
}
</script>