<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">
                <div style="display:flex;">
                    <a-checkbox>
                        <div>微信</div>
                        <div style="margin-left:20px;">收款账户</div>
                        <div  style="margin-left:20px;">设置</div>
                    </a-checkbox>
                </div>
                <div style="display:flex;">
                    <a-checkbox>
                        <div>支付宝</div>
                        <div style="margin-left:20px;">收款账户</div>
                        <div  style="margin-left:20px;">设置</div>
                    </a-checkbox>
                </div>
                <div style="display:flex;">
                    <a-checkbox>
                        <div>京东白条</div>
                        <div style="margin-left:20px;">收款账户</div>
                        <div  style="margin-left:20px;">设置</div>
                    </a-checkbox>
                </div>
                <div style="display:flex;">
                    <a-checkbox>
                        <div>花呗</div>
                        <div style="margin-left:20px;">收款账户</div>
                        <div  style="margin-left:20px;">设置</div>
                    </a-checkbox>
                </div>
                <div style="display:flex;">
                    <a-checkbox>
                        <div>银联</div>
                        <div style="margin-left:20px;">收款账户</div>
                        <div  style="margin-left:20px;">设置</div>
                    </a-checkbox>
                </div>
            </a-form-item>
            <a-form-item label="支付前填写手机号" name="price"  :label-col="{ span: 2 }"
                labelAlign="left">
                <div style="display: flex;">
                    <a-switch v-model:checked="formState.fullphone" />
                </div>
            </a-form-item>
            <a-form-item label="开始时间" name="price"  :label-col="{ span: 2 }"
                labelAlign="left">
                <div style="display:flex">
                <a-date-picker v-model:value="formState.starttime" :locale="locale" :format="dateFormat"  :disabledDate="disabledDate"/> <a-time-picker v-model:value="startvalue"  format="HH:mm" />
                </div>
            </a-form-item>
            <a-form-item label="结束时间" name="price"  :label-col="{ span: 2 }"
                labelAlign="left">
                <div style="display:flex">
                <a-date-picker v-model:value="formState.expireendtime" :locale="locale" :format="dateFormat"    :disabledDate="disabledDate"/>  <a-time-picker v-model:value="endvalue"  format="HH:mm" />
                </div>
            </a-form-item>
            <a-form-item label="信息备注" name="price"  :label-col="{ span: 2 }"
                labelAlign="left">
                <div style="display:flex">
                <a-input v-model:value="formState.remark" placeholder="请填写备注" />
                </div>
            </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 dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; 
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 moment from 'moment';
const useForm = Form.useForm;
interface FormState {
    subject: any,
    shortname: string,
    payment: string,
    paymentmodel: string,
    checked:boolean,
    starttime:string,
    expireendtime:string,
    fullphone:boolean,
    remark:string,
}
const optionss = ref([])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const optionsWithDisabled = [
    { value: '微信', label: 'wx', disabled: false },
    { label: 'Pear', value: '支付宝', disabled: false },
    { label: 'jd', value: '京东白条', disabled: false },
    { label: 'hb', value: '花呗', disabled: false }
];

const emit = defineEmits(['onBack']);
const formState = reactive<FormState>({
    subject: [],
    shortname: '',
    payment: '',
    paymentmodel: '0',
    checked:false,
    starttime:'',
    expireendtime:'',
    fullphone:false,
    remark:''
});
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 (res) => {
                console.log(startvalue,'startvalue');
                console.log(formState.starttime.$d,'starttime');
                
                
            // const prarms = {
            //     subject:toRaw(formState).subject,
            //     shortname:toRaw(formState).shortname,
            //     paymentmodel:toRaw(formState).paymentmodel,
            //     fullphone:toRaw(formState).paymentmodel?0:1,
            //     starttime:toRaw(formState).starttime.$y + "-"+(toRaw(formState).starttime.$M+1) + "-"+toRaw(formState).starttime.$D + "" + startvalue.value,
            //     expireendtime:toRaw(formState).expireendtime.$y + "-"+(toRaw(formState).expireendtime.$M+1) + "-"+toRaw(formState).expireendtime.$D+ "" + endvalue.value,
            //     remark:toRaw(formState).remark
            // }
            // console.log(prarms,'prarms');
            
        })
        .catch(err => {
            console.log('error', err);
        });

};
const disabledDate = (current:any)=>{
    return current&&current < moment().startOf("day")
}

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

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

</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>
<style lang="less">
.ant-checkbox-wrapper {
    height: 50px;

    span {
        display: flex;
    }
}
</style>
