<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" :default-active-first-option="false" mode="multiple" style="width: 100%" placeholder="请选择商品" @focus="onSubSearch"  @search="onSubSearch"  @change="onSubSearch"   @select="onSelectss" @popupScroll="popupScroll">
                       <a-select-option   v-for="(item,index) in optionss.list" :itemKey="item" :value="item.subject" :label="index" :key="index" >
                            {{item.subject}}
                        </a-select-option>
                    </a-select>
                </div>
            </a-form-item>
            <a-form-item label="商品简介" name="shortname" :label-col="{ span: 2 }" labelAlign="left" >
                <a-input v-model:value="formState.shortname" placeholder="请输入商品描述" :disabled="true"  />
            </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: 40px;">
                        <a-radio value="0" style="width:150px;">商品默认金额</a-radio>
                        <a-input-number style="width:200px;height: 35px;" v-model:value="price"  :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                          :parser="value => value.replace(/\$\s?|(,*)/g, '')"  :disabled="true" />
                        <div style="width:50px;">元</div>
                    </div>
                    <div style="display: flex;height: 40px;margin-top: 20px;">
                        <a-radio value="1" style="width:150px;">自定义金额</a-radio>
                        <a-input-number style="width:200px;height: 35px;" v-model:value="priceSet"  :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                          :parser="value => value.replace(/\$\s?|(,*)/g, '')"/>
                        <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.value" :label="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].paytype == 1">{{listValue[index].name}}</div>
                    <div style="margin-left:20px;color: black;" v-else-if="listValue[index] &&listValue[index].paytype == 2">{{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: 3 }"
                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 style="margin-left:10px;" 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 style="margin-left:10px;" 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>
        <img src="../../../../assets/img/show.png" alt="" style="width:375px;position: absolute;right: 300px;height:85%;top: 80px; display: block;border: 1px solid #cccccc;"/>
         <a-modal
            v-model:visible="visible"
            title="请选择默认用户"
            ok-text="确认"
            cancel-text="取消"
            @ok="hideModal"
            @cancel="onCancel"
            >   
            <a-radio-group v-model:value="modalvalue">
                <div v-for="item in list" :itemkey="item.id">
                   <a-radio v-if="item.paytype == 1" :value="item.id"  :lable="item.id" @change="onChangeRadioName(item)">{{item.name}}</a-radio>
                   <a-radio v-else-if="item.paytype == 2"  :value="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,  watch,toRefs  } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; 
import { message} from "ant-design-vue";
import { Form } from 'ant-design-vue';
import { onCreateGoodsPay,onfindWX,onfindAli,onFindbyLikeName } 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,
}
let formState = ref<FormState>({
    subject: [],
    shortname: '',
    payment: '',
    paymentmodel: '0',
    checked:false,
    starttime:'',
    expireendtime:'',
    fullphone:false,
    remark:''
});
const visible = ref<boolean>(false);
const list = ref<any>([])
let optionss = reactive<any>({
    list:[]
})
let goodspayditch = ref<any>([])
const props = defineProps();
const dateFormat = 'YYYY/MM/DD';
const endvalue = ref<Dayjs>();
const optionsWithDisabled = [
    { value: '微信', label: '1' },
    { label: '2', value: '支付宝' },
    // { label: '3', value: '京东白条' },
    // { label: '4', value: '花呗' }
];
const checkboxValue = ref<any>([])
const onSelectss =(value:any, option:any)=>{
    console.log(option.itemKey.price,'option.itemKey.price');
    
    formState.value = {
        paymentmodel:'0',
        ...option.itemKey,
    }
    price.value = option.itemKey.price/100
}
const emit = defineEmits(['onBack']);

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: '请输入商品名称!',
        },
    ],
});
const {  validate } = useForm(formState, rulesRef);
const onSelect = (value: any, option: any) => {
    
    price.value = option.itemKey.price/100
    
}
const onSubmit = () => {
    validate()
        .then(async (res) => {
            console.log(toRaw(formState.value),'toRaw(formState.value)');
            
            const uid =getUid()
            const expireendtime  = (moment(toRaw(formState.value).expireendtime.$d).format('YYYY-MM-DD'))+(moment(endvalue.value.$d).format('THH:mm:[00][Z]'))
            goodspayditch.value.map((item:any)=>{return item.goodsid === toRaw(formState.value).goodsid})
            const prarms = {
                subject:toRaw(formState.value).subject,
                shortname:toRaw(formState.value).shortname,
                paymentmodel:toRaw(formState.value).paymentmodel,
                fullphone:toRaw(formState.value).fullphone?1:0,
                expireendtime:expireendtime,
                starttime: moment(new Date()).format('YYYY-MM-DDTHH:mm:[00][Z]'),
                goodsid: toRaw(formState.value).goodsid,
                goodspayditch:goodspayditch.value,
                payment:formState.value.paymentmodel == '0'?price.value*100:priceSet.value*100,
                uid,
                remark:toRaw(formState.value).remark
            }
            const data:any = await onCreateGoodsPay(prarms)
            if(data.state === 1){
                message.success(data.message)
                emit('onBack')
            }
            
        })
        .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)=>{
    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 popupScroll = ()=>{
    console.log(1);
}
const onSubSearch = async(value:any)=>{
    optionss.list=[]
    const uid = getUid();
        const params = {
            name: value.target?'':value,
            page:1,
            size:10,
            uid,
   };
    const data = await onFindbyLikeName(params);
    optionss.list= data.data.goods
    

}
const onSelectCheckboxValue = async(e:any,index:any)=>{
        index = index+1
       const uid =getUid()
        let data:any ={}
        if (index == '1') {
        data = await onfindWX(uid);
        } else if (index == '2') {
        data = await onfindAli(uid);
        }
        let params:any = data.data;
        if(goodspayditch.value[index-1]){
            goodspayditch.value.splice(index-1,1)
        }else{
            goodspayditch.value[index-1]=params[0]
        }
}
const showModal = () => {
      visible.value = true;
};
const hideModal = () => {
      checkboxValue.value[radioValue.paytype-1] = optionsWithDisabled[radioValue.paytype-1].value
        goodspayditch.value[radioValue.paytype-1] = {
            appointpay: radioValue.id,
            goodsid: radioValue.id,
            optpay: radioValue.paytype,
            name: radioValue.name,
            random: '1',
            status: radioValue.status
        }
      listValue.value[radioValue.paytype-1] = radioValue
      visible.value = false;
};

defineExpose({
    endvalue,
    price,
    priceSet,
    dateFormat,
    visible,
    list,
    modalvalue,
    optionss,
    value1: ref<Dayjs>(),
    formState,
    onSelect,
    disabledDate,
    ...toRefs(checkboxValue),
    onChangeRadioName,
    onSet,
    showModal,
    hideModal,
    onSelectCheckboxValue,
    popupScroll,
    emit
});

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