<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="sub" :rules="rulesRef.sub"
                :label-col="{ span: 1 }">
                <div style="width:100%;display: flex;align-items: center;">
                    <a-select v-model:value="formState.sub" 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 :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 props = defineProps();
const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
    subject: '',
});
const optionss = ref([])
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>
