<template>
    <view class="page-wrap">
        <!--        <cu-custom :backUrl="'/pages/index/index'" :isBack="true" bgColor="bg-gradual-blue">
            <block slot="content">库存列表</block>
        </cu-custom> -->

        <view class="search-panel">
            <u-search :show-action="false" v-model="searchForm.tradeName" placeholder="搜索商品名称" @search="refreshList"
                @clear="refreshList"></u-search>
            <view class="action-row">
                <el-button class="action-button" type="primary" @click="refreshList">查询</el-button>
                <el-button class="action-button" plain @click="resetSearch">重置</el-button>
            </view>
        </view>

        <view class="summary-row">
            <text>共 {{ tablePage.total }} 条库存，已全部展示</text>
            <text v-if="loading">加载中...</text>
        </view>

        <view v-if="!loading && dataList.length === 0" class="empty-state">暂无库存数据</view>

        <view v-else class="table-wrap">
            <el-table class="stock-el-table" :data="dataList" border stripe height="calc(100vh - 260px)"
                style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="tradeName" label="商品名称" min-width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span class="text-strong">{{ scope.row.tradeName || '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="brand" label="品牌" width="100" align="center">
                    <template slot-scope="scope">{{ scope.row.brand || '-' }}</template>
                </el-table-column>
                <el-table-column prop="specification" label="规格" width="110" align="center">
                    <template slot-scope="scope">{{ scope.row.specification || '-' }}</template>
                </el-table-column>
                <el-table-column prop="company" label="单位" width="80" align="center">
                    <template slot-scope="scope">{{ scope.row.company || '-' }}</template>
                </el-table-column>
                <el-table-column prop="tradeNumber" label="实时库存量" width="110" align="center">
                    <template slot-scope="scope">
                        <span class="text-surplus">{{ formatNumber(scope.row.tradeNumber) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="allNumber" label="累计入库量" width="110" align="center">
                    <template slot-scope="scope">{{ formatNumber(scope.row.allNumber) }}</template>
                </el-table-column>
                <el-table-column prop="borrowNumber" label="累计领用量" width="110" align="center">
                    <template slot-scope="scope">{{ calcBorrowNumber(scope.row) }}</template>
                </el-table-column>
                <el-table-column prop="lossNumber" label="累计报损量" width="110" align="center">
                    <template slot-scope="scope">{{ calcLossNumber(scope.row) }}</template>
                </el-table-column>
              <!--  <el-table-column prop="warnNum" label="库存提醒数量" width="130" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.warnNum" size="mini" @blur="changeWarnNum(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="warnFlag" label="是否开启库存提醒" width="150" align="center">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.warnFlag === '1'" active-color="#13ce66" inactive-color="#ff4949"
                            @change="updateWarnFlag(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column> -->
				  <!--  <el-table-column label="操作" width="90" align="center" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
						</template>
					</el-table-column> -->
            </el-table>
        </view>

        <edit-trade-name-dialog ref="editTradeNameDialog" @success="refreshList"></edit-trade-name-dialog>
    </view>
</template>

<script>
import WareHouseService from '@/api/psi/WareHouseService'
import EditTradeNameDialog from './EditTradeNameDialog.vue'

export default {
    name: 'WareHouseSummaryList',
    components: {
        EditTradeNameDialog
    },
    data() {
        return {
            loading: false,
            searchForm: {
                tradeName: ''
            },
            dataList: [],
            tablePage: {
                total: 0,
                currentPage: 1,
                pageSize: 1000000,
                orders: []
            }
        }
    },
    wareHouseService: null,
    created() {
        this.wareHouseService = new WareHouseService()
        this.refreshList()
    },
    onPullDownRefresh() {
        this.refreshList().finally(() => {
            uni.stopPullDownRefresh()
        })
    },
    methods: {
        getSearchParams() {
            return {
                tradeName: this.searchForm.tradeName
            }
        },
        async refreshList() {
            this.tablePage.currentPage = 1
            this.loading = true
            try {
                const data = await this.wareHouseService.wareHouseSummaryList({
                    current: 1,
                    size: this.tablePage.pageSize,
                    orders: this.tablePage.orders,
                    ...this.getSearchParams()
                })
                this.dataList = (data && data.records) || []
                this.tablePage.total = (data && data.total) || this.dataList.length
            } finally {
                this.loading = false
            }
        },
        resetSearch() {
            this.searchForm = {
                tradeName: ''
            }
            this.refreshList()
        },
        formatNumber(value) {
            if (value === null || value === undefined || value === '') {
                return '0'
            }
            return value
        },
        calcBorrowNumber(row) {
            if (!row.borrowNumber || !row.spec) return 0
            return parseFloat((row.borrowNumber / row.spec).toFixed(4))
        },
        calcLossNumber(row) {
            if (row.lossNumber && row.spec) {
                return this.trimNumber(parseFloat(row.lossNumber) / parseFloat(row.spec))
            }
            return '0'
        },
        trimNumber(value) {
            if (Number.isNaN(value)) {
                return '0'
            }
            return Number.isInteger(value) ? String(value) : value.toFixed(4)
        },
        async updateWarnFlag(row) {
            try {
                await this.wareHouseService.updateWarnFlagByTradeNameAndType(row.tradeName, row.wareHouseType)
                uni.showToast({
                    title: '提醒状态已更新',
                    icon: 'success'
                })
                this.refreshList()
            } catch (e) {
                this.refreshList()
            }
        },
        async changeWarnNum(row) {
            const warnNum = row.warnNum === '' || row.warnNum === null || row.warnNum === undefined ? 0 : row.warnNum
            try {
                await this.wareHouseService.updateWarnNumByTradeNameAndType(row.tradeName, row.wareHouseType, warnNum)
                uni.showToast({
                    title: '提醒数量已更新',
                    icon: 'success'
                })
                this.refreshList()
            } catch (e) {
                this.refreshList()
            }
        },
        edit(row) {
            this.$refs.editTradeNameDialog.open(row)
        }
    }
}
</script>

<style scoped>
.page-wrap {
    min-height: 100vh;
    padding: 20rpx 24rpx 48rpx;
    background: #f6f8fb;
}

.search-panel {
    padding: 22rpx;
    background: #fff;
    border-radius: 18rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
}

.filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16rpx;
    margin-top: 18rpx;
}

.filter-item {
    min-width: 0;
    padding: 18rpx 20rpx;
    background: #f8fafc;
    border-radius: 14rpx;
}

.filter-label {
    display: block;
    font-size: 22rpx;
    color: #64748b;
}

.filter-value {
    display: block;
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-row {
    display: flex;
    gap: 16rpx;
    margin-top: 18rpx;
}

.action-button {
    flex: 1;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 22rpx 4rpx 12rpx;
    font-size: 24rpx;
    color: #64748b;
}

.empty-state {
    padding: 120rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #94a3b8;
}

.table-wrap {
    background: #fff;
    border-radius: 14rpx;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.text-strong {
    font-weight: 700;
}

.text-surplus {
    font-weight: 800;
    color: #0f766e;
}

.stock-el-table {
    font-size: 24rpx;
}
</style>
