<template>
    <!--    <a-card style="width: 100%; height:100%;">-->
    <!--        -->
    <!--    </a-card>-->
    <div>
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1">
                <span slot="tab">
                    <a-icon type="template" />
                    收款
                </span>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab">
                    <a-icon type="template" />
                    退款
                </span>
            </a-tab-pane>
        </a-tabs>
        <a-spin :spinning="confirmLoading">
            <j-form-container >
                <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item label="支付方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMethod">
                                <a-select
                                        v-model="model.paymentMethod"
                                        style="width: 30%"
                                        placeholder="支付方式" >
                                    <a-select-option
                                            v-for="(item, index) in paymentMethodList"
                                            :key="index"
                                            :value="item.id"
                                    >{{ item.name }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
                                <a-input-number
                                        v-model="model.price"
                                        placeholder="请输入金额"
                                        style="width: 30%"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
                                <a-textarea
                                        v-model="model.remarks"
                                        rows="4"
                                        placeholder="请输入备注"
                                />
                            </a-form-model-item>
                        </a-col>

                    </a-row>
                </a-form-model>
            </j-form-container>
<!--            <a-row>-->
<!--                <a-col :span="8" :offset="3">-->
<!--                    &lt;!&ndash;                    <a-button @click="handleCancel" style="margin-right: 0.8rem">取消</a-button>&ndash;&gt;-->
<!--                    <a-button @click="handleSubmit" type="primary" >确认</a-button>-->
<!--                </a-col>-->
<!--            </a-row>-->

        </a-spin>
    </div>
</template>

<script>
    import { httpAction, getAction } from "@/api/manage";

    export default {
        name: 'accountEnterForm',
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            },
            agreementModel:{
                type: Object,
                required: false,
                default: () => {
                }
            }
        },
        data () {
            return {
                confirmLoading: false,
                model: {
                    price:0,
                },
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 3 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 18 },
                },
                url: {
                    addEntry: "/business/busAgreementOrderFee/addEntry",
                    edit: "/business/busAgreementOrderFee/edit",
                    queryById: "/business/busAgreementOrderFee/queryById"
                },
                type:1,
                paymentMethodList: [],
                validatorRules: {
                    // price: [
                    //     { required: true, message: '请输入金额!'},
                    // ],
                },
            }
        },
        created() {
            httpAction(
                "/business/busRoomPayType/queryList",
                { pageNo: 1, pageSize: 100 },
                "get"
            ).then((res) => {
                if (res.success) {
                    this.paymentMethodList = res.result;
                }
            });
        },
        methods:{

            edit() {
                // console.log(record)
                // this.model = Object.assign({}, record);
                // this.changeColumns(this.model.roomType, this.model.fixedDiscount)
                // this.visible = true;
            },
            handleCancel(){
                this.close();
            },
            callback(key) {
                console.log(key);
                this.type = key
            },
            submitForm(){
                const that = this;
                if (that.model.price <= 0){
                    that.$message.warning("金额需大于0");
                    return;
                }
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true;
                        let httpurl = this.url.addEntry;
                        let method = 'post';
                        var data = {
                            agreementUnitId:that.agreementModel.id,
                            projectName:that.type == 1?"预收账款":"预收退款",
                            type:that.type,
                            payPrice:that.type == 1?that.model.price:that.model.price*(-1),
                            payType:that.model.paymentMethod,
                            remarks:that.model.remarks,
                        }
                        console.log(data);
                        httpAction(httpurl,data,method).then((res)=>{
                            if(res.success){
                                that.$message.success(res.message);
                                that.$emit('ok');
                            }else{
                                that.$message.warning(res.message);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>

