<template>
    <view style="background-color: rgb(220, 244, 255)">
        <uni-nav-bar
            status-bar
            left-icon="left"
            @clickLeft="leftClick"
            right-icon="scan"
            @clickRight="rightClick"
            title="退料新增"
            title-style="font-weight: bolder;"
            backgroundColor="rgb(220, 244, 255)"
            :border="false"
        />
    </view>
    <view class="accept page-common">
        <div class="card">
            <uni-forms :model="formData" label-width="170rpx" :border="true">
                <uni-forms-item label="退料单位：" name="unitId">
                    <eselect
                        style="width: 100%; height: 90rpx"
                        ref="treeSelect"
                        :options="unitList"
                        @change="getProject"
                        @clear="clearUnit"
                    ></eselect>
                </uni-forms-item>
                <uni-forms-item label="退料工程：" name="proId">
                    <eselect
                        style="width: 100%; height: 90rpx"
                        ref="treeSelect2"
                        :options="proList"
                        @change="changePro"
                        @clear="clearPro"
                    ></eselect>
                </uni-forms-item>
                <uni-forms-item label="退料人员：" name="backPerson">
                    <uni-easyinput v-model="backPerson" maxlength="10" placeholder="请输入退料人" />
                </uni-forms-item>
                <uni-forms-item label="联系电话：" name="phone">
                    <uni-easyinput v-model="phone" maxlength="11" placeholder="请输入联系电话" />
                </uni-forms-item>
            </uni-forms>
        </div>

        <div class="btn">
            <button class="btn-cont" @click="clearForm">清空</button>
            <button class="btn-cont" @click="confirmAdd">确认</button>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
    getUnitList,
    getProjectList,
    insertApp,
    getAgreementInfoById,
} from '../../services/back.js'
import eselect from '@/components/tree-select/eselect.vue'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const treeSelect = ref(null)
const treeSelect2 = ref(null)
const formData = ref({})
const unitId = ref('')
const proId = ref('')
const agreementId = ref('')
const unitList = ref([])
const proList = ref([])
const backPerson = ref('')
const phone = ref('')

//单位
const getUnit = () => {
    // proId.value=e.id;
    let obj = {
        projectId: proId.value,
    }
    getUnitList(obj)
        .then((res) => {
            console.log(res)
            unitList.value = res.data
            // getAgreement()
            if (unitId.value && proId.value) {
                getAgreement()
            }
        })
        .catch((error) => {
            console.log(error)
        })
}
//工程
const getProject = (e) => {
    console.log('🚀 ~ getProject ~ e:', e)
    unitId.value = e?.id || ''
    let obj = {
        unitId: unitId.value,
        // "isApp":true
    }
    getProjectList(obj)
        .then((res) => {
            proList.value = res.data
            // proId.value=""
            // treeSelect2.value.clearInput();
            agreementId.value = ''
            if (unitId.value && proId.value) {
                getAgreement()
            }
        })
        .catch((error) => {
            console.log(error)
        })
}
const clearUnit = () => {
    unitId.value = ''
    agreementId.value = ''
    getUnit()
    getProject()
}
const clearPro = () => {
    proId.value = ''
    agreementId.value = ''
    getProject()
    getProject()
}
//工程选择
const changePro = (e) => {
    console.log(e)
    proId.value = e.id
    getUnit()
    // getAgreement()
}
//协议
const getAgreement = () => {
    let obj = {
        unitId: unitId.value,
        projectId: proId.value,
    }
    getAgreementInfoById(obj)
        .then((res) => {
            console.log(res)
            if (res.code == 200) {
                agreementId.value = res.data.agreementId
            } else {
                agreementId.value = ''
            }
        })
        .catch((error) => {
            console.log(error)
        })
}

//清空
const clearForm = () => {
    unitId.value = ''
    proId.value = ''
    backPerson.value = ''
    phone.value = ''
    agreementId.value = ''
    treeSelect.value.clearInput()
    treeSelect2.value.clearInput()
    getUnit()
    // getProject()
}
//确认
const confirmAdd = () => {
    if (agreementId.value == '') {
        uni.showToast({ title: '请确认退料单位,退料工程!', icon: 'none' })
    } else if (backPerson.value == '') {
        uni.showToast({ title: '请确认退料人!', icon: 'none' })
    } else {
        let obj = {
            backApplyInfo: {
                agreementId: agreementId.value,
                backPerson: backPerson.value,
                phone: phone.value,
            },
        }
        insertApp(obj)
            .then((res) => {
                console.log(res)
                if (res.code == 200) {
                    uni.showToast({ title: '新增成功', icon: 'none' })
                    uni.navigateBack({
                        delta: 1, // 返回到已存在的页面
                    })
                } else {
                    uni.showToast({ title: res.msg, icon: 'none' })
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }
}
const leftClick = () => {
    console.log(1)
    uni.navigateBack({
        delta: 1, // 返回到已存在的页面
    })
}
const rightClick = () => {
    console.log(2)
    uni.navigateTo({ url: `/pages/back/backCodeAdd` })
}
onLoad((options) => {
    getUnit()
    getProject()
    // formData.value = JSON.parse(options.item)
    backPerson.value = memberStore.userInfo.nickName
})
</script>

<style lang="scss">
.accept {
    padding: 24rpx;
    height: 90vh;
    word-break: break-all;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;

    // 卡片样式
    .card {
        padding: 32rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;
        height: auto;

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                padding: 24rpx 0;
                margin-bottom: 0;
                border-bottom: 2rpx solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .uni-forms-item__label {
                    color: #8c8c8c;
                }

                // 下拉选择框样式
                .uni-data-select {
                    .uni-select {
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 88rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-select__input-box {
                            height: 88rpx;
                            line-height: 88rpx;
                        }

                        .uni-select__input-text {
                            font-size: 28rpx;
                            color: #262626;
                        }
                    }
                }

                // 输入框样式
                .uni-easyinput {
                    .uni-easyinput__content {
                        background-color: #f7f8fa;
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 75rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-easyinput__content-input {
                            font-size: 28rpx;
                            height: 75rpx;
                            line-height: 75rpx;
                            color: #262626;
                        }
                    }
                }
            }
        }
    }

    // 底部按钮
    .btn {
        margin-top: auto;
        padding: 32rpx;
        // background: #fff;
        // box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        gap: 24rpx;

        .btn-cont {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            color: #fff;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }

            // 清空按钮样式
            &:first-child {
                background: #fff;
                color: #3784fb;
                border: 2rpx solid #3784fb;
                box-shadow: none;

                &:active {
                    background: #f7f8fa;
                }
            }
        }
    }
}
</style>
