<template>
    <div class="app-container">
        <div class="head-container">
            <el-radio-group v-model="query.time" @change="timeChange">
                <el-radio-button :label="item.value" v-for="item in timeList" :key="item.label">{{ item.label
                    }}</el-radio-button>
            </el-radio-group>
        </div>
        <div class="head-container" v-if="query.time == 'custom'">
            <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getTableData">
            </el-date-picker>
        </div>
        <div class="head-container">
            <div class="filter_wrap">
                <el-select v-model="query.status" placeholder="付款状态">
                    <el-option label="待支付" value="0"></el-option>
                    <el-option label="已付款" value="1"></el-option>
                </el-select>
                <el-select v-model="query.type" placeholder="选择类型">
                    <el-option label="进货" value="purveyor"></el-option>
                    <el-option label="退货" value="reject"></el-option>
                </el-select>
                <el-button type="primary" @click="getTableData">查询</el-button>
                <el-button @click="resetHandle">重置</el-button>
            </div>
        </div>
        <div class="head-container">
            <div class="info_list">
                <div class="item">
                    <div class="icon_wrap" style="background-color: #F2D7FF;">
                        <i class="icon el-icon-info" style="color:#C978EE;"></i>
                    </div>
                    <div class="info">
                        <div class="n">￥{{ info.totalAmount }}</div>
                        <div class="intro">总交易{{ info.waitCount }}笔</div>
                    </div>
                </div>
                <div class="item">
                    <div class="icon_wrap" style="background-color: #DFFECC;">
                        <i class="icon el-icon-success" style="color:#47B505;"></i>
                    </div>
                    <div class="info">
                        <div class="n">￥{{ info.paidAmount }}</div>
                        <div class="intro">已支付金额</div>
                    </div>
                </div>
                <div class="item">
                    <div class="icon_wrap" style="background-color: #FFE7D6;">
                        <i class="icon el-icon-circle-plus" style="color: #FF6B00;"></i>
                    </div>
                    <div class="info">
                        <div class="n">￥{{ info.waitAmount }}</div>
                        <div class="intro">待支付金额</div>
                    </div>
                </div>
                <div class="item">
                    <div class="icon_wrap" style="background-color: #FFF1D5;">
                        <i class="icon el-icon-warning" style="color: #FEB420;"></i>
                    </div>
                    <div class="info">
                        <div class="n">{{ info.waitNumber }}</div>
                        <div class="intro">待支付笔数</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="head-container">
            <div class="select_count_wrap">
                <div class="select_count">
                    <i class="icon el-icon-warning"></i>
                    已选中
                    <span class="n">{{ selectCount }}</span>
                    项
                </div>
                <el-button>批量付款</el-button>
            </div>
        </div> -->
        <div class="head-container">
            <el-table :data="tableData.list" v-loading="tableData.loading" @select="selectHandle"
                @select-all="selectHandle">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="创建日期" prop="createdAt">
                    <template v-slot="scope">
                        {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="type">
                    <template v-slot="scope">
                        {{ scope.row.type | typeFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="应付金额" prop="totalAmount">
                    <template v-slot="scope">
                        ￥{{ scope.row.totalAmount }}
                    </template>
                </el-table-column>
                <el-table-column label="已付款金额" prop="totalAmount">
                    <template v-slot="scope">
                        <span style="color: #47B505;">
                            ￥{{ scope.row.paidAmount }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="待付款金额" prop="waitAmount">
                    <template v-slot="scope">
                        <span class="num"> ￥{{ scope.row.waitAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status">
                    <template v-slot="scope">
                        <el-tag type="info">
                            {{ types.find(item => item.value == scope.row.status).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="付款方式" prop="payType"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="付款时间" prop="updatedAt">
                    <template v-slot="scope">
                        {{ scope.row.paidAt && dayjs(scope.row.paidAt).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button type="text" size="mini" round @click="Uppop(scope.row.id)">付款</el-button>
                        <el-button type="text" size="mini"
                            @click="typedialogshowsumbit(scope.row.id)">账单付款记录</el-button>
                            <el-button type="text" size="mini" @click="stockData.size = 10,
                            stockData.page = 0, gettbConsInfoFlowstock(scope.row)">出入库记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
            @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        <!-- 付款弹窗组件 -->
        <el-dialog title="" :visible.sync="dialogTableVisible" width="350px">
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm">
                <el-form-item label="付款金额" label-width="80px" prop="montey">
                    <el-input v-model="ruleForm.montey" placeholder="请输入金额" type="number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" label-width="80px">
                    <el-input v-model="ruleForm.payType" placeholder="请输入付款方式" type="text"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="ruleForm.remark" placeholder="请输备注" type="text" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false; ruleForm.montey = ''; ruleForm.payType = ''">取
                    消</el-button>
                <el-button type="primary" @click="sumbit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="账单付款记录" :visible.sync="typedialogshow">
            <div class="head-container">
                <el-input v-model="querytypedialogshow.type" size="small" clearable placeholder="支付方式"
                    style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
                <div style="margin-top: 10px;">
                    <el-button type="primary" @click="getTableDatatype">查询</el-button>
                    <el-button @click="resetHandletype">重置</el-button>
                </div>
            </div>
            <el-table ref="table" :data="tableDatatype.data" v-loading="tableDatatype.loading" row-key="id">
                <el-table-column label="支付方式" prop="payType" />
                <el-table-column label="支付金额" prop="paidAmount" />
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="创建时间" prop="createTime">
                    <template v-slot="scope">
                        {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!--入库记录 -->
        <el-dialog title="出入库记录" :visible.sync="variabilityshow" width="75%">
            <div class="head-container">
                <el-table ref="table" :data="stockData.data" v-loading="stockData.loading" row-key="id" height="450">
                    <el-table-column label="类型" prop="type">
                        <template v-slot="scope">
                            {{ scope.row.type == 'reject' ? '退货出库' : '供应商入库' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template v-slot="scope">
                            {{ scope.row.status == 'status' ? '正常 ' : '作废' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark">
                    </el-table-column>
                    <el-table-column label="创建时间" prop="stockTime">
                        <template v-slot="scope">
                            {{ dayjs(scope.row.stockTime).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="head-container">
                <el-pagination :total="stockData.total" :current-page="stockData.page + 1" :page-size="stockData.size"
                    layout="total, sizes, prev, pager, next, jumper" @current-change="wstockChange" @size-change="(e) => {
                        stockData.size = e;
                        stockData.page = 0;
                        gettbConsInfoFlowstock();
                    }" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { tbShopPurveyorTransactInfo, paidAmount, dictDetail, tbShopPurveyorTransactSum, tbShopPurveyorTransacttransactPayInfos, tbProductStockOperatepage } from '@/api/invoicing'
export default {
    data() {
        return {
            // 付款当前的id
            idinfo: "",
            dayjs,
            dialogTableVisible: false,
            timeList: [
                {
                    label: '全部',
                    value: 'all'
                },
                {
                    label: '今天',
                    value: '0'
                },
                {
                    label: '昨天',
                    value: '-1'
                },
                {
                    label: '最近7天',
                    value: '-7'
                },
                {
                    label: '最近30天',
                    value: '-30'
                },
                {
                    label: '本周',
                    value: 'week'
                },
                {
                    label: '本月',
                    value: 'moth'
                },
                {
                    label: '自定义',
                    value: 'custom'
                }
            ],
            types: [
                {
                    value: 0,
                    label: '待付款'
                },
                {
                    value: 1,
                    label: '已付款'
                },
                {
                    value: '-1',
                    label: '作废'
                }
            ],
            ruleForm: {
                montey: null,
                payType: null,
                remark: ""
            },
            selectCount: 0,
            query: {
                type: '',
                status: '',
                time: 'all',
                createdAt: []
            },
            tableData: {
                page: 0,
                size: 10,
                total: 0,
                sort: 'id',
                loading: false,
                list: []
            },
            info: '',
            rules: {
                montey: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ],
            },
            typedialogshow: false,//查看详情
            querytypedialogshow: {
                type: '',
                id: ''
            },
            tableDatatype: {
                page: 0,
                size: 10,
                total: 0,
                loading: false,
                list: []
            },
            variabilityshow: false,
            variabilitytitle: '',
            stockData: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0,
                id: ''
            },
        }
    },
    filters: {
        typeFilter(t) {
            const m = {
                purveyor: '进货单',
                reject: '退货单',
                cons_in: '耗材入库',
                cons_out: '耗材出库'
            }
            return m[t]
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        Uppop(id) {
            this.dialogTableVisible = true
            this.idinfo = id
        },
        sumbit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.dialogTableVisible = false
                    const res = await paidAmount({
                        id: this.idinfo,
                        paidAmount: this.ruleForm.montey,
                        payType: this.ruleForm.payType,
                        remark: this.ruleForm.remark
                    })
                    this.$message({ type: 'success', message: '付款成功!' });
                    this.ruleForm.montey = ''
                    this.ruleForm.payType = ''
                    this.getTableData()
                } else {
                    return false;
                }
            });

        },
        async getTableData() {
            this.tableData.loading = true
            try {
                const res = await tbShopPurveyorTransactInfo({
                    page: this.tableData.page,
                    size: this.tableData.size,
                    sort: this.tableData.sort,
                    purveyorId: this.$route.query.purveyorId,
                    status: this.query.status,
                    type: this.query.type,
                    createdAt: this.query.createdAt,
                })
                this.tableData.loading = false
                this.tableData.list = res.content
                this.tableData.total = res.totalElements
                this.tbShopPurveyorTransactSum()
            } catch (error) {
                console.log(error);
            }
        },
        // 重置查询
        resetHandle() {
            this.query.time = 'all'
            this.query.createdAt = []
            this.tableData.page = 0;
            this.query.type = ''
            this.query.status = ''
            this.getTableData()
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1
            this.getTableData()
        },
        // 选择时间
        timeChange(e) {
            this.query.createdAt = []
            const format0 = 'YYYY-MM-DD 00:00:00'
            const format1 = 'YYYY-MM-DD 23:59:59'
            switch (e) {
                case '0':
                    this.query.createdAt = [dayjs().format(format0), dayjs().format(format1)]
                    break;
                case '-1':
                    this.query.createdAt = [dayjs().add(-1, 'day').format(format0), dayjs().add(-1, 'day').format(format1)]
                    break;
                case '-7':
                    this.query.createdAt = [dayjs().add(-7, 'day').format(format0), dayjs().format(format1)]
                    break;
                case '-30':
                    this.query.createdAt = [dayjs().add(-30, 'day').format(format0), dayjs().format(format1)]
                    break;
                case 'week':
                    this.query.createdAt = [dayjs().startOf('week').format(format0), dayjs().endOf('week').format(format1)]
                    break;
                case 'moth':
                    this.query.createdAt = [dayjs().startOf('month').format(format0), dayjs().endOf('month').format(format1)]
                    break;
                default:
                    break;
            }
            this.getTableData()
        },
        selectHandle(selection, row) {
            this.selectCount = 0
            this.selectCount = selection.length
        },
        async tbShopPurveyorTransactSum() {
            this.info = await tbShopPurveyorTransactSum({ purveyorId: this.$route.query.purveyorId, type: this.query.type })
        },
        //记录分页
        paginationChangetype(e) {
            this.tableDatatype.page = e - 1
            this.getTableDatatype()
        },
        // 记录重置查询
        resetHandletype() {
            this.querytypedialogshow.type = ''
            this.tableData.page = 0
            this.getTableDatatype()
        },
        typedialogshowsumbit(ID) {
            this.querytypedialogshow.id = ID
            this.getTableDatatype()
        },
        //记录列表
        async getTableDatatype() {
            this.tableDatatype.loading = true
            try {
                const res = await tbShopPurveyorTransacttransactPayInfos({
                    // page: this.tableDatatype.page,
                    // size: this.tableDatatype.size,
                    type: this.querytypedialogshow.type,
                    id: this.querytypedialogshow.id
                })
                this.typedialogshow = true
                this.tableDatatype.loading = false
                this.tableDatatype.data = res
                this.tableDatatype.total = res.totalElements
            } catch (error) {
                console.log(error)
            }
        },
        wstockChange(e) {
            this.stockData.page = e - 1;
            this.gettbConsInfoFlowstock();
        },
        async gettbConsInfoFlowstock(item) {
            if (item) {
                this.stockData.id = item.id
            }
            this.variabilityshow = true
            this.stockData.loading = true;
            let arr = []
            // if (this.query.createdAt.length) {
            //     arr = [this.query.createdAt[0] + ' 00:00:00', this.query.createdAt[1] + ' 23:59:59']
            // } else {
            //     arr = []
            // }
            let res = await tbProductStockOperatepage({
                page: this.stockData.page,
                size: this.stockData.size,
                shopId: localStorage.getItem("shopId"),
                type: ["cons_in", "cons_out"],//预留耗材id
                purveyorId: this.stockData.id,//列名
                createdAt: arr//耗材id
            })
            this.stockData.loading = false;
            this.stockData.data = res.content;
            this.stockData.total = res.totalElements;
        },
    }
}
</script>

<style scoped lang="scss">
.select_count_wrap {
    display: flex;
    align-items: center;

    .select_count {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e7f3ff;
        width: 120px;
        height: 40px;
        font-size: 14px;
        margin-right: 10px;
        border-radius: 4px;

        .icon {
            margin-right: 4px;
        }

        .n {
            margin: 0 4px;
        }

        .icon,
        .n {
            color: #409EFF;
        }
    }
}

.num {
    color: #F56C6C;
    font-weight: bold;
}

.count {
    color: #409EFF;
}

.info_list {
    display: flex;
    gap: 20px;

    .item {
        flex: 1;
        background-color: #fff;
        padding: 20px;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;

        .icon_wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            padding: 2px;

            .icon {
                font-size: 40px;
            }
        }

        .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-left: 20px;

            .n {
                font-size: 28px;
                text-indent: -6px;
            }

            .intro {
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>
<!-- <style>
 /deep/ .el-dialog__body{
    padding-right: 20px!important;
}
</style> -->