<template>
    <div class="page">
        <!-- {{props.props.propsData.isCad}} -->
        <div class="title">支付项目信息</div>
        <a-form style="margin-top: 30px" :model="formState" name="basic" :label-col="{ span: 2 }"
            :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="选择商品" :wrapper-col="{ offset: 0, span: 8 }" name="subject" :rules="rulesRef.subject"
                :label-col="{ span: 1 }">
                <div style="width:100%;display: flex;align-items: center;">
                    <a-select v-model:value="formState.subject" mode="multiple" style="width: 100%" placeholder="请选择商品"
                        @change="handleChanges">
                        <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" :rules="rulesRef.shortname" :label-col="{ span: 1 }">
                <a-input v-model:value="formState.shortname" />
            </a-form-item>
            <a-form-item label="支付金额" name="price" :rules="rulesRef.price" :label-col="{ span: 1 }">
                <a-radio-group v-model:value="value" name="radioGroup">
                    <a-radio value="1">商品默认金额</a-radio>
                    <a-radio value="2">自定义金额</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="支付渠道" name="price" :rules="rulesRef.qudao" :label-col="{ span: 1 }">
                <a-radio-group v-model:value="value" name="radioGroup">
                    <a-radio value="1">微信</a-radio>
                    <a-radio value="2">支付宝</a-radio>
                    <a-radio value="3">京东白条</a-radio>
                    <a-radio value="4">花呗</a-radio>
                    <a-radio value="5">银联</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="支付前填写手机号" name="price" :rules="rulesRef.checked" :label-col="{ span: 1 }">
                <a-switch v-model:checked="checked" />
            </a-form-item>
             <a-form-item label="截至时间" name="price" :rules="rulesRef.checked" :label-col="{ span: 1 }">
               <a-radio-group v-model:value="value" name="radioGroup">
                    <a-radio value="1">不设置截至时间</a-radio>
                    <a-radio value="2">设置截至时间</a-radio>
                      <a-radio-group v-model:value="value" name="radioGroup">
                            <a-radio value="1">截至至   <a-input v-model:value="value" placeholder="Basic usage" />超时后，无法支付</a-radio>
                            <a-radio value="2">上架失效时间 <a-input v-model:value="value" placeholder="Basic usage" />分 设置上架后多长时间失效</a-radio>
                            </a-radio-group>
                </a-radio-group>
            </a-form-item>
             <a-form-item label="信息备注" name="price" :rules="rulesRef.checked" :label-col="{ span: 1 }">
                 <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";
const useForm = Form.useForm;
interface FormState {
    subject: string
}
const optionss = ref([])
const props = defineProps();
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
    subject: '',
});
const rulesRef = reactive({
    subject: [
        {
            required: true,
            message: '请输入商品名称!',
        },
    ],

});
const { resetFields, validate } = useForm(formState, rulesRef);

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
});

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

    .title {
        padding-top: 20px;
        text-align: left;
    }

    .clearfix {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;

        .ant-upload-picture-card-wrapper {
            display: flex;
        }
    }

    .Up {
        display: flex;

        .warin {
            font-family: SourceHanSansSC;
            font-weight: 400;
            font-size: 12px;
            color: rgb(154, 154, 154);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 17px;
            text-decoration: none;
        }
    }

    .editor-text {
        border-radius: 3px;
        font-size: 14px;
        padding: 0px;
        text-align: center;
        background: rgb(239, 239, 239);
        display: flex;
        align-items: baseline;
        flex-direction: column;

        >p {
            margin-left: 5px;
            margin-top: 10px;
            margin-bottom: 10px;
            font-weight: 400;
            font-size: 12px;
            color: rgb(154, 154, 154);
            flex: 1;
        }
    }

    .please {
        min-width: 140px;
        height: 30px;
        background-color: @primary-color;
        color: white;
        margin-left: 20px;
        display: flex;
        align-items: center;
        padding: 5px;
    }
}
</style>
