<template>
    <div class="app-container">
        <el-table v-loading="loading" fit highlight-current-row border stripe :data="billList" @selection-change="handleSelectionChange">
            <el-table-column label="门店名称" align="center" prop="orgName" width="130px"> </el-table-column>
            <el-table-column label="账单标题" align="center" prop="title" width="100px" />
            <el-table-column label="开始时间" align="center" prop="beginTime" width="100px" />
            <el-table-column label="结束时间" align="center" prop="endTime" width="100px" />
            <el-table-column label="清算状态" align="center" prop="status">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.settlement_status_type" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="会员剩余金额" align="center" prop="memberBalance" width="100px" />
            <el-table-column label="应付押金" align="center" prop="payableDeposit" width="100px" />
            <el-table-column label="已付押金" align="center" prop="paidDeposit" width="130px" />
            <el-table-column label="福利金额" align="center" prop="welfareAmount" width="130px" />
            <el-table-column label="福利押金" align="center" prop="welfareDeposit" width="150px" />
            <el-table-column label="卡密押金" align="center" prop="cardPasswordDeposit" width="100px" />
            <el-table-column label="未开卡卡密金额" align="center" prop="unopenedCardPasswordAmount" width="140px" />
            <el-table-column label="已付卡密押金" align="center" prop="paidCardPasswordDeposit" width="130px" />
            <el-table-column label="已付福利押金" align="center" prop="paidWelfareDeposit" width="100px" />
            <el-table-column label="支付宝/微信" align="center" prop="alipayAndWechatAmount" width="100px" />
            <el-table-column label="原材料备用金" align="center" prop="materialImprestAmount" width="100px" />
            <el-table-column label="系统维护费" align="center" prop="systemMaintenanceAmount" width="100px" />
            <el-table-column label="洗衣费" align="center" prop="washClothAmount" width="100px" />
            <el-table-column label="顺丰快递费" align="center" prop="sfExpressAmount" width="100px" />
            <el-table-column label="跨店结算金" align="center" prop="crossStoreSettlementAmount" width="100px" />
            <el-table-column label="超额订货金额" align="center" prop="overOrderingAmount" width="100px" />
            <el-table-column label="结算金额" align="center" prop="settlementAmount" width="100px" />

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="getDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog :title="title" :visible.sync="open" size="50%" append-to-body v-if="settlementManageStore">
            <el-row :gutter="15">
                <el-card>
                    <el-descriptions :column="3" direction="vertical" border :label-style="{ 'text-align': 'center' }" :content-style="{ 'text-align': 'center', color: '#ff4949', 'font-size': '15px', 'font-weight': 'bold' }">
                        <el-descriptions-item label="门店名称" :span="3">{{ sysStore == null ? '--' : sysStore.name }}</el-descriptions-item>
                        <el-descriptions-item label="开始时间">{{ settlementManageStore == null ? '--' : settlementManageStore.beginTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ settlementManageStore == null ? '--' : settlementManageStore.endTime }}</el-descriptions-item>
                        <el-descriptions-item label="会员剩余金额(元)"> {{ settlementManageStore.memberBalance == null ? '0' : settlementManageStore.memberBalance }}</el-descriptions-item>
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="应付押金 =会员剩余金额 *费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                应付押金(元)
                            </span>
                            {{ settlementManageStore.payableDeposit == null ? '0' : settlementManageStore.payableDeposit }}</el-descriptions-item
                        >
                        <el-descriptions-item label="已付押金(元)"> {{ settlementManageStore.paidDeposit == null ? '0' : settlementManageStore.paidDeposit }}</el-descriptions-item>
                        <el-descriptions-item label="福利金额(元)"> {{ settlementManageStore.welfareAmount == null ? '0' : settlementManageStore.welfareAmount }}</el-descriptions-item>
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="应付福利押金=福利金额 *费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                福利押金(元)
                            </span>
                            {{ settlementManageStore.welfareDeposit == null ? '0' : settlementManageStore.welfareDeposit }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="应付卡密押金=未开卡卡密金额 *费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                卡密押金(元)
                            </span>
                            {{ settlementManageStore.cardPasswordDeposit == null ? '0' : settlementManageStore.cardPasswordDeposit }}</el-descriptions-item
                        >
                        <el-descriptions-item label="未开卡卡密金额(元)"> {{ settlementManageStore.unopenedCardPasswordAmount == null ? '0' : settlementManageStore.unopenedCardPasswordAmount }}</el-descriptions-item>
                        <el-descriptions-item label="已付福利押金(元)"> {{ settlementManageStore.paidWelfareDeposit == null ? '0' : settlementManageStore.paidWelfareDeposit }}</el-descriptions-item>
                        <el-descriptions-item label="已付卡密押金(元)"> {{ settlementManageStore.paidCardPasswordDeposit == null ? '0' : settlementManageStore.paidCardPasswordDeposit }}</el-descriptions-item>
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="支付宝/微信=所有收银*（1-费率)" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                支付宝/微信(元)
                            </span>
                            {{ settlementManageStore.alipayAndWechatAmount == null ? '0' : settlementManageStore.alipayAndWechatAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="原材料备用金=订单金额*费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                原材料备用金(元)
                            </span>
                            {{ settlementManageStore.materialImprestAmount == null ? '0' : settlementManageStore.materialImprestAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="系统维护费=订单金额*费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                系统维护费(元)
                            </span>
                            {{ settlementManageStore.systemMaintenanceAmount == null ? '--' : settlementManageStore.systemMaintenanceAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="洗衣费=洗衣单项总金额*费率" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                洗衣费(元)
                            </span>
                            {{ settlementManageStore.washClothAmount == null ? '0' : settlementManageStore.washClothAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="顺丰快递费=顺丰订单数*9" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                顺丰快递费(元)
                            </span>
                            {{ settlementManageStore.sfExpressAmount == null ? '0' : settlementManageStore.sfExpressAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="[跨店结算金=(本店卡:洗衣*费率-异店卡:洗衣*费率)+(本店卡:零售*费率-异店卡:零售*费率)+(本店卡:app*费率-异店卡:app*费率)+(本店卡:第三方*费率-异店卡:第三方*费率)]" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                跨店结算金(元)
                            </span>
                            {{ settlementManageStore.crossStoreSettlementAmount == null ? '0' : settlementManageStore.crossStoreSettlementAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item label="超额订货金额(元)"> {{ settlementManageStore.overOrderingAmount == null ? '0' : settlementManageStore.overOrderingAmount }}</el-descriptions-item>
                        <el-descriptions-item>
                            <span slot="label">
                                <el-tooltip content="(结算金额=支付宝/微信-(应付押金-已付押金)-(应付福利押金+卡密押金-已付福利押金-已付卡密押金)-原材料备用金-系统维护费-洗衣费-顺丰快递费-跨店结算金-超额订货金额)" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                                结算金额(元)
                            </span>
                            {{ settlementManageStore.settlementAmount == null ? '0' : settlementManageStore.settlementAmount }}</el-descriptions-item
                        >
                        <el-descriptions-item label="是否确认数据符合">{{ getCheckName }}</el-descriptions-item>
                        <el-descriptions-item label="数据确认时间">{{ settlementManageStore.dataCheckTime == null ? '暂无数据' : settlementManageStore.dataCheckTime }}</el-descriptions-item>
                        <el-descriptions-item label="数据确认说明">{{ settlementManageStore.dataCheckDesc == null ? '暂无数据' : settlementManageStore.dataCheckDesc }}</el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <el-card>
                    <el-form ref="form" :model="form" :rules="rules" label-width="50%" style="margin-top: 10px" v-if="settlementManageStore">
                        <el-col :span="24">
                            <el-form-item label="收取余额押金" prop="settlePaidDeposit">
                                <el-input-number v-model="form.settlePaidDeposit" :controls="false" placeholder="请输入收取余额押金" :disabled="getCanEdit" :max="9999999" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="收取福利押金" prop="settleWelfareDeposit">
                                <el-input-number v-model="form.settleWelfareDeposit" :controls="false" placeholder="请输入收取余额押金" :disabled="getCanEdit" :max="9999999" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="收取卡密押金" prop="settleGetCardPasswordDeposit">
                                <el-input-number v-model="form.settleGetCardPasswordDeposit" :controls="false" placeholder="请输入收取余额押金" :disabled="getCanEdit" :max="9999999" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="收取材料费" prop="settleMaterialImprestAmount">
                                <el-input-number v-model="form.settleMaterialImprestAmount" :controls="false" placeholder="请输入收取余额押金" :disabled="getCanEdit" :max="9999999" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="清算【实际结算金额】" prop="realSettlementAmount">
                                <el-input-number v-model="form.realSettlementAmount" :controls="false" placeholder="请输入收取余额押金" :disabled="getCanEdit" :max="9999999" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="清算备注" prop="settleRemark">
                                <el-input v-model="form.settleRemark" style="width: auto" type="textarea" :rows="4" placeholder="请输入清算备注" :disabled="getCanEdit" />
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <div>
                        <el-button type="primary" @click="restartCountSettlementAmount" v-if="settlementManageStore.status != '1'" style="margin-left: 50%; margin-top: 10px">重新计算实际结算金额</el-button>
                    </div>
                </el-card>
            </el-row>

            <div slot="footer" class="dialog-footer" v-if="settlementManageStore.status != '1'">
                <el-button type="primary" @click="submitForm" style="margin-left: 5%">确认结算</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getRate, delRate } from '@/api/settlement/rate'
import { allOrg } from '@/api/system/store'
import { insertSettlementBill, listFactorySettlement, listSettlementBill, confirmSettlementByFactory, listStoreSettlement, getInfoByStore, submitStoreSettlement } from '@/api/settlement/bill'

export default {
    name: 'billSettlementStore',
    dicts: ['settlement_status_type'],
    data() {
        return {
            monthTime: '',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 结算费率表格数据
            billList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                title: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                title: [{ required: true, message: '账单标题不能为空', trigger: 'blur' }]
            },
            orgList: [],
            storeList: [],
            settlementManageStore: null,
            sysSettlementRate: null,
            sysStore: null
        }
    },
    created() {
        this.billId = this.$route.params.billId
        this.queryParams.billId = this.billId
        allOrg().then((res) => {
            this.orgList = res.data
            this.orgList.forEach((org) => {
                if (org.sourceType == '02') {
                    this.storeList.push(org)
                }
            })
        })
        this.getList()
    },
    computed: {
        getCheckName() {
            if (this.settlementManageStore.dataCheck == null) {
                return '--'
            }
            if (this.settlementManageStore.dataCheck == '1') {
                return '符合'
            }
            if (this.settlementManageStore.dataCheck == '2') {
                return '不符合'
            }
            if (this.settlementManageStore.dataCheck == '0') {
                return '未检测'
            }
        },
        getCanEdit() {
            return this.settlementManageStore.status == '1'
        }
    },
    methods: {
        getDetail(row) {
            this.reset()
            const id = row.id
            getInfoByStore(id).then((response) => {
                this.settlementManageStore = response.data.settlementManageStore
                this.sysSettlementRate = response.data.sysSettlementRate
                this.sysStore = response.data.sysStore
                this.open = true
                this.title = '门店结算费率详情信息'
                this.handleSettleAmount(this.settlementManageStore.id)
            })
        },
        handleSettleAmount(id) {
            if (this.settlementManageStore.status == '1') {
                this.form.settleRemark = this.settlementManageStore.settleRemark
                //清算收取卡密押金
                this.form.settleGetCardPasswordDeposit = this.settlementManageStore.settleGetCardPasswordDeposit
                //清算福利金额
                this.form.settleWelfareDeposit = this.settlementManageStore.settleWelfareDeposit
                //清算已付押金
                this.form.settlePaidDeposit = this.settlementManageStore.settlePaidDeposit
                //清算原材料备用金（材料费）
                this.form.settleMaterialImprestAmount = this.settlementManageStore.settleMaterialImprestAmount
                this.form.realSettlementAmount = this.settlementManageStore.settleSettlementAmount
                return
            }
            //门店结算Id
            this.form.settleId = id
            this.form.settleRemark = this.settlementManageStore.settleRemark
            //清算收取卡密押金
            this.form.settleGetCardPasswordDeposit = this.settlementManageStore.cardPasswordDeposit - this.settlementManageStore.paidCardPasswordDeposit
            //清算福利金额
            this.form.settleWelfareDeposit = this.settlementManageStore.welfareDeposit - this.settlementManageStore.paidWelfareDeposit
            //清算已付押金
            this.form.settlePaidDeposit = this.settlementManageStore.payableDeposit - this.settlementManageStore.paidDeposit
            //清算原材料备用金（材料费）
            this.form.settleMaterialImprestAmount = this.settlementManageStore.materialImprestAmount

            //实际结算金额
            // (结算金额=支付宝/微信-(应付押金-已付押金)-(应付福利押金+卡密押金-已付福利押金-已付卡密押金)-原材料备用金-系统维护费-洗衣费-顺丰快递费-跨店结算金-超额订货金额)
            if (this.settlementManageStore.alipayAndWechatAmount == null) {
                this.form.realSettlementAmount =
                    (this.settlementManageStore.alipayAmount * 1000000 +
                        this.settlementManageStore.wechatAmount * 1000000 -
                        (this.settlementManageStore.cardPasswordDeposit * 1000000 - this.settlementManageStore.paidCardPasswordDeposit * 1000000) -
                        (this.settlementManageStore.welfareDeposit * 1000000 - this.settlementManageStore.paidWelfareDeposit * 1000000) -
                        (this.settlementManageStore.payableDeposit * 1000000 - this.settlementManageStore.paidDeposit * 1000000) -
                        this.settlementManageStore.materialImprestAmount * 1000000 -
                        this.settlementManageStore.systemMaintenanceAmount * 1000000 -
                        this.settlementManageStore.washClothAmount * 1000000 -
                        this.settlementManageStore.sfExpressAmount * 1000000 -
                        this.settlementManageStore.crossStoreSettlementAmount * 1000000 -
                        this.settlementManageStore.overOrderingAmount * 1000000) /
                    1000000
            } else {
                this.form.realSettlementAmount =
                    (this.settlementManageStore.alipayAndWechatAmount * 1000000 -
                        (this.settlementManageStore.cardPasswordDeposit * 1000000 - this.settlementManageStore.paidCardPasswordDeposit * 1000000) -
                        (this.settlementManageStore.welfareDeposit * 1000000 - this.settlementManageStore.paidWelfareDeposit * 1000000) -
                        (this.settlementManageStore.payableDeposit * 1000000 - this.settlementManageStore.paidDeposit * 1000000) -
                        this.settlementManageStore.materialImprestAmount * 1000000 -
                        this.settlementManageStore.systemMaintenanceAmount * 1000000 -
                        this.settlementManageStore.washClothAmount * 1000000 -
                        this.settlementManageStore.sfExpressAmount * 1000000 -
                        this.settlementManageStore.crossStoreSettlementAmount * 1000000 -
                        this.settlementManageStore.overOrderingAmount * 1000000) /
                    1000000
            }
            //清算结算金额, 暂时没有用
            this.form.settleSettlementAmount = this.settlementManageStore.settlementAmount
        },
        restartCountSettlementAmount() {
            if (this.settlementManageStore.alipayAndWechatAmount == null) {
                this.form.realSettlementAmount =
                    (this.settlementManageStore.alipayAmount * 1000000 +
                        this.settlementManageStore.wechatAmount * 1000000 -
                        this.form.settleGetCardPasswordDeposit * 1000000 -
                        this.form.settleWelfareDeposit * 1000000 -
                        this.form.settlePaidDeposit * 1000000 -
                        this.form.settleMaterialImprestAmount * 1000000 -
                        this.settlementManageStore.systemMaintenanceAmount * 1000000 -
                        this.settlementManageStore.washClothAmount * 1000000 -
                        this.settlementManageStore.sfExpressAmount * 1000000 -
                        this.settlementManageStore.crossStoreSettlementAmount * 1000000 -
                        this.settlementManageStore.overOrderingAmount * 1000000) /
                    1000000
            } else {
                this.form.realSettlementAmount =
                    (this.settlementManageStore.alipayAndWechatAmount * 1000000 -
                        this.form.settleGetCardPasswordDeposit * 1000000 -
                        this.form.settleWelfareDeposit * 1000000 -
                        this.form.settlePaidDeposit * 1000000 -
                        this.form.settleMaterialImprestAmount * 1000000 -
                        this.settlementManageStore.systemMaintenanceAmount * 1000000 -
                        this.settlementManageStore.washClothAmount * 1000000 -
                        this.settlementManageStore.sfExpressAmount * 1000000 -
                        this.settlementManageStore.crossStoreSettlementAmount * 1000000 -
                        this.settlementManageStore.overOrderingAmount * 1000000) /
                    1000000
            }
            //清算结算金额, 暂时没有用
            this.form.settleSettlementAmount = this.form.realSettlementAmount
            this.$forceUpdate()
        },
        /** 查询结算费率列表 */
        getList() {
            this.loading = true
            // this.queryParams.monthTime = this.monthTime
            listStoreSettlement(this.queryParams).then((response) => {
                this.billList = response.data.records
                this.total = response.data.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                settleId: null, //门店结算Id
                settleGetCardPasswordDeposit: null, //清算收取卡密押金
                settleSettlementAmount: null, //清算结算金额
                settleMaterialImprestAmount: null, //清算原材料备用金（材料费）
                settleWelfareDeposit: null, //清算福利金额
                settlePaidDeposit: null, //清算已付押金
                realSettlementAmount: null, //实际结算金额
                settleRemark: null //清算备注
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.monthTime = null
            this.queryParams.monthTime = null
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加结算费率'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getRate(id).then((response) => {
                this.form = response.data
                this.open = true
                this.title = '修改结算费率'
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$confirm('是否确认结算？')
                .then(() => {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.restartCountSettlementAmount()
                            submitStoreSettlement(this.form).then((response) => {
                                this.$modal.msgSuccess('提交成功')
                                this.open = false
                                this.getList()
                            })
                        }
                    })
                })
                .catch(() => {})
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal
                .confirm('是否确认删除结算费率编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delRate(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/settlement/rate/export',
                {
                    ...this.queryParams
                },
                `rate_${new Date().getTime()}.xlsx`
            )
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        }
    }
}
</script>
