<style lang="less" >
    #tiipChartWarehouseDetail{
        height:100%;
        background:#eef4fe;
        display:flex;
        flex-direction: column;
        .Table{
            flex-grow: 1;
            height:1px;
            overflow: auto;
        }
    }
</style>

<template>
  <div id="tiipChartWarehouseDetail">
    <div class="Table">
        <customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>  
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'

export default {
    name: 'tiipChartWarehouseDetail',
    data () {
        return {
            list:[],
            columns:[],
            tableStyle:{
                theadBgColor:'rgba(223,238,253,1)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100vh)',
                tbodyTrBorderBottom:'1px solid #dbe9f8',
                width:'100%'
            },
        }
    },
    computed:{
        ...mapState({
            warehouseDetail:state => state.kanban.warehouseDetail,
        })
    },
    async mounted(){
        window.d = this;
    },
    async activated(){
        this.$store.dispatch("CAHNGE_META_INFO", {title:this.warehouseDetail.sStoreName+'明细'});
        await this.getData();
        if(this.warehouseDetail.ummStoreGUID == "637a600b-c40f-4933-991f-4426374649d2"){
            this.columns = [
                {
                    width:'40%',
                    name:'等级',
                    align:'center',
                    field:'sGradeHTML',
                    // underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'30%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'30%',
                    name:'匹数',
                    align:'center',
                    field:'nStockPieceQty',
                }
            ]
        }else{
            this.columns = [
                {
                    width:'40%',
                    name:'类别',
                    align:'center',
                    field:'sGradeHTML',
                    // underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'30%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'30%',
                    name:'匹数',
                    align:'center',
                    field:'nStockPieceQty',
                }
            ]
        }
    },
    methods:{
        async getData(){
            let res = await this.request('getBoss',{
                data:[
                    {key:"url",value:'Inventory situation Store_GroupBy'},
                    {key:"ummStoreGUID",value:this.warehouseDetail.ummStoreGUID},
                ],
                params:{},
            },'加载中',{})
            res.map(x=>{
                x.sGradeHTML = `<div><span style="color:#FF6633">${x.sGrade || ''}</div>`;
                x.nQtyHTML = `<div><span style="color:#339966;">${x.nQty || ''}</span></div>`;
            })
            this.list = res;
        }
    },
    components:{
        customerTable,
    },
}
</script>