<template>
    <el-dialog title="支付费用" :visible.sync="show" center width="600px">
        <el-form
            hide-required-asterisk
            :model="form"
            :rules="rules"
            ref="form"
            label-width="140px"
            style="padding-right: 130px;"
            class="fee"
        >
            <el-form-item prop="paymentDate" label="支付日期">
                <el-date-picker
                    v-model="form.paymentDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    style="width: 100%;"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label="付款图片" prop="payment">
                <attachment-upload v-model="form.payment"></attachment-upload>
            </el-form-item>

            <el-form-item>
                <el-button style="width: 150px;" size="normal" type="primary" @click="onSave">提交</el-button>
                <el-button style="width: 120px;" size="normal" @click="show = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
export default {
    name: 'FeeEdit',
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    created() {},
    data() {
        return {
            show: false,
            saving: false,
            form: {
                payment: { fileName: '', url: '', remark: '', size: '' }
            },
            rules: {
                paymentDate: { required: true, message: '请选择支付日期', trigger: 'blur' },
                remark: { required: true, message: '请输入备注', trigger: 'blur' },
                payment: {
                    validator: (rule, value, callback) => {
                        if (!value.url) {
                            callback(new Error('请上传付款图片'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'change'
                }
            },
            feeMaintenanceIdOptions: [],
            statusOptions: [
                { label: '已支付', value: 'PAID' },
                { label: '未支付', value: 'UNPAID' }
            ],
            patentPartnerIdOptions: [],
            payPartnerIdOptions: [],
            currencyMaintenanceIdOptions: []
        };
    },
    computed: {
        feeList() {
            if (this.form.feeType) {
                let feeType = [...this.feeMaintenanceIdOptions].find(item => {
                    return item.value === this.form.feeType;
                }) || { children: [] };
                console.log(feeType);
                console.log([...this.feeMaintenanceIdOptions]);
                return feeType.children.map(item => {
                    return {
                        label: item.name,
                        value: item.name
                    };
                });
            } else {
                return [];
            }
        }
    },
    methods: {
        init() {
            this.form = { ...this.info, payment: { fileName: '', url: '', remark: '', size: '' } };
            this.show = true;
        },
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.form };
            delete data.payment;
            data.paymentImg = this.form.payment.url;
            data.paymentRemark = this.form.payment.remark;
            this.saving = true;
            this.$http
                .post('/fee/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$emit('refreash');
                    this.show = false;
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        }
    }
};
</script>
<style lang="less">
.fee.el-form .el-select {
    width: 100%;
}
</style>
