<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"  :label-col="{ span: 2 }" labelAlign="left">
            <a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
                <div style="display:flex;" v-for="item,index in optionsWithDisabled" :itemKey="item">
                    <a-checkbox :value="item.label" @change="onSelectCheckboxValue(item,index)">
                        <div>{{item.value}}</div>
                    </a-checkbox>
                   <div style="margin-left:20px;">收款账户</div>
                    <div style="margin-left:20px;color: black;" v-if="listValue[index]">{{listValue[index].name}}</div>
                   <div style="margin-left:20px;color: black;" v-else>默认</div>
                    <div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div>
                </div>
                </a-checkbox-group>
            </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>
         <a-modal
            v-model:visible="visible"
            title="Modal"
            ok-text="确认"
            cancel-text="取消"
            @ok="hideModal"
            @cancel="onCancel"
            >   
            <a-radio-group v-model:value="modalvalue">
                <div v-for="item in list" :itemkey="item">
                   <a-radio :checked="item.id" :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
                </div>
            </a-radio-group>
         </a-modal>
    </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,onCreateGoodsPay,onfindWX,onfindAli } 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 visible = ref<boolean>(false);
const list = ref([])
const optionss = ref([])
let goodspayditch = 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: '1' },
    { label: '2', value: '支付宝' },
    { label: '3', value: '京东白条' },
    { label: '4', value: '花呗' }
];
const checkboxValue = ref([])

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 modalvalue = ref<any>(0)
let radioValue= reactive<any>({

})
let listValue = ref<any>([])
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) => {
            const uid =getUid()
            const starttime  = (moment(toRaw(formState).starttime.$d).format('YYYY-MM-DD'))+(moment(startvalue.value.$d).format('THH:mm:[00][Z]'))
            const expireendtime  = (moment(toRaw(formState).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
            const prarms = {
                subject:toRaw(formState).subject[0],
                shortname:toRaw(formState).shortname,
                paymentmodel:toRaw(formState).paymentmodel,
                fullphone:toRaw(formState).paymentmodel?0:1,
                expireendtime:expireendtime,
                starttime:starttime,
                goodsid: toRaw(formState).subject[0],
                goodspayditch:goodspayditch.value,
                uid,
            }
            const data:any = await onCreateGoodsPay(prarms)
            if(data.status === 1){
                message.success(data.message)
            }
            
        })
        .catch(err => {
            console.log('error', err);
        });

};
const disabledDate = (current:any)=>{
    return current&&current < moment().startOf("day")
}
const onCancel = ()=>{
    radioValue = {}
    visible.value = false;
}
const onChangeRadioName = (e:any)=>{
        radioValue = e
}
const onSet = async(index:string)=>{
    console.log(index,'index');
    
    const uid =getUid()
    let data:any ={}
    if (index == '1') {
     data = await onfindWX(uid);
    } else if (index == '2') {
    data = await onfindAli(uid);
    }
    list.value = data.data;
    showModal()
}
const onSelectCheckboxValue = (e:any,index:any)=>{
    goodspayditch.value[index].optpay = e.label
}
const showModal = () => {
      visible.value = true;
};
const hideModal = () => {
        goodspayditch.value[radioValue.paytype-1] = {
            appointpay: radioValue.id,
            goodsid: radioValue.id,
            goodspayid: toRaw(formState).subject[0],
            optpay: radioValue.paytype,
            payname: radioValue.name,
            random: '1',
            status: radioValue.status
        }
      listValue.value.push(radioValue)
      visible.value = false;
};
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,
    checkboxValue,
    onChangeRadioName,
    onSet,
    visible,
    showModal,
    hideModal,
    list,
    modalvalue,
    onSelectCheckboxValue
});

</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>
