<template>
    <view class="accept page-common">
        <div class="card">
            <uni-forms :model="formData" label-width="150rpx" :border="true"> 
                <uni-forms-item label="退料单位：" name="unitId">
                    <uni-data-select v-model="unitId" 
                        :localdata="unitList" @change="getProject">
                    </uni-data-select>
                </uni-forms-item>
                <uni-forms-item label="退料工程：" name="proId">
                    <uni-data-select v-model="proId" 
                        :localdata="proList" @change="getUnit">
                    </uni-data-select>
                </uni-forms-item>
                <uni-forms-item label="退料人：" name="backPerson">
                    <uni-easyinput v-model="backPerson" placeholder="请输入退料人" />
                </uni-forms-item>
                <uni-forms-item label="联系电话：" name="phone">
                    <uni-easyinput v-model="phone" 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 } from '../../services/back.js';
const formData = ref({})
const unitId = ref("")
const proId = ref("")
const unitList = ref([])
const proList = ref([])
const backPerson = ref("")
const phone = ref("")

//单位
const getUnit = () => { 
    let obj = {
        "projectId":proId.value,
        "isApp":true
	} 
	getUnitList(obj).then(res => { 
		unitList.value = res.data.map(option => {
            return {
                value:option.unitId,
                text:option.unitName,
            }
        }); 
	}).catch(error => {
		console.log(error) 
	})  
} 
//工程
const getProject = () => { 
    let obj = {
        "unitId":unitId.value,
        "isApp":true
	} 
	getProjectList(obj).then(res => { 
		proList.value = res.data.map(option => {
            return {
                value:option.proId,
                text:option.proName,
            }
        }); 
	}).catch(error => {
		console.log(error) 
	})  
} 
//清空
const clearForm = () => { 
    unitId.value=""
    proId.value=""
    backPerson.value=""
    phone.value=""
    getUnit()
    getProject()
	 
} 
//确认
const confirmAdd = () => { 
	 
} 

onLoad((options)=>{
	console.log(options)
    getUnit()
    getProject()
	// formData.value = JSON.parse(options.item)
})
</script>

<style lang="scss">
.accept {
    padding: 10px;
    height: 100%;
    word-break: break-all;
}
.card {
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    height: 60vh;
    box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.1);
}
.upload {
    width: 80px;
    height: 80px;
    background-color: #f5f5f5;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ccc;
    margin-top: 10px;
}
.btn {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;

    .btn-cont {
        width: 40%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #3784fb;
        color: #fff;
        border-radius: 20px;
        // 取消按钮淡蓝色
        &:first-child {
            background-color: #aacefb;
        }
    }
}
</style>
