<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="feeName" label="费用名称">
                <el-select v-model="form.feeType" filterable placeholder="请选择" style="width: 100px;">
                    <el-option
                        v-for="item in feeMaintenanceIdOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>

                <el-select
                    v-model="form.feeName"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入或选择"
                    style="width: 170px; margin-left: 10px;"
                >
                    <el-option v-for="item in feeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="patentPartnerId" label="专利权人">
                <el-select
                    v-model="form.patentPartnerId"
                    :disabled="isLogoPatent"
                    clearable
                    filterable
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in patentPartnerIdOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="payPartnerId" label="支付对象">
                <el-select v-model="form.payPartnerId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in patentPartnerIdOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="amount" label="金额">
                <el-input-number style="width: 170px;" type="number" v-model="form.amount"></el-input-number>
                <el-select
                    style="width: 100px; margin-left: 10px;"
                    v-model="form.currencyMaintenanceId"
                    filterable
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in currencyMaintenanceIdOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="paymentDeadline" label="支付期限">
                <el-date-picker
                    v-model="form.paymentDeadline"
                    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="bill">
                <attachment-upload v-model="form.bill"></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: {
        logoPatentInfo: {
            type: Object,
            default: () => {
                return {};
            }
        },
        isLogoPatent: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.$http
            .post('/maintenance/byDesc', { description: 'FeeType' })
            .then(res => {
                console.log(res.length);
                if (res && res.length > 0) {
                    this.feeMaintenanceIdOptions = res[0].children.map(item => {
                        return {
                            label: item.name,
                            value: item.name,
                            children: item.children
                        };
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post('/partner/all', { size: 1000, query: { del: false } }, { body: 'json' })
            .then(res => {
                this.patentPartnerIdOptions = res.content.map(item => {
                    return {
                        label: item.name,
                        value: item.id
                    };
                });
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post('/maintenance/byDesc', { description: 'Currency' })
            .then(res => {
                if (res.length > 0) {
                    res[0].children.forEach(item => {
                        this.currencyMaintenanceIdOptions.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    data() {
        return {
            show: false,
            saving: false,
            form: {
                bill: { fileName: '', url: '', remark: '', size: '' },
                currencyMaintenanceId: 35,
                patentPartnerId: '',
                payPartnerId: ''
            },
            rules: {
                feeName: {
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('请选择费用名称'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'change'
                },
                payPartnerId: { required: true, message: '请选择支付对象', trigger: 'blur' },
                amount: { required: true, message: '请输入支付金额', trigger: 'blur' },
                paymentDeadline: { required: true, message: '请选择支付期限', trigger: 'blur' },
                remark: { required: true, message: '请输入账单', trigger: 'blur' },
                bill: {
                    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() {
            if (this.isLogoPatent) {
                this.$nextTick(() => {
                    this.form.patentPartnerId = this.logoPatentInfo.clientPartnerId;
                    this.form.payPartnerId = this.logoPatentInfo.supplierPartnerId;
                    this.show = true;
                });
            }
        },
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.form };
            delete data.bill;
            data.billImg = this.form.bill.url;
            data.billRemark = this.form.bill.remark;
            data.status = 'UNPAID';
            data.userId = this.$store.state.userInfo.id;
            data.patentId = this.logoPatentInfo.id;
            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>
