<template>
    <view class="container">
        <view class="example">
            <uni-forms ref="baseForm" :modelValue="baseFormData" label-width="20vw">

                <uni-forms-item label="生产单位">
                    <uni-data-select
                        v-model="queryParams.CompanyId"
                        :clear="true"
                        :localdata="companyOptions"
                        text-field="deptName"
                        value-field="deptId"
                        @change="getTableData"

                    />
                </uni-forms-item>
                <uni-forms-item label="状态">
                    <uni-data-select
                        v-model="queryParams.state"
                        :clear="true"
                        :localdata="stateList"
                        @change="getTableData"
                    ></uni-data-select>
                </uni-forms-item>
                <uni-forms-item label="合同编号">
                    <input
                        v-model="queryParams.contractcode"
                        class="uni-input custom-input"
                        placeholder="请输入合同编号"
                        @confirm="getTableData"/>
                </uni-forms-item>
                <!-- <uni-forms-item label="合同编号" >
                <view class="uni-form-item uni-column">
                <input class="uni-input" focus placeholder="自动获得焦点" />
                </view>
                </uni-forms-item> -->
            </uni-forms>
            <button type="primary" @click="gotoNewAdd">新增</button>
        </view>

        <view v-if="filteredContracts.length === 0" class="no-data">
            <text>暂无匹配的合同数据</text>
        </view>

        <view v-else>
            <uni-card
                v-for="(contract, index) in filteredContracts"
                :key="contract.saleid"
                :class="index % 2 === 0 ? 'card-even' : 'card-odd'"
                :title="contract.usernames"
                @click="gotoDetail(contract)"
            >
                <uni-row class="demo-uni-row">
                    <uni-col :span="12">
                        <view class="demo-uni-col dark">生产单位: {{ contract.companyName }}</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="demo-uni-col light">合同编号: {{ contract.contractcode }}</view>
                    </uni-col>
                </uni-row>
                <uni-row class="demo-uni-row">
                    <uni-col :span="12">
                        <view class="demo-uni-col dark">制单日期: {{ formatDate(contract.adddate) }}</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="demo-uni-col light">订单金额: {{ contract.contractmoney.toFixed(2) }}</view>
                    </uni-col>
                </uni-row>
                <uni-row class="demo-uni-row">
                    <uni-col :span="12">
                        <view class="demo-uni-col dark">状态: {{ contract.stateText }}</view>
                    </uni-col>
                    <uni-col :span="12" style="display: flex;">
                        <view class="demo-uni-col light">订单类型:</view>
                        <dict-tag :options="orderTypeList" :value="contract.type" style="color: red;"/>
                    </uni-col>
                </uni-row>
            </uni-card>
        </view>
    </view>
</template>

<script setup>
import {listproductList, listsalemain} from "../../../api/orderManager/index.js"
import {computed, getCurrentInstance, onMounted, ref} from "vue"
import {getDicts} from "../../../api/system/dict/data.js"
// import DictTag from '@/components/dict-tag/dict-tag.vue';
import {useOrderManagerStore} from "../../../store/modules/orderManager.js"
// import { log } from "console"
const {proxy} = getCurrentInstance()
// 表单数据
const baseFormData = ref({})
//订单类型
const orderTypeList = ref([])
const paymentValue = ref(0)
const companyValue = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: 999,
    isAsc: 'descending',
    orderByColumn: 'adddate'
})
const queryParams = ref({
    params: {
        state: "0,1,-1,2,-2,3,-3,9,10,11,12,-12,13,-13,14,15,16",
    }
})
// 筛选选项
// const stateList = ref([
// 	{ value: '0', text: "未提交" },
// 	{ value: '1', text: "待商务审核" },
// 	{ value: '-1', text: "商务退回" },
// 	{ value: '2', text: "待财务审核" },
// 	{ value: '-2', text: "财务退回" },
// 	{ value:'3', text: "待审核" },
// 	{ value: '-3', text: "审核退回" },
// 	{ value: '9', text: "待推送分配" },
// 	{ value: '10', text: "待牛力分配" },
// 	{ value: '11', text: "牛力推送失败" },
// ])
const stateList = ref([])
const companyOptions = ref([])

// 合同数据
const contracts = ref([])

// 过滤后的合同数据
const filteredContracts = computed(() => {
    let result = contracts.value

    // 根据生产单位筛选
    if (companyValue.value === 1) {
        result = result.filter(contract => contract.companyName.includes('浙江'))
    } else if (companyValue.value === 2) {
        result = result.filter(contract => contract.companyName.includes('广东'))
    }

    // 可以根据支付方式添加更多筛选逻辑

    return result
})

// 初始化数据
onMounted(() => {
    getDictData()
    getTableData()
    getDeptLists()
})

// 格式化日期
function formatDate(dateString) {
    if (!dateString) return '未知日期'
    return dateString.split(' ')[0]
}

//获取字典数据
const getDictData = () => {
    getDicts("order_state").then(res => {
        console.log('order_state', res.data)
        stateList.value = res.data.map(item => {

            return {
                value: item.dictValue,
                text: item.dictLabel
            }
        })
    })
    getDicts("dazhong_dingdan_type").then(res => {
        console.log('dazhong_dingdan_type', res.data)
        orderTypeList.value = res.data
    })

}
//获取列表数据
const getTableData = () => {

    console.log(queryParams.value)
    listsalemain(queryParams.value, paging.value).then(res => {

        contracts.value = res.rows
        // total.value = res.total;
    });

}
const getDeptLists = () => {
    listproductList().then(res => {
        companyOptions.value = res.data.map(item => {
            return {
                value: item.deptId,
                text: item.deptName
            }
        })
        console.log('companyOptions.value', companyOptions.value)
    });

}

// 筛选合同
function filterContracts(e) {
    console.log("筛选条件变化:", e)
    // 计算属性会自动更新，无需额外操作
}

//编号输入框事件
const handleInput = (e) => {
    console.log('handleInput', e.detail.value)
}

// 跳转到详情页
function gotoDetail(contract) {
    console.log("查看合同详情:", contract)
    // proxy.$tab.navigateTo('/pages/work/yonghu/detail')
    // proxy.$tab.navigateTo(`/pages/work/yonghu/detail?saleid=${contract.saleid}`)
    // proxy.$tab.navigateTo('pages/work/OrderManager/OrderDetail')
    //存储要传的值到pinia
    useOrderManagerStore().addOrder(contract)
    console.log('数据', useOrderManagerStore().orders)
    if (contract.state == '0') {
        uni.navigateTo({
            url: "/pages/work/OrderManager/components/EditData?"
        });
    } else {
        uni.navigateTo({
            url: "/pages/work/OrderManager/components/LookData"
        });
    }

}

const gotoNewAdd = () => {
    uni.navigateTo({
        url: "/pages/work/OrderManager/components/NewAdd"
    });
}
</script>

<style lang="scss" scoped>
.custom-input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    height: 35px;
}

.container {
    padding: 10px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

.example {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

:deep(.uni-section .uni-section-header) {
    padding: 0;
}

:deep(.uni-card) {
    padding: 0 !important;
    margin: 10px 0 !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:deep(.uni-card__content) {
    padding: 12px !important;
}

.demo-uni-row {
    padding: 5px 0;
    font-size: 14px;
}

.demo-uni-col {
    padding: 2px 0;

    &.dark {
        color: #333;
        font-weight: 500;
    }

    &.light {
        color: #666;
    }
}

.card-even {
    border-left: 4px solid #2979ff;
}

.card-odd {
    border-left: 4px solid #19be6b;
}

.no-data {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 16px;
}
</style>