<script setup lang="ts">
    import { reactive } from 'vue'
    import * as ChanxiaoAPI from '@/api/model/chanxiao'

    const pageData = reactive({
        show: false,
        content: '',
        form: {
            purchaseId: '',
            supplyName: null,
            supplyPrice: null,
            phone: null,
            remark: null,
        },
        rules: [
            {
                name: 'supplyName',
                rule: ['required'],
                msg: ['请输入姓名'],
            },
            {
                name: 'supplyPrice',
                rule: ['required'],
                msg: ['请输入报价'],
            },
            {
                name: 'phone',
                rule: ['required', 'isMobile'],
                msg: ['请输入手机号', '请输入正确的手机号'],
            },
        ],
    })
    function open(params) {
        pageData.form.purchaseId = params.id
        pageData.show = true
    }
    function close() {
        pageData.show = false
    }
    function reset() {
        pageData.form = {
            purchaseId: '',
            supplyName: null,
            supplyPrice: null,
            phone: null,
            remark: null,
        }
    }
    const formRef = ref()
    function submit() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                ChanxiaoAPI.bizPurchaseSupplyRecord(pageData.form).then(() => {
                    reset()
                    close()
                    uni.showToast({
                        title: '报价成功',
                        icon: 'success',
                    })
                })
            }
        })
    }
    defineExpose({
        open,
        close,
    })
</script>

<template>
    <fui-dialog title="" :buttons="[]" :show="pageData.show" maskClosable>
        <view class="title flex justify-center">
            <view class="flex-1">立即报价</view>
            <fui-icon class="close flex-basis" name="close" size="46" color="#999999" @click="close" />
        </view>
        <view class="text-left">
            <fui-form ref="formRef" top="180" color="#000">
                <fui-input marginTop="30" size="28" placeholder="请填写联系人姓名" v-model="pageData.form.supplyName" />
                <fui-input marginTop="30" size="28" placeholder="请填写联系电话" v-model="pageData.form.phone" />
                <fui-input
                    type="number"
                    marginTop="30"
                    size="28"
                    placeholder="请填写价格"
                    v-model="pageData.form.supplyPrice"
                >
                    <view class="flex">
                        <view class="mr-3" style="color: #ccc">|</view>
                        <view>元</view>
                    </view>
                </fui-input>
                <fui-textarea
                    :marginTop="30"
                    size="28"
                    height="80rpx"
                    placeholder="请输入报价备注"
                    v-model="pageData.form.remark"
                />
                <view style="margin-top: 30rpx">
                    <fui-button text="确定" bold radius="96rpx" @click="submit" />
                </view>
            </fui-form>
        </view>
    </fui-dialog>
</template>

<style lang="scss" scoped>
    :deep(.fui-dialog__body) {
        background: linear-gradient(0deg, rgba(93, 182, 111, 0) 0%, rgba(93, 182, 111, 0.25) 100%);
        margin: 0;
    }
    :deep(.fui-dialog__footer) {
        display: none;
    }
    :deep(.fui-input) {
        margin-top: 40rpx;
    }
</style>
