<template>
    <navigation :title="typeInfo?.title" :back-url="typeInfo?.backUrl"></navigation>

    <view class="report-page contentBox">
        <uv-form v-if="typeInfo?.mode" labelPosition="top" labelWidth="100" class="form" :model="formData"
            ref="formRef">

            <uv-form-item prop="beginDate">
                <view class="carPickerText" :style="formData.beginDate ? 'color: #303133;' : ''"
                    @tap="openCalendar('start')">
                    <text class="mr-16"> {{ formData.beginDate || '请选择开始月份' }}</text>
                    <uv-icon name="arrow-down-fill" />
                </view>

            </uv-form-item>
            <text style="width: 20%; text-align: center;">至</text>
            <uv-form-item prop="endDate ">
                <view class="carPickerText" :style="formData.endDate ? 'color: #303133;' : ''"
                    @tap=" openCalendar('end')">
                    <text class="mr-16">{{ formData.endDate || '请选择结束月份' }}</text>
                    <uv-icon name="arrow-down-fill" />
                </view>

            </uv-form-item>


        </uv-form>

        <view class="topSearch " v-if="!typeInfo?.mode">
            <uni-easyinput type="text" v-model="formData.keyword" prefixIcon="search" :inputBorder="false"
                @iconClick="getReport" placeholder="请输入搜索内容" />
        </view>
        <!-- 表格 -->
        <scroll-view class="table-scroll containerBox" scroll-x>
            <view class="table-box">
                <view class="table-header" border>
                    <view class="th key-col"></view>
                    <view class="th">A</view>
                    <view class="th">B</view>
                    <view class="th">C</view>
                    <view class="th">D</view>
                    <view class="th">E</view>
                    <view class="th">F</view>
                    <view class="th">G</view>
                    <view class="th">H</view>
                </view>

                <view class="table-header" v-if="keyType === 'dailyReport' || keyType === 'monthlyReport'">
                    <view class="th key-col"></view>
                    <view class="th">物料编码</view>
                    <view class="th">物料名称</view>
                    <view class="th">物料规格</view>
                    <view class="th">计量单位</view>


                    <view v-if="keyType === 'dailyReport'" class="th">上日结余</view>
                    <view v-if="keyType === 'dailyReport'" class="th">日入库</view>
                    <view v-if="keyType === 'dailyReport'" class="th">日出库</view>
                    <view v-if="keyType === 'dailyReport'" class="th">日结余</view>


                    <view v-if="keyType === 'monthlyReport'" class="th">上月结余</view>
                    <view v-if="keyType === 'monthlyReport'" class="th">月入库</view>
                    <view v-if="keyType === 'monthlyReport'" class="th">月出库</view>
                    <view v-if="keyType === 'monthlyReport'" class="th">日结余</view>


                </view>

                <view class="table-header" v-if="keyType === 'companyReport' || keyType === 'warehouseReport'">
                    <view class="th key-col"></view>
                    <view class="th">物料编码</view>
                    <view class="th">物料名称</view>
                    <view class="th">库存量</view>
                    <view class="th">计量单位</view>
                    <view class="th">物料类别</view>
                    <view class="th">物料分类</view>
                    <view class="th">物料规格</view>
                    <view class="th">物料型号</view>


                </view>

                <view class="table-body" v-if="keyType === 'dailyReport' || keyType === 'monthlyReport'">
                    <view class="tr" v-for="(item, index) in list" :key="item.materialId">
                        <view class="td key-col">{{ index + 1 }}</view>
                        <view class="td">{{ item.materialCode }}</view>
                        <view class="td">{{ item.materialName }}</view>
                        <view class="td">{{ item.specification || '-' }}</view>
                        <view class="td">{{ item.unitName }}</view>
                        <view>

                        </view>
                        <view class="td">{{ item.previousBalance }}</view>
                        <view class="td">{{ item.dailyInbound }}</view>
                        <view class="td">{{ item.dailyOutbound }}</view>
                        <view class="td">{{ item.dailyBalance }}</view>
                    </view>
                    <view class="empty" v-if="list.length === 0">暂无数据</view>
                </view>

                <view class="table-body" v-if="keyType === 'companyReport' || keyType === 'warehouseReport'">
                    <view class="tr" v-for="(item, index) in list" :key="item.materialId">
                        <view class="td key-col">{{ index + 1 }}</view>
                        <view class="td">{{ item.materialCode }}</view>
                        <view class="td">{{ item.materialName }}</view>
                        <view class="td">{{ item?.stockQty || item?.quantity }}</view>
                        <view class="td">{{ item.unitName }}</view>
                        <view class="td">{{ item.typeName }}</view>
                        <view class="td">{{ item.materialShortName }}</view>
                        <view class="td">{{ item.specification }}</view>
                        <view class="td">{{ item.model }}</view>
                    </view>
                    <view class="empty" v-if="list.length === 0">暂无数据</view>
                </view>
            </view>
        </scroll-view>

        <uv-datetime-picker :mode="typeInfo?.mode" v-model="pickerValue" ref="calendarRef"
            @confirm="confirm"></uv-datetime-picker>
    </view>
</template>

<script setup>
import { dailyReportList, companyStockReportList } from "@/api/report";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, toRefs, watch } from 'vue';
import { formatDate } from "../until";
import dayjs from "dayjs";
import Navigation from '../components/Navigation.vue';
import { onMounted } from "vue";
import { inventoryList } from '@/api/inventoryInfo';

const OPERATE_CONFIG = {
    dailyReport: {
        mode: 'date',
        title: '库存日报',
        format: 'YYYY-MM-DD',
        backUrl: '/pages/warehousing/Report/daily'
    },
    monthlyReport: {
        mode: 'year-month',
        title: '库存月报',
        format: 'YYYY-MM',
        backUrl: '/pages/warehousing/Report/monthly'
    },
    companyReport: {
        mode: '',
        title: '公司库存报表',
        format: '',
        backUrl: 'pages/warehousing/index'
    },
    warehouseReport: {
        mode: '',
        title: '',
        format: '',
        backUrl: 'pages/warehousing/Report/warehouse'
    },

}
const props = defineProps({
    keyType: {        //报表：日、月
        type: String,
        default: ''
    }
})

const { keyType } = toRefs(props)

let currentType = '' // start / end
const pickerValue = ref('')
const calendarRef = ref(null)

const list = ref([])
const pathParams = ref({})
const typeInfo = ref({
    mode: '',
    title: '库存日报',
    format: 'YYYY-MM-DD',
    backUrl: '/pages/warehousing/report/daily'
})

const formData = reactive({
    beginDate: formatDate(dayjs(), typeInfo.value.format),
    endDate: formatDate(dayjs(), typeInfo.value.format),
    keyword: '',
})

// 获取数据
const getReport = () => {
    let params = {}
    if (keyType.value == 'monthlyReport') {
        params.warehouseCode = pathParams.value.warehouseCode
        params.beginDate = dayjs(formData.beginDate).startOf('month').format('YYYY-MM-DD')
        params.endDate = dayjs(params.endDate).endOf('month').format('YYYY-MM-DD')
    }
    if (keyType.value == 'dailyReport') {
        params.warehouseCode = pathParams.value.warehouseCode
        params.beginDate = formData.beginDate
        params.endDate = formData.endDate
    }
    if (keyType.value == 'companyReport') {
        params.keyword = formData.keyword

    }
    if (keyType.value == 'warehouseReport') {
        params.keyword = formData.keyword
        params.warehouseCode = pathParams.value.warehouseCode


    }
    console.log(params, '参数===》');
    if (keyType.value == 'companyReport') {
        companyStockReportList(params).then(res => {
            if (res && res.code == 200) {
                list.value = res.data || []
            }
        })
    } else if (keyType.value == 'monthlyReport' || keyType.value == 'dailyReport') {
        dailyReportList(params).then(res => {
            if (res && res.code == 200) {
                list.value = res.data || []
            }
        })
    }
    else if (keyType.value == 'warehouseReport') {
        inventoryList(params).then(res => {
            if (res && res.code == 200) {
                list.value = res.data || []
            }
        })
    }



}
onMounted(() => {
    getReport()
    if (keyType.value == 'monthlyReport' || keyType.value == 'dailyReport') {
        formData.beginDate = formatDate(dayjs(), typeInfo.value.format)
        formData.endDate = formatDate(dayjs(), typeInfo.value.format)
    }
    if (keyType.value == 'companyReport') {
        formData.keyword = ''

    }

})
// 确定选择
const confirm = (val) => {
    console.log('确定按钮');

    if (currentType === 'start') {
        formData.beginDate = formatDate(val.value, typeInfo.value.format)
    } else {
        formData.endDate = formatDate(val.value, typeInfo.value.format)
    }
    getReport()
}

// 开始、结束日期选择器
const openCalendar = (val) => {
    if (val == 'start') pickerValue.value = formData.beginDate
    else pickerValue.value = formData.endDate
    currentType = val
    calendarRef.value.open()
}

onLoad((options) => {
    pathParams.value = options || {}

})

watch(() => keyType.value,
    (d) => {
        if (!d) return;
        typeInfo.value = OPERATE_CONFIG[d]
        if (pathParams.value.title) {
            typeInfo.value.title = pathParams.value.title + '库存报表'
        }

    }, { deep: true, immediate: true })



</script>

<style scoped lang="scss">
.report-page {
    padding: 20rpx;
    background: #fff;
    min-height: 100vh;
}

.date-item {
    flex: 1;
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    font-size: 26rpx;
}

.table-scroll {
    background: #fff;
    border-radius: 16rpx;
}

.table-box {
    width: 1000rpx;
    margin-bottom: 20px;
}

.table-header {
    display: flex;
}

.th,
.td {
    flex: 1;
    min-width: 120rpx;
    text-align: center;
    font-size: 14px;
}

.th {
    color: #333;
    border: 1rpx solid #f0f0f0;
    border-bottom: 0;
}

.td {
    color: #666;
    border: 1rpx solid #f0f0f0;
    border-bottom: 0;
}

.tr:last-child {
    border-bottom: 1rpx solid #f0f0f0;
}

.key-col {
    width: 40px;
    background: #f8f9fa;
    font-weight: bold;
}

.tr {
    display: flex;
    border-bottom: 0;
}

.empty {
    padding: 80rpx 0;
    text-align: center;
    color: #999;
}

::v-deep.form {
    display: flex;
    justify-content: center;
    align-items: center;

    .uv-form-item {
        width: 45%;

        .uv-form-item__body {
            text-align: center;
            padding: 0;
        }

    }

    margin-bottom: 16px;
}

.carPickerText {
    border-bottom: 1px solid #D3D3D3;
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 4px;
}

.topSearch {
    position: fixed;
    top: 65rpx;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 4rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}
</style>