<template>
    <div class="app-container">
        <!-- <div class="filter-container">
            <el-input v-model="listQuery.payNo" clearable class="filter-item" size="small" style="width: 200px;"
                placeholder="请输入编号" />
            <el-input v-model="listQuery.businessType" clearable class="filter-item" size="small" style="width: 200px;"
                placeholder="请输入单据类型" />
            <el-input v-model="listQuery.status" clearable class="filter-item" size="small" style="width: 200px;"
                placeholder="请输入状态" />
            <el-button v-permission="['customerBilling:customerbilling:list']" class="filter-item" type="primary"
                size="mini" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button v-permission="['customerBilling:customerbilling:create']" class="filter-item" type="primary"
                size="mini" icon="el-icon-edit" @click="handleCreate">添加</el-button>
        </div> -->

        <!-- <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
            highlight-current-row>
            <el-table-column align="center" label="编号" prop="payNo" />
            <el-table-column align="center" label="单据类型" prop="businessType" />
            <el-table-column align="center" label="结账日期" prop="closingDate" />
            <el-table-column align="center" label="已付金额" prop="amountPaid" />
            <el-table-column align="center" label="未付金额" prop="unpaidAmount" />
            <el-table-column align="center" label="备注1" prop="remarks" />
            <el-table-column align="center" label="备注2" prop="remark" />
            <el-table-column align="center" label="状态" prop="status" />
            <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['customerBilling:customerbilling:edit']" type="primary" size="mini"
                        @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button v-permission="['customerBilling:customerbilling:delete']" type="danger" size="mini"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table> -->

        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" /> -->

        <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"> -->
            <div class="base-title">基本信息</div>
            <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left"
                label-width="100px" style="width: 400px; margin-left:50px;">
                <el-form-item label="id" prop="id" hidden>
                    <el-input v-model="dataForm.id" />
                </el-form-item>
                <el-form-item label="编号" prop="payNo">
                    <el-input v-model="dataForm.payNo" />
                </el-form-item>
                <el-form-item label="单据类型" prop="businessType">
                    <el-input v-model="dataForm.businessType" />
                </el-form-item>
                <el-form-item label="结账日期" prop="closingDate">
                    <el-input v-model="dataForm.closingDate" />
                </el-form-item>
                <el-form-item label="已付金额" prop="amountPaid">
                    <el-input v-model="dataForm.amountPaid" />
                </el-form-item>
                <el-form-item label="未付金额" prop="unpaidAmount">
                    <el-input v-model="dataForm.unpaidAmount" />
                </el-form-item>
                <el-form-item label="备注1" prop="remarks">
                    <el-input v-model="dataForm.remarks" />
                </el-form-item>
                <el-form-item label="备注2" prop="remark">
                    <el-input v-model="dataForm.remark" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-input v-model="dataForm.status" />
                </el-form-item>
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus == 'create'" :loading="submiting" type="primary" @click="createData">确定
                </el-button>
                <el-button v-else type="primary" :loading="submiting" @click="updateData">确定</el-button>
            </div> -->
        <!-- </el-dialog> -->
    </div>
</template>

<script>
import {
    listCustomerBillingInfo,
    createCustomerBillingInfo,
    updateCustomerBillingInfo,
    deleteCustomerBillingInfo
} from '@/api/customerBillingInfo'
import Pagination from '@/components/Pagination'
export default {
    name: 'CustomerBillingInfo',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20
            },
            dataForm: {
                id: undefined
            },
            dialogFormVisible: false,
            submiting: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '创建'
            },
            rules: {
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            listCustomerBillingInfo(this.listQuery).then(response => {
                this.list = response.data.data.items
                this.total = response.data.data.total
                this.listLoading = false
            })
                .catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        resetForm() {
            this.dataForm = {
                id: undefined
            }
        },
        handleCreate() {
            this.resetForm()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        createData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    this.submiting = true
                    createCustomerBillingInfo(this.dataForm).then(response => {
                        this.list.unshift(response.data.data)
                        this.dialogFormVisible = false
                        this.$notify.success({
                            title: '成功',
                            message: '添加成功'
                        })
                        this.submiting = false
                    })
                        .catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.data.errmsg
                            })
                            this.submiting = false
                        })
                }
            })
        },
        handleUpdate(row) {
            this.dataForm = Object.assign({}, row)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    this.submiting = true
                    updateCustomerBillingInfo(this.dataForm).then(() => {
                        for (const v of this.list) {
                            if (v.id === this.dataForm.id) {
                                const index = this.list.indexOf(v)
                                this.list.splice(index, 1, this.dataForm)
                                break
                            }
                        }
                        this.dialogFormVisible = false
                        this.submiting = false
                        this.$notify.success({
                            title: '成功',
                            message: '更新成功'
                        })
                    })
                        .catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.data.errmsg
                            })
                            this.submiting = false
                        })
                }
            })
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该记录---' + row.id + '---, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCustomerBillingInfo(row.id).then(response => {
                    this.$notify.success({
                        title: '成功',
                        message: '删除成功'
                    })
                    const index = this.list.indexOf(row)
                    this.list.splice(index, 1)
                })
                    .catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.data.errmsg
                        })
                    })
            }).catch(() => {
                return false
            })
        }
    }
}
</script>
