<template>
    <div class="main">
        <div class="cardTitle">退款订单</div>
        <div class="content">
            <a-descriptions style="padding: 12px" title="退款信息" :column="3">
                <a-descriptions-item label="订单号">
                    {{infoList.code}}
                </a-descriptions-item>
                <a-descriptions-item label="公司信息">
                    {{infoList.companyName}}
                </a-descriptions-item>
                <a-descriptions-item label="小区信息">
                    {{infoList.communityName}}
                </a-descriptions-item>
                <a-descriptions-item label="小区地址">
                    {{infoList.communityAddress}}
                </a-descriptions-item>
            </a-descriptions>
            <a-divider></a-divider>
            <div class="payback-content">
                <a-form-model :labelCol="{span: 2}" :wrapperCol="{span: 5,offset: 0}">
                    <a-form-model-item label="取消功能模块：">
                        <a-checkbox-group :options="modelType" @change="modelChange" />
                    </a-form-model-item>
                    <a-form-model-item label="退款金额">
                        <a-input-number v-model="paybackForm.price"></a-input-number>
                    </a-form-model-item>
                    <a-form-model-item label="退款方式">
                        <a-select v-model="paybackForm.type" placeholder="请选择退款方式">
                            <a-select-option :value="1">
                                线上
                            </a-select-option>
                            <a-select-option :value="2">
                                支付宝
                            </a-select-option>
                            <a-select-option :value="3">
                                微信
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="退款原因">
                        <a-textarea placeholder="请输入退款原因" v-model="paybackForm.reason"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
        <div class="footer">
            <a-space style="margin-left: 70%">
                <a-button @click="handlerConfirm" type="primary">确定</a-button>
                <a-button @click="goBack">取消</a-button>
            </a-space>
        </div>
        <a-modal
        title="确认退款信息"
        :visible="auditShow"
        @ok="auditSubmit"
        @cancel="auditCancel"
        >
        <div class="content">
            <a-descriptions :column="1">
                <a-descriptions-item label="退款金额">
                    {{paybackForm.price}} 元
                </a-descriptions-item>
                <a-descriptions-item label="退款方式">
                    {{paybackForm.type == 1 ? '线上' : (paybackForm.type == 2 ? '支付宝' : '微信')}}
                </a-descriptions-item>
                <a-descriptions-item label="退款原因">
                    {{paybackForm.reason}}
                </a-descriptions-item>
            </a-descriptions>
        </div>
        </a-modal>
    </div>
</template>

<script>
import {getPayback} from "@/api/manage";
import {postRefund} from "@/api/manage";
export default {
    name: "billDetail",
    data() {
        return {
            form: {
                id: 0,
            },
            infoList: [],
            paybackForm: {
                functionOrderId: undefined,
                chargingFunctionIds: '',
                type: 1,
                price: 0,
                reason: '',
            },
            auditShow: false,
            modelType: [],
        }
    },
    mounted() {
        this.form.id = this.$route.query.id;
        this.paybackForm.functionOrderId = this.$route.query.id;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.form)
            getPayback(obj).then(res => {
                let data = res.data;
                this.infoList = data;
                let modelType = [];
                data.chooseFunctionModelVoList.forEach(ele => {
                    let obj = {label: ele.name, value: ele.id};
                    modelType.push(obj)
                });
                this.modelType = modelType
            })
        },
        modelChange(val) {
            let chargingFunctionIds = val.toString();
            this.paybackForm.chargingFunctionIds = chargingFunctionIds
        },
        //确认框
        handlerConfirm() {
            this.auditShow = true;
        },
        goBack() {
            this.$router.go(-1);
        },
        auditSubmit() {
            postRefund(this.paybackForm).then(() => {});
            this.auditShow = false;
        },
        auditCancel() {
            this.auditShow = false
        }
    }
}
</script>

<style lang="less">
.payback-content {
    width: 100%;
}
.btn-container {
    float: right;
}
</style>