<template>
    <div class="page">
        <!-- {{props.props.propsData.isCad}} -->
        <div class="title">支付项目信息</div>
        <a-form style="margin-top: 30px" :model="formState" name="basic" 
            :wrapper-col="{ span: 6 }" autocomplete="off">
            <a-form-item label="选择商品" name="subject" :rules="rulesRef.subject"
                :label-col="{ span: 2  }" labelAlign="left"> 
                <div style="width:100%;display: flex;align-items: center;">
                    <a-select v-model:value="formState.subject" mode="multiple" style="width: 100%" placeholder="请选择商品"  @select="onSelect">
                        <a-select-option v-for="item in optionss" :itemKey="item" :value="item.goodsid"
                            :label="item.goodsid">
                            {{ item.subject }}
                        </a-select-option>
                    </a-select>
                </div>
            </a-form-item>
            <a-form-item label="商品描述" name="shortname"  :label-col="{ span: 2}"  labelAlign="left" :rules="rulesRef.shortname">
                <a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
            </a-form-item>
            <a-form-item label="支付金额" name="price"  :label-col="{ span: 2  }" labelAlign="left">
                <a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
                <div style="display: flex;height: 50px;"><a-radio value="0" style="width:150px;">商品默认金额</a-radio> <a-input-number style="width:200px;height: 40px;"  v-model:value="price"  /> <div style="width:50px;">元</div></div>
                <div style="display: flex;height: 50px"><a-radio value="1" style="width:150px;">自定义金额</a-radio><a-input-number style="width:200px;height: 40px;" v-model:value="priceSet"  /><div style="width:50px;">元</div></div>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="支付渠道" name="price" :rules="rulesRef.qudao" :label-col="{ span: 2  }" labelAlign="left">
                <a-radio-group v-model:value="value" name="radioGroup" class="pay">
                <div style="display:flex;height: 50px;"><a-radio value="1" >微信</a-radio> <div>收款账户</div> <div>设置</div></div>
                <div style="display:flex;height: 50px"><a-radio value="2">支付宝</a-radio><div>收款账户</div> <div>设置</div></div>
                <div style="display:flex;height: 50px"><a-radio value="3">京东白条</a-radio><div>收款账户</div> <div>设置</div></div>
                <div style="display:flex;height: 50px"><a-radio value="4">花呗</a-radio><div>收款账户</div> <div>设置</div></div>
                <div style="display:flex;height: 50px"><a-radio value="5">银联</a-radio><div>收款账户</div> <div>设置</div></div>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="支付前填写手机号" name="price" :rules="rulesRef.checked" :label-col="{ span: 2  }" labelAlign="left">
            <div style="display: flex;">
                <a-switch v-model:checked="checked" />
            </div>
            </a-form-item>
             <a-form-item label="开始时间" name="price" :rules="rulesRef.checked" :label-col="{ span: 2  }" labelAlign="left">
                      <a-date-picker v-model:value="value1" />
            </a-form-item>
             <a-form-item label="结束时间" name="price" :rules="rulesRef.checked" :label-col="{ span: 2  }" labelAlign="left"> 
                      <a-date-picker v-model:value="value1" />
            </a-form-item>
             <a-form-item label="信息备注" name="price" :rules="rulesRef.checked" :label-col="{ span: 2  }" labelAlign="left">
                 <a-input v-model:value="value" placeholder="Basic usage" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 0, span: 8 }">
                <a-button type="primary" html-type="submit" @click="onSubmit">确定</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineEmits, defineExpose, toRaw, onMounted, } from "vue";
import { message, UploadProps, Upload } from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoods, onSelectGoods } from '@/api/index'
import { getUid } from "@/utils/userInfo";
import type { Dayjs } from 'dayjs';
const useForm = Form.useForm;
interface FormState {
    subject: any,
    shortname:string,
    payment:string,
    paymentmodel:string
}
const optionss = ref([])
const props = defineProps();
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
    subject: [],
    shortname:'',
    payment:'',
    paymentmodel:'0'
});
let price = ref(0)
let priceSet = ref(0)
const rulesRef = reactive({
    subject: [
        {
            required: true,
            message: '请输入商品名称!',
        },
    ],
    shortname: [
        {
            required: true,
            message: '请输入商品简介!',
        },
    ],

});
const { resetFields, validate } = useForm(formState, rulesRef);
const  onSelect = (value:any, option:any)=>{
     price.value = option.itemKey.price
}
const onSubmit = () => {
    validate()
        .then(async () => {

        })
        .catch(err => {
            console.log('error', err);
        });

};

onMounted(async () => {
    const uid = getUid()
    const data = await onSelectGoods(uid)
    optionss.value = data.data
    return optionss
})

defineExpose({
    optionss,
    value1: ref<Dayjs>(),
    onSelect,
    price,
    priceSet
});

</script>
<style lang="less" scoped>
.page {
    width: 100%;

    .title {
        padding-top: 20px;
        text-align: left;
    }
    .pay{
        display: flex;
        flex-direction: column;
        .ant-radio-wrapper{
            height: 40px;
        }
    }
}
</style>
